Responsive BMI index calculator - Html Css Js

Solution retrospective
In this challenge I found myself a bit difficult to manage the Javascript side of the code, especially in managing the form data well in order to get to display the correct result, both of the BMI index and of the recommended weight range.
I had to figure out how to best style the two input types, both the radio button and the numeric input, but overall and with no small amount of difficulty I got as close as possible with the provided design.
Do you have any advice/suggestions/constructive criticism to make regarding the design or even better, the code? I'm here and we can talk about it, I'd be very happy.
cheers
Please log in to post a comment
Log in with GitHubCommunity feedback
- @lorenzoaniel
Good job Pablo,
-
A little issue with the BMI Limitations section where it is not getting the desired pyramid/ brick effect in full desktop screen, noticed that there is a translate effect and depending on which resolution you developed at (currently looking at the site in 1920 x 1080) the static value of transform: translateX(-11.4rem); will not dynamically adjust which is why I am seeing it differently (also tried it on my main 2k resolution monitor and although it is better the layout is not as expected). Possible fix is to increase number of columns as it will be easier to create a tiled effect without having the need to translate anything.
-
regarding your issues with JS eventually you will come upon front end frameworks like react/vue/angular/svelte which are essential for modern front end development and will manipulate DOM (html elements) easier, but you can practice JS logic and syntax using leetcode or hackerrank as JS will still very much be an integral part of your front end journey. If you are interested in testing your hand at these frameworks easiest ones to jump into would be react or svelte; react is industry standard and has a bigger community but svelte has a very good tutorial built into their website (online terminal) and has alot of the features needed for near full stack web development built into it (sveltekit).
Good luck on your journey
Marked as helpful -
Join our Discord community
Join thousands of Frontend Mentor community members taking the challenges, sharing resources, helping each other, and chatting about all things front-end!
Join our Discord