Header Ads Widget

Temperature conversion using JavaScript

My codding spot December 10, 2022

 This post will describe you about how to make conversion of temperature using HTML CSS and JavaScript. Temperature conversion or converter is mini project for beginners. Minimum HTML CSS and JavaScript's skills are required for this project.

About temperature conversion 

Temperature conversion converts the temperature between Fahrenheit, Celsius and Kelvin scale to each other.

Temperature measurement can be done in units of degree. It is represented by following:

Fahrenheit is represented by °F.

Celsius is represented by °C.

Kelvin is represented by °K.

Formulas of temperature conversion 

  • Fahrenheit to Celsius 

         °C = (5/9) * (°F - 32)

  • Celsius to Fahrenheit 

         °F = °C * (9/5) + 32

  • Fahrenheit to Kelvin 

         °K = (°F - 32) * (5/9) + 273.15

  • Kelvin to Fahrenheit 

         °F = (°K - 273.15) * (9/5) + 32

  • Celsius to Kelvin 

         °K = °C + 273.15

  • Kelvin to Celsius 

         °C = °K - 273.15

Temperature conversion using HTML CSS and JavaScript
Temperature conversion 


Skills required:-

HTML input field, drop-down menu, button and div container.
CSS skills like position, margin, padding required for layout
JavaScript function and 'if else if' ladders for Temperature calculation.

Functionality of Temperature Conversion using JavaScript 

Temperature conversion mini project involved 6 conversions: Fahrenheit to Celsius , Celsius to Fahrenheit , Fahrenheit to Kelvin , Kelvin to Fahrenheit , Celsius to Kelvin and Kelvin to Celsius.

In this project, user have to enter a numeric value after that make selection from drop-down menu and click on convert button. 0 is sets as by default value in input field. If user not select conversion from drop-down than conversion is not made and alert message will be displayed.

Temperature Conversion Source code

 HTML

<!DOCTYPE html>
<html>
<head>
<title>Temperature Conversion</title>
<link rel="stylesheet" href="temp_convert.css" >
<script src="temp_convert.js"></script>
</head>
<body>
<div class="container">
<h1>Temperature Conversion</h1>
<div class="temperature">
<input type="number" name="no" id="temp" value="0" >
</div>
<div class="dropdn">
<label for="temperature">Choose Conversion</label>
<select id="tempconvert">
<option>Select</option>
<option id="1" value="ftoc">Fehrenheit to Celsius</option>
<option id="2" value="ctof">Celsius to Faherheit</option>
<option id="3" value="ktof">Kelvin to Faherheit</option>
<option id="4" value="ftok">Faherheit to Kelvin</option>
<option id="5" value="ctok">Celsius to Kelvin</option>
<option id="6" value="ktoc">Kelvin to Celsius</option>
</select>
</div>
<button type="button" id="res" onclick=convert()>Convert</button>
<h3 id="ans"></h3>
</div>
</body>
</html>

CSS 

/* CSS Document */
*
{
box-sizing:border-box;
font-family:"Times New Roman", Times, serif;
}
body
{
background-color:#fff0df;
}
.container
{
position:absolute;
top:50%;
left:50%;
transform:translate(-50%,-50%);
height:350px;
width:400px;
border:2px solid #000000;
box-sizing:border-box;
padding:20px;
background-color:#000119;
box-shadow:5px 5px 20px #000100;
}
h1
{
background-image:linear-gradient(45deg,#ff9c7c,#ffe57c);
color:#e3001a;
text-align:center;
border-radius:20px;
padding:3px;
}
.temperature
{
height:40px;
width:auto;
background-color:#ffffff;
border:3px outset #ffffff;
border-radius:10px;
}
#temp
{
position:relative;
top:50%;
left:50%;
transform:translate(-50%,-50%);
display:block;
height:30px;
width:auto;
border:none;
outline:none;
border-radius:20px;
text-align:center;
font-size:24px;
}
#temp:hover
{
background-color:#e3001a;
}
.dropdn
{
margin-top:20px;
height:50px;
width:auto;
background-color:#dedf88;
border:3px groove #dedf88;
border-radius:10px;
}
label
{
color:#194d7f;
padding:10px;
font-size:18px;
}
#tempconvert
{
padding:5px;
margin-left:10px;
font-size:16px;
}
#res
{
margin-top:20px;
width:50%;
height:40px;
background-color:#ffd833;
border:2px solid #e3001a;
font-size:20px;
color:#000119;
}
#res:hover
{
background-color:#149d4f;
color:#ffffff;
border-radius:10px;
}
h3
{
color:#dedfee;
}

Output of temperature conversion


Output of temperature conversion layout
Output of temperature conversion 


Javascript 


// JavaScript Document
function convert()
{
let val=document.getElementById("temp").value;
let selectval=document.getElementById("tempconvert");
let options=selectval.value;
if(options=="ftoc")
{
let convrt=(5/9)*(val-32);
document.getElementById("ans").innerHTML="Temprature conversion from °F to °C = "+convrt.toFixed(2)+"°C";
}
else if(options=="ctof")
{
let convrt=val*(9/5)+32;
document.getElementById("ans").innerHTML="Temprature conversion from °C to °F = "+convrt.toFixed(2)+"°F";
}
else if(options=="ktof")
{
let convrt=(val-273.15)*(9/5)+32;
document.getElementById("ans").innerHTML="Temprature conversion from °K to °F = "+convrt.toFixed(2)+"°F";
}
else if(options=="ftok")
{
let convrt=(val-32)*(5/9)+273.15;
document.getElementById("ans").innerHTML="Temprature conversion from °F to °K = "+convrt.toFixed(2)+"°K";
}
else if(options=="ctok")
{
let convrt=+val + +273.15;
document.getElementById("ans").innerHTML="Temprature conversion from °C to °K = "+convrt.toFixed(2)+"°K";
}
else if(options=="ktoc")
{
let convrt=val-273.15;
document.getElementById("ans").innerHTML="Temprature conversion from °K to °C = "+convrt.toFixed(2)+"°C";
}
else
{
document.getElementById("ans").innerHTML="Please select conversion of Temprature from drop-down list";
}
}

Final output of temperature conversion


Summary

This post covered conditional statements, use of function, onclick () event, fetching value from drop-down list.

Tags:
My codding spot

Posted by: My codding spot

Post a Comment

0 Comments