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:

ezgif.com-video-to-gif

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.

 

Advertisements

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out /  Change )

Google+ photo

You are commenting using your Google+ account. Log Out /  Change )

Twitter picture

You are commenting using your Twitter account. Log Out /  Change )

Facebook photo

You are commenting using your Facebook account. Log Out /  Change )

w

Connecting to %s