All solutions

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

Getting the automatic card generation via .map of the array. I wanted to have the buttons for timeframes be automatically generated based on the data received too, but I had issues reading out the keys properly and decided not to invest too much time into it.

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

Getting the grid to look right while having a presentable tablet version. For that I limited the max columns on the grid to 4 and manually adjusted the width of my columns to match mobile/pc sizes respectively.

Getting the position right on the background icons of the colorstrips seemes to be a bit of a magic number thing for me where I just used some % values for mobile/pc to make it look right.

All in all quite a lot of media queries here.

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

For some reason htmlPurge from vite-plugin-purgecss purges my second data on my cards [data-category]. What causes this to happen and how do I address this? I just removed PurgeCss to get my code to work in production, but this is not a good long-term solution.

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

I especially like the solution for the cards at the bottom of the page, as I tried to make it responsive with clean css and the least amount of mediaqueries possible.

What I need to refactor is the BMI Calculator part itself. Write better state conversion between Metric and Imperial Systems as well as extract everything into React Components.

So I got the project looking fine now, but the code is a mess and I'll be refactoring it during over the next days. Any input is appreciated. All the html code is in App.js. Some topics I'd like to know how to do better:

• The lines between the Nutrition table rows (mine are done in _table.scss)
• Spacing on list bullet points. I've got mine using some magic numbers (look _list.scss) to look like the design. Is there any %-based way to get the spacing right?
• Why is the text on mobile looking different to the design? I got it close using clamp() and magic numbers, but I'm confused why using the values from Figma didn't result in the right text length.
• How do I get the Outcast font as .woff2? I got it for Young Serif via fontsquirrel, but it didn't work for Outcast. I ended up importing it through index.html. And using it as .ttf didn't work.