Article Categories
- All Categories
-
Data Structure
-
Networking
-
RDBMS
-
Operating System
-
Java
-
MS Excel
-
iOS
-
HTML
-
CSS
-
Android
-
Python
-
C Programming
-
C++
-
C#
-
MongoDB
-
MySQL
-
Javascript
-
PHP
-
Economics & Finance
Selected Reading
How to create a temperature converter with HTML and JavaScript?
To create a temperature converter with HTML and JavaScript, you need to combine form elements with JavaScript functions to perform real-time temperature conversions.
Complete Temperature Converter Example
<!DOCTYPE html>
<html>
<head>
<style>
body{
font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
max-width: 600px;
margin: 50px auto;
padding: 20px;
}
.converter-container {
background: #f8f9fa;
border-radius: 10px;
padding: 30px;
box-shadow: 0 2px 10px rgba(0,0,0,0.1);
}
input, span {
font-size: 18px;
padding: 8px;
}
input {
border: 2px solid #ddd;
border-radius: 5px;
width: 150px;
}
.result {
background: #e8f5e8;
padding: 15px;
border-radius: 5px;
margin-top: 15px;
}
</style>
</head>
<body>
<div class="converter-container">
<h1>Temperature Converter</h1>
<h3>Enter temperature to convert between Celsius and Fahrenheit</h3>
<p>
<label>Celsius: </label>
<input id="celsius" type="number" placeholder="Enter Celsius"
oninput="convertFromCelsius(this.value)" onchange="convertFromCelsius(this.value)">
</p>
<p>
<label>Fahrenheit: </label>
<input id="fahrenheit" type="number" placeholder="Enter Fahrenheit"
oninput="convertFromFahrenheit(this.value)" onchange="convertFromFahrenheit(this.value)">
</p>
<div class="result">
<p>Result: <span id="result">Enter a temperature to see conversion</span></p>
</div>
</div>
<script>
function convertFromCelsius(celsius) {
if (celsius === '') {
document.getElementById('fahrenheit').value = '';
document.getElementById('result').innerHTML = 'Enter a temperature to see conversion';
return;
}
const fahrenheit = (celsius * 9/5) + 32;
document.getElementById('fahrenheit').value = fahrenheit.toFixed(1);
document.getElementById('result').innerHTML = `${celsius}°C = ${fahrenheit.toFixed(1)}°F`;
}
function convertFromFahrenheit(fahrenheit) {
if (fahrenheit === '') {
document.getElementById('celsius').value = '';
document.getElementById('result').innerHTML = 'Enter a temperature to see conversion';
return;
}
const celsius = (fahrenheit - 32) * 5/9;
document.getElementById('celsius').value = celsius.toFixed(1);
document.getElementById('result').innerHTML = `${fahrenheit}°F = ${celsius.toFixed(1)}°C`;
}
</script>
</body>
</html>
How the Conversion Works
The temperature converter uses two mathematical formulas:
- Celsius to Fahrenheit: F = (C × 9/5) + 32
- Fahrenheit to Celsius: C = (F - 32) × 5/9
Key Features
- Bi-directional conversion: Convert from Celsius to Fahrenheit or vice versa
-
Real-time updates: Results update as you type using
oninputevent - Input validation: Handles empty inputs gracefully
-
Formatted results: Uses
toFixed(1)for one decimal place precision
JavaScript Functions Explained
The convertFromCelsius() function takes the Celsius input, applies the conversion formula, and updates both the Fahrenheit input field and result display. Similarly, convertFromFahrenheit() handles the reverse conversion.
// Basic conversion functions
function celsiusToFahrenheit(celsius) {
return (celsius * 9/5) + 32;
}
function fahrenheitToCelsius(fahrenheit) {
return (fahrenheit - 32) * 5/9;
}
// Test the functions
console.log("0°C =", celsiusToFahrenheit(0), "°F");
console.log("32°F =", fahrenheitToCelsius(32), "°C");
console.log("100°C =", celsiusToFahrenheit(100), "°F");
0°C = 32 °F 32°F = 0 °C 100°C = 212 °F
Conclusion
This temperature converter demonstrates how HTML forms and JavaScript event handlers work together. The key is using mathematical formulas with proper event handling to create an interactive, user-friendly conversion tool.
Updated on: 2026-03-15T23:18:59+05:30
840 Views
Advertisements