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

Simple React BMI Calculator

P
Rowan 50

@r-jeffery-wall

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?

I enjoyed using React to develop the BMI calculator and found it an efficient way to add functionality to the static layout and control styling (e.g: of metric/imperial displays.) I am most proud of the React functionality of this app, this was the skill I focused on training in this challenge. If I were to do this again, I would probably use a CSS framework such as Bootstrap for my styling/layout. I found that my CSS (even when using SASS) quickly got complicated and unmanageable and I found it difficult to replicate the design exactly.

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

The biggest challenge I faced here was with the CSS styling and layout. I found it difficult to know what properties to change to replicate the design exactly, and I found that my CSS quickly got complicated and unwieldy. I researched and used SASS for the first time on this project, which helped streamline things somewhat. I also decided to use CSS Grid instead of Flexbox about half-way through the project. However, I still feel that there's a lot of improvement to be done on the styling/layout front, and maybe next time I should consider using something such as Bootstrap.

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

I would love feedback on my CSS/SCSS as I think this is the area that needs the most improvement. Any feedback on how to effectively replicate designs (without using a tool such as Figma's Dev Mode) would also be appreciated. Any feedback on how to make my React more efficient would also be great!

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