The prompt for Day 4 was “Calculator”. I decided to do a simple BMI calculator for this challenge. I have been on my own weight loss journey for a little over a year now, so BMI calculators are something that I have personally used a lot recently. There are many different ways to calculate BMI, but I decided to stick with the most basic formula, which is Weight(kg)/Height^2(cm).
From stage one of this design I envisioned creating the entire page including the graphics using pure CSS. In fact, the reason I am posting Day 4 so late is because I knew that I wanted to implement the design, so I waited until I had a chance to site down and code it.
The design I created in Adobe XD can be seen here:
And here is a GIF of the implemented design:
See the Pen BMI Calculator by Melissa Dagley (@mdagley) on CodePen.
I used HTML, CSS, and JavaScript to make the completed app. It came together pretty quickly, I’m sure there is more that I could do to improve it, but I am happy with it as a creative exercise.
Melissa Dagley | Web Developer 