Temperature converter website

934 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).

References

Hit a programming wall?
Get help from our mentors

Post request free
First 15 mins free

Suggested languages and frameworks

HTML/CSS Angular React JavaScript Vue.js

Difficulty

easy

Contributed by

Joyce Lee

Product Manager @ Codementor

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

Other recommended projects

easy

Weather forecast website

Make a web app for users to see the current weather and the weather forecast for the next 7 days.

JavaScriptReactHTML/CSS

medium

Joke telling bot web app

Whether it's smartphones, cars, or speakers, voice assistants are becoming more and more integral to our everyday lives. Not only so, voice assistants are gaining traction in companies to help streamline operations like Customer Service. In this project, you'll build a full-fledged Joke telling robot web app using Web Speech APIs, which can be applied to both web apps and mobile apps.

JavaScriptReactAngularVue.js

easy

Alpaca image generator website

At DevProjects, we love alpacas! It's our mascot, and we'd love for you to have your own alpaca profile photo. With that said, this project is not just about alpacas. Allowing users to generate and download avatars are common in many interactive websites. In this project, you'll learn how to create an image generator website that allows users to generate, combine, and download images. This project should take you approximately 8 hours to complete.

JavaScriptReactHTML/CSSAngular