BMI Calculator

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

This was my first project dusting off the month or two absence I had from coding thanks to life so I'm really happy that I was able to complete this project. My initial JS file was twice as long and I was able to refactor it quite a bit which was satisfying. I ran into an issue with the custom radio buttons showing up warped (squished) on iphone (all browsers) only.. and after an hour on google and attempting some fixes I was able to solve the problem.

What I would do differently is sit down and plan out the execution better. I had to scrap my first attempt because my CSS classes and semantics got out of control and I was having a hard time coding this mobile-first. Poor choices of flex vs grid.. etc. My second attempt was much better, although I bet it could be way cleaner.

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

Many... First was the grid issue. I did not lay out my HTML properly to allow a nice transition for the cards at the bottom of the layout. Once I scrapped my first attempt, my second attempt allowed me to become more comfortable with grid since I've really only used flexbox in the past.

Another issue I had was I didn't properly layout my media queries to adjust the BMI result container as the viewport scaled outwards. I was using JS to inject grid-template-column changes when I should have let the CSS do it all with media queries. Which I changed and it worked perfectly.

Issues #3 was the background gradients. I didn't know the best solution - so I ultimately ended up with a position: absolute div that had a background gradient and a percentage width that scaled with the viewport. I still do not know if that's the best solution for something like that. I ended up with a fixed height I believe which I know can be super dicey.

Lastly the figma file showed a grid for all sections of the page so I feel like I should have just placed all the elements using that grid, right? I only did for sections that I thought needed it. If a layout is presented with you showing all the sections on top of a 12 column grid, would you just lay it all out that way? Or is it really up to the developer still?

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

I would love to hear a better solution to setting background images to offset their position, like the background gradient in the header and the image of the dude eating sushi in the tablet view (it shows a left offset). I used position absolute, and it works fine however fixed heights and position absolute make me feel like that goes against responsiveness best practices.

Also, I used pseudo elements for the little guiding lines on the desktop layout - is that the best way to accomplish those? I couldn't think of another way.

Lastly, the radio buttons are very "magic number-y". They were custom so I had to manually place them properly. The main issue is the custom "outline". It overflows the container so I had to add margin-left to offset the button when it becomes selected. Are there better ways to make custom radio buttons that don't require all the extra margins to keep everything aligned?

Any other general feedback on the HTML/CSS/JS would be helpful as well.

Thanks!