All solutions

I haven't used angular in some time and used this simple challenge to get back to it.

I was unsure, how to make the "result box" hover at the edge of two containers. I have decided to make it absolute position, inside os the upper container. Then I positioned to the edge. The only problem is, that it is not fully responsive relative to the search bar.

My solution is not pixel-perfect by any means, But I am still proud of the result. The code is not so clean. I don't think, that I have used Angular's full capabilities, and I think, that some positionings could be done better. Still, the layout (in my opinion) looks great, it is fully responsive (on any resolution from 200px width to full desktop), has advanced animations (buttons moving), and works just fine. One part where I could've improved my code is to use top and left positions on the buttons, instead of transitioning. Then there would be no curved-moving button animation. But I figured it out late and didn't want to rewrite the whole thing.

Let me know if you find any bugs, or have any suggestions how to improve. :)

Give me feedback, guys :)

I am learning angular right now, and in this exercise, I have learned about forms and form validation.

I am not satisfied with the long template expressions in my form. I would've liked to create some variables for them in the component class, but I am unsure how to do it. Also, I am unsure about the working of the Angular change detection. I will further explore this area in the future.

The most difficult part for me was creating a wrapping line, that contains styled links, and a dot at the end. I am sure how good my solution is on this part.

Also, I am unsure what HTML tags I should use in some places.

And of course, I am relatively new to React, and I have little experience with building websites, so I am unsure of many things. I don't know the best practices, and what I should improve on.