All solutions

No solution is perfect as I'm sure mine isn't. If you see anything that can be improved be sure to let me know. This project was mostly to shake the cobwebs between learning periods.

Thank you for your time.

I wanted to start practicing with JSON and the Fetch API and with this challenge I got just what I wished for.

What seemed another head scratcher at first with heaps of lines of JS code resulted in a quite simple few lines with a forEach() function. Nonetheless, I've seen here much more elegant solutions for this challenge.

There is room for improvement as always!

I appreciate your time to look at my code, critique and help in any way possible.

Obrigado.

This one had me scratching my head for an answer for a good while.

While it is working and it is responsive, to the best of my knowledge, there is a big UX problem due to the action trigger for the math calculations happening on click on the tip buttons and not when the user inserts the input value for the number of people, which I think it was the idea.

As always, I'm welcome to suggestions and helpful hints on how to improve my solution.

Managed to get my Javascript working after much trial and error.

Let me know what I could improve on!

First, i have to admit this one looked easier than it actually was to achieve a passable solution.

Dealing with the images and how they interact with the accordion itself was my main problem. I'm pretty sure there are easier/more streamlined ways to do it. Because of this responsiveness wasn't really achieved in this solution.

Furthermore, accessibility could also be an issue. On my first attempts I've tried to make it work with <button> tags but wasn't able to achieve the "open and close" functionality the <inputs> ultimately provide.

As always I'm open to hints on how to improve this challenge.

I noticed a small 'artifact' that present itself when clicking the buttons which adds a 1px border outline. It resizes the cards height ever so slightly. I think it's due to how flexbox calculates the spacing for each item. I couldn't find a way around it.

Updated solution: Refactored breakpoints and margins.