Temperature converter website

user profile photouser profile photouser profile photo864 developers have joined this project.

What you will practice

You'll practice using inputs to interact with users and basic mathematical calculations. These skills serve as the basis of all websites with user interaction.

Introduction

You'll create a simple app to convert temperatures from Celsius to Fahrenheit, and vice-versa. This project should be implemented as a web page. See here for the mobile app version of this project.

Requirements

The user will input a temperature in either Fahrenheit or Celsius and press a "convert" button. The converted temperature will then be displayed with the correct unit.

Your UI should include four main elements:

  • Input field for the user to type in their temperature - don't forget to validate that the input is a number!
  • Dropdown menu or radio button for the user to choose if they are inputting in Celsius or Fahrenheit
  • "Convert" button to trigger the temperature conversion
  • Display area for the final converted temperature and unit

For an extra challenge: You can add in a third conversion option to convert from and to Kelvin as well.

The following image shows one way to implement the UI. Feel free to interpret the requirements however you'd like!
Temperature converter website project demo

Suggested Implementation

This project can be implemented as a webpage using any front-end stack (e.g. JavaScript, React, Angular, Vue.js).

Interested in this project?

Shorten your learning curve with on-demand programming help

The awesome set of verified mentors will provide guidance and mentoring help when you are stuck.

Suresh Atta

  • Post request free
  • First 15 mins free
Shorten your learning curve with on-demand programming help

Browse more projects

More coming soon...