 |
| Temperature converter using javascript |
In this Article, we will learn how to create Temperature converter using javascript with source code. Creating Temperature converter using javascript becomes simple with the given tutorial, which provides a simple step-by-step process to design Temperature converter using html, css and javascriptt. So, let's go and follow the given steps carefully.
Steps to create Temperature converter using javascript
Here are the Steps to create Temperature converter using javascript as given below :-
1) Creating File on VS CODE :
Open VS Code, Create a new folder to add html, css and js file.
2) Adding HTML :
Add the .html file in the project folder and give it the name as - index.html.
3) Copy and Paste HTML code :
copy the following code and paste it in index.html file.
<!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">
<title>HTML</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<form>
<h1>Temperature converter : </h1>
<input type="number" id="text" value="0"><br>
<input type="radio" id="tofahrenheit" name="unit">
<label for="tofahrenheit">Celsius to Fahrenheit</label><br>
<input type="radio" id="toCelsius" name="unit">
<label for="toCelsius">Fahrenheit to Celsius</label><br>
<button onclick="convert()" type="button">Submit</button>
<p id="result">Select a unit</p>
</form>
<script src="main.js"></script>
</body>
</html>
4) Adding CSS :
Add the .css file in the project folder and give it the name as - style.css.
5) Copy and Paste CSS code :
copy the following code and paste it in style.css file.
body {
background-color:black;
}
form{
height:320px;
width:250px;
border-radius:15px;
text-align: center;
background-color: white;
border:0.3px solid black;
box-shadow:2px 2px 2px 1px grey;
padding:10px;
margin:50px auto;
}
h1{
font-size:28px;
color: royalblue;
font-family: sans-serif;
}
#text{
height:32px;
width:62px;
text-align:center;
font-family: sans-serif;
font-weight:bold;
border:2px solid grey;
border-radius: 10px;
margin-bottom:18px;
}
label{
font-family: sans-serif;
font-weight:bold;
color:red;
margin:5px;
}
#toCelsius, #tofohrenheit{
font-size:10px;
margin:5px;
}
button{
color:white;
background-color: mediumslateblue;
margin-top:20px;
margin-bottom: 8px;
padding:10px;
font-size:14px;
border:1px solid white;
border-radius:10px;
transition: background-color 0.25s;
cursor:pointer;
}
button:hover{
background-color: royalblue;
}
p{
font-weight:bold;
font-family: sans-serif
}
6) Adding Javascript :
Add the .js file in the project folder and give it the name as - script.js.
7) Copy and Paste JS code :
copy the following code and paste it in script.js file.
const text = document.getElementById("text");
const tofahrenheit = document.getElementById("tofahrenheit");
const toCelsius = document.getElementById("toCelsius");
const result = document.getElementById("result");
let temp;
function convert(){
if(tofahrenheit.checked){
temp = Number(text.value);
temp = temp * 9 / 5 + 32;
result.textContent = temp.toFixed(1) + "°F";
}
else if (toCelsius.checked) {
temp = Number(text.value);
temp = (temp - 32) * (5/9) ;
result.textContent = temp.toFixed(1) + "°C";
}
else{
result.textContent = "Please a select a unit";
}
}
8) Check the Output :
After adding source code to the files, check the output of the project.
Here is the output of Temperature converter using javascript :
About the project -
In this code, we added a box in which temperature converter functionality has added with javascript. we've added a functionality to convert the fahrenheit to celsius and celsius to fahrenheit with javascript. It shows the output after providing input and selecting the temperature.
Also see this -
Hope this tutorial will help you to create Temperature converter using javascript easily with source code. if you have any confusion or query then you can contact us on our coding community.
Checkout our website for more information and join our coding community on telegram to get more knowledge about coding.
Tags:
projects