Related: input valuesBest match
Weight Converter
Read form values and use them in the project logic.
More challenging
Build a weight converterTemperature Converter
Build a temperature converter with HTML, CSS, and JavaScript while practicing DOM selection and input values.
Beginner20–30 minutesHTML5CSS3JavaScript
You'll practice
DOM SelectionReading Input ValuesNumber Formatting
01 — What you'll build
Temperature Converter
Build a temperature converter using HTML, CSS, and JavaScript, then connect the interface to the logic that makes it work. You’ll learn how to convert a value and keep the result easy to understand while getting hands-on practice with DOM selection, input values, and number formatting.
02 — Included
- Click-based interactions
- Temperature Converter interface
- Responsive HTML and CSS layout
- Complete source code and live demo
03 — You'll practice
- Select HTML elements from the DOM
- Read and update form values
- Format numbers with toFixed
- Control behavior with conditions
- Perform calculations with JavaScript
Recommended knowledge: Basic HTML and CSS, JavaScript variables and number operations, DOM selection and form events.
Complete project files
Build It from the Source Code
This project runs directly in the browser with HTML, CSS, and JavaScript.
- 1Create three files
- 2Copy the code
- 3Run
index.html
Before you run it
- Keep all project files together in the same folder.
Project structure
temperature-converter/
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Temperature Converter</title>
<link rel="stylesheet" href="style.css" />
</head>
<body>
<div class="container">
<h1 class="heading">Temperature Converter</h1>
<div class="temp-container">
<label for="celsius">Celsius:</label>
<input
onchange="computeTemp(event)"
type="number"
name="celsius"
id="celsius"
placeholder="Enter Temperature"
class="input"
/>
</div>
<div class="temp-container">
<label for="fahrenheit">Fahrenheit:</label>
<input
onchange="computeTemp(event)"
type="number"
name="fahrenheit"
id="fahrenheit"
placeholder="Enter Temperature"
class="input"
/>
</div>
<div class="temp-container">
<label for="kelvin">Kelvin:</label>
<input
onchange="computeTemp(event)"
type="number"
name="kelvin"
id="kelvin"
placeholder="Enter Temperature"
class="input"
/>
</div>
</div>
<script src="index.js"></script>
</body>
</html>
JS Related Projects
Practice with Related Projects
Practice input values, number formatting, and javaScript calculations with these related projects.
