Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found

Submitted

BMI Calculator

P

@jguleserian

Desktop design screenshot for the Body Mass Index calculator coding challenge

This is a solution for...

  • HTML
  • CSS
  • JS
2junior
View challenge

Design comparison


SolutionDesign

Solution retrospective


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

Greetings, Everyone! While this project was a lot of fun, and certainly a challenge, I was happy about the way it turned out in general including the smoothness of the form change and general formatting. On the other hand, to get the level of specificity for all the fields and formatting combinations (during resizing), I felt like the HTML got a little long and multilayered. This made it difficult to keep my place in the code during formatting, even though I used GPS stylesheet organization. However, little by little, I am developing a nomenclature for certain types of elements, or, for example, and their constituent parts.

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

In addition to the complexity of the form and keeping track of where I was in the code during formatting/programming, I had a few other difficulties, some of which I surmounted, and some which I had to work around. If you have any advice, I would certainly accept it with open arms. While you may notice more issues as you look through my code, I have listed below a few of my struggles:

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

  1. I would love a good tutorial on how to handle custom radio buttons. I've tried a few, but they only gave examples of how they did it and didn't give much instruction.
  2. If someone would take a look at my script.js file and let me know if they could have solved the calculation issue more succinctly.
  3. Also, my use of the ::before and ::after pesudo elements was a bit awkward. I had to add a element after the and add a pseudo element in order to add a stylized placeholder for the input fields. This led to many issues in keeping those placeholders in the right place during resizing.

Anyway, I would love some advice along these issues if someone had the time to help me out.

Thank you, Everyone! Happy coding!

Jeff

Community feedback

Please log in to post a comment

Log in with GitHub
Discord logo

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