Hello Coders, In this article we are going to learn how to create a temperature converter using HTML CSS and JavaScript that converts Celsius to Fahrenheit and Fahrenheit to Celsius.
This is going to be a very simple and easy JavaScript Project.
How do I Convert Celsius to Fahrenheit in JavaScript?
We wont be creating our own formula, lol. We will be using the existing formula to convert Celsius to Fahrenheit and reverse Fahrenheit to Celsius.
I have provided both step by step video tutorial as well as complete source code of this project to help you build this project. You can also download the complete source code of this project by clicking on the download button at the bottom of this article.
Temperature Converter with HTML CSS JavaScript | Video Tutorial
Follow the step by step video tutorial if you are complete beginner to Web development. And also feel free to check out my other JavaScript Projects on our YouTube Channel.
Temperature Converter using HTML CSS and JavaScript | Source Code
Below I have provided HTML CSS and JavaScript Source code of this project. Copy the below codes and you can also download complete source code at the bottom of this article by clicking on the download button.
How do I create Celsius to Fahrenheit Converter in HTML? HTML Source Code
Create an index.html file and copy the below HTML codes.
<!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>Celsius to Fahrenheit</title>
<link rel="stylesheet" href="styles.css" />
</head>
<body>
<div class="container">
<div class="cf">
<label for="celsius">Celsius</label>
<input type="number" id="celsius" />
</div>
<div class="cf">
<label for="celsius">Fahrenheit</label>
<input type="number" id="fahrenheit" />
</div>
</div>
<script src="script.js"></script>
</body>
</html>
How do I design Celsius to Fahrenheit Temperature Converter in CSS? CSS Source Code
Create an styles.css file and copy the below CSS Codes.
@import url('https://fonts.googleapis.com/css2?family=Roboto+Mono:wght@500&display=swap');
* {
margin: 0;
padding: 0;
box-sizing: border-box;
font-family: 'Roboto Mono';
font-size: 18px;
}
body {
height: 100vh;
background-color: #5e8b7e;
display: flex;
align-items: center;
justify-content: center;
}
.container {
width: 450px;
background-color: #fff;
padding: 70px 40px;
box-shadow: 0 20px 25px rgba(0, 0, 0, 0.25);
border-radius: 8px;
display: flex;
justify-content: space-between;
}
.cf {
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: #5e8b7e;
}
How do I build Celsius to Fahrenheit Converter & Fahrenheit to Celsius Temperature Converter in JavaScript | JavaScript Source Code
Create an script.js file and copy the below JavaScript Codes.
let celsius = document.getElementById('celsius');
let fahrenheit = document.getElementById('fahrenheit');
celsius.oninput = () => {
let output = (parseFloat(celsius.value) * 9) / 5 + 32;
fahrenheit.value = parseFloat(output.toFixed(2));
};
fahrenheit.oninput = () => {
let output = ((parseFloat(fahrenheit.value) - 32) * 5) / 9;
celsius.value = parseFloat(output.toFixed(2));
};
This is what you will have after completing this Project.
