All solutions

Alas, I couldn't implement the CSS flip clock, yet, as described in the bonus assignment:

Bonus: When a number changes, make the card flip from the middle.

I made 2 seperate containers. One for the rating and one for the Thank you.

I made JavaScript show and hide the containers, depending on the condition.

Not sure this is the most efficient method, but it works.

The result is quite good on my desktop pc.

However, on my mobile and in Chrome dev tools/Firefox dev tools (On mobile view), a part of the top of the site is seemingly cut off.

I watched this Youtube video with Kevin Powell explaining the vh unit, and some other units to solve the problem, but that didn't help.

https://www.youtube.com/watch?v=veEqYQlfNx8 (Kevin Powell, The problems with viewport units)

On ipad, the product card, seems to vertically stretched, so the text on the right gets too much white space.

What are you most proud of, and what would you do differently next time?

I want to recreate this project with Tailwind CSS and/or with BEM.

What challenges did you encounter, and how did you overcome them?

I didn't overcome any challenges this time.

What specific areas of your project would you like help with?

I do not need help with this project at the moment.

Built with ViteJS and Sass.

Included dynamic data from the data.json file and inserted with JavaScript by using createElement, appendChild(), append(), etc.

I still have to figure out the difference between appendChild() and append().