In this article you will know how to create Temperature Converter using HTML, CSS and JavaScript. If you want to improve your knowledge of JavaScript then this JavaScript Temperature Converter is a perfect project for you.
Here, we will explore how to create a simple yet effective temperature converter using HTML for the structure, CSS for styling, and JavaScript for the functionality. This project is perfect for beginners to gain hands-on experience with these fundamental web technologies.
Temperature Converter in HTML CSS & JavaScript
A Temperature Converter using JavaScript is a web-based application that allows users to convert temperatures between Celsius and Fahrenheit units interactively. It typically consists of an HTML structure for the user interface, CSS for styling, and JavaScript for handling the conversion logic.
See the Pen Untitled by Growthpanda (@Growthpanda) on CodePen.
As you can see above here I have created two input boxes within one box. which can convert temperature from celsius to fahrenheit.
The JavaScript used for this project (Temperature Converter using HTML CSS and JavaScript) is very simple, hopefully you will not have any difficulty in understanding it.
Step 1: Temperature Converter HTML Code
Let’s start by setting up the HTML structure. Create a new HTML file and add the following code. By these codes I will create all the structures of this Temperature Converter.
<div class="wrapper">
<div class="container">
<label for="celsius">Celsius</label>
<input type="number" id="celsius" oninput= "celToFar()">
</div>
<div class="container">
<label for="fahrenheit">Fahrenheit</label>
<input type="number" id="fahrenheit" oninput = "farToCel()">
</div>
</div>Step 2: Design the Temperature Converter
Let’s make the converter visually appealing by adding some styles. Create a new file called style.css and add the following code.
This CSS code styles the converter container, input fields, and the button, giving the application a clean and user-friendly appearance.
*,
*:before,
*:after{
padding: 0;
margin: 0;
box-sizing: border-box;
font-family: "Roboto Mono", monospace;
font-size: 18px;
}
body{
background-color: #3164ff;
}
.wrapper{
width: 450px;
background-color: #ffffff;
padding: 70px 40px;
position: absolute;
transform: translate(-50%,-50%);
left: 50%;
top: 50%;
box-shadow: 0 20px 25px rgba(0,0,0,0.25);
border-radius: 8px;
display: flex;
justify-content: space-between;
}
.container{
width: 45%;
}
input{
width: 100%;
height: 50px;
border-radius: 5px;
border: 2px solid #d2d2d2;
outline: none;
margin-top: 8px;
padding: 0 10px;
}
input:focus{
border-color: #3164ff;
}Step 3: Activate the Temperature Converter
Now, let’s implement the temperature conversion logic. Create a new file called script.js and add the following JavaScript code. Simple JavaScript is used to activate this Simple Temperature Converter. I have explained the complete code here with comments.
// Get references to the HTML input elements with IDs "celsius" and "fahrenheit"
let celsius = document.getElementById("celsius");
let fahrenheit = document.getElementById("fahrenheit");
// Function to convert Celsius to Fahrenheit
function celToFar(){
// Calculate the equivalent temperature in Fahrenheit
let output = (parseFloat(celsius.value) * 9/5) + 32;
// Update the Fahrenheit input field with the converted value, rounded to two decimal places
fahrenheit.value = parseFloat(output.toFixed(2));
}
// Function to convert Fahrenheit to Celsius
function farToCel(){
// Calculate the equivalent temperature in Celsius
let output = (parseFloat(fahrenheit.value) - 32) * 5/9;
// Update the Celsius input field with the converted value, rounded to two decimal places
celsius.value = parseFloat(output.toFixed(2));
// Output the intermediate result to the console for debugging purposes
console.log(output);
}
Congratulations! You’ve just created a simple temperature converter using HTML, CSS, and JavaScript. This project serves as a great starting point for learning and experimenting with web development technologies.
Be sure to comment how you like this simple javascript project. I have shared many more designs like this project (temperature converter in javascript code) you must have a look.
I can provide you with a simple example of a temperature converter website using HTML, CSS, and JavaScript. In this example, users can input a temperature in either Celsius or Fahrenheit, and the website will convert it to the other unit dynamically.
<!DOCTYPE html>
<html lang=”en”>
<head>
<meta charset=”UTF-8″>
<meta name=”viewport” content=”width=device-width, initial-scale=1.0″>
<title>Temperature Converter</title>
<style>
body {
font-family: Arial, sans-serif;
text-align: center;
margin: 50px;
}
#converter {
max-width: 400px;
margin: auto;
padding: 20px;
border: 1px solid #ccc;
border-radius: 8px;
box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
}
input {
width: 100%;
padding: 10px;
margin: 10px 0;
box-sizing: border-box;
}
button {
width: 100%;
padding: 10px;
background-color: #4CAF50;
color: white;
border: none;
border-radius: 4px;
cursor: pointer;
}
button:hover {
background-color: #45a049;
}
#result {
margin-top: 20px;
font-weight: bold;
}
</style>
</head>
<body>
<div id=”converter”>
<h2>Temperature Converter</h2>
<label for=”tempInput”>Enter Temperature:</label>
<input type=”number” id=”tempInput”>
<label for=”unit”>Select Unit:</label>
<select id=”unit”>
<option value=”celsius”>Celsius</option>
<option value=”fahrenheit”>Fahrenheit</option>
</select>
<button onclick=”convertTemperature()”>Convert</button>
<div id=”result”></div>
</div>
<script>
function convertTemperature() {
var tempInput = document.getElementById(“tempInput”).value;
var unit = document.getElementById(“unit”).value;
var resultElement = document.getElementById(“result”);
if (unit === “celsius”) {
var result = (tempInput * 9/5) + 32;
resultElement.innerHTML = tempInput + ” Celsius is equal to ” + result.toFixed(2) + ” Fahrenheit”;
} else {
var result = (tempInput – 32) * 5/9;
resultElement.innerHTML = tempInput + ” Fahrenheit is equal to ” + result.toFixed(2) + ” Celsius”;
}
}
</script>
</body>
</html>
Here’s a simple temperature converter implemented in JavaScript. You can embed this script in an HTML file or use it in conjunction with your existing HTML structure.
<!DOCTYPE html>
<html lang=”en”>
<head>
<meta charset=”UTF-8″>
<meta name=”viewport” content=”width=device-width, initial-scale=1.0″>
<title>Temperature Converter</title>
<style>
body {
font-family: Arial, sans-serif;
text-align: center;
margin: 50px;
}
#converter {
max-width: 400px;
margin: auto;
padding: 20px;
border: 1px solid #ccc;
border-radius: 8px;
box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
}
input {
width: 100%;
padding: 10px;
margin: 10px 0;
box-sizing: border-box;
}
button {
width: 100%;
padding: 10px;
background-color: #4CAF50;
color: white;
border: none;
border-radius: 4px;
cursor: pointer;
}
button:hover {
background-color: #45a049;
}
#result {
margin-top: 20px;
font-weight: bold;
}
</style>
</head>
<body>
<div id=”converter”>
<h2>Temperature Converter</h2>
<label for=”tempInput”>Enter Temperature:</label>
<input type=”number” id=”tempInput”>
<label for=”unit”>Select Unit:</label>
<select id=”unit”>
<option value=”celsius”>Celsius</option>
<option value=”fahrenheit”>Fahrenheit</option>
</select>
<button onclick=”convertTemperature()”>Convert</button>
<div id=”result”></div>
</div>
<script>
function convertTemperature() {
var tempInput = document.getElementById(“tempInput”).value;
var unit = document.getElementById(“unit”).value;
var resultElement = document.getElementById(“result”);
if (unit === “celsius”) {
var result = (tempInput * 9/5) + 32;
resultElement.innerHTML = tempInput + ” Celsius is equal to ” + result.toFixed(2) + ” Fahrenheit”;
} else {
var result = (tempInput – 32) * 5/9;
resultElement.innerHTML = tempInput + ” Fahrenheit is equal to ” + result.toFixed(2) + ” Celsius”;
}
}
</script>
</body>
</html>
This script uses HTML for the structure, CSS for basic styling, and JavaScript for the temperature conversion logic. It should be a simple and functional temperature converter for your needs.