A unit converter which takes a numerical input and converts it from Metric to Imperial units. The types of units include: length (meters & feet), volume (liters and gallons), and mass (kilograms and pounds).

• Overview
• Screenshots
  • Desktop
  • Mobile
• My Process
  • A mobile first approach
  • Built with
• Status
• Connect

This is my solo project from Module 3 of Scrimba's Frontend Career Path. The requirements of the project include:

• Following the design specfications (as indicated in the provided Figma file)
• Generate all conversions when the button is clicked
• Round numbers to 3 decimal places

Though a mobile design was not included in the design specfications I chose to beging by desinging the mobile version of the website first before designing the deskop version. I find this approach advantageous because HTML is already responsive on its own (without adding any CSS) and lets you limit the number of media queries needed to adjust the design to larger screens. This is a technique I learned from Kevin Powell's Conquering Responsive Web Design course. For a more detailed description of this technique, you can read about it in the 'My Process' section of the 'Visit Chiang Mai' project.

For this project, the minimalistic design lent itself easily to a mobile design. I decided to "shrink" down the original design so that it would fit within the dimensions of a smaller device while maintaining a legible font.

Once the mobile version was complete it was simply a matter of add a media query with a min-width of 550px to adjust the design for larger screensizes. In this design, it amounted to a couple of lines of code to adjust the font sizes to match the design specs.

Finally, after completing the design of the page itself it was time to add in the JavaScript to perform the unit conversions. This includes adding an event listener for the convert button which activates a function to convert the units and render the text on the page.

• HTML
• CSS
• JavaScript

A live version can be viewed at: https://ananfito.github.io/unit-converter.

Thank you for reading about this project. If you'd like to connect with me for mentoring, collaboration, or employment opportunities, you can do so via the following links:

• Email
• LinkedIn
• Portfolio
• Blog