Daily UI Challenge Day 004

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:

Custom Size – 1

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.