Temperature Converter
Summary:
If you are searching for HTML, CSS, and JavaScript temperature converting project, then this page will
teach you how to build a Temperature Converter with the help of JavaScript.
Complete guild-line to build a temperature
converter:
o
First, we'll create a folder named converter for HTML, CSS, and JS
files.
o
Second, we create an HTML file named temperature.html, and a CSS file named
tempStyle.css. After that we create another folder named JS in the main
folder converter. In this folder, we create a JavaScript file named tempScript.js.
Building HTML file:
- Now, we build the HTML structure. In that structure, we write the page title, we connect the CSS file to the HTML file using <link> tag, and we also connect the JS file to the HTML file using <script> tag.
<!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>Temperature Converter</title>
<link rel="stylesheet" href="tempStyle.css">
</head>
<body>
<script src="JS/tempScript.js"></script>
</body>
</html>
- Now, in the body tag, we first create a title for
the page in <h1> tag
- Then, In the <center> tag we create
a main <div> with id name container. In this <div> we
create 3 sub <div>. Frist <div> is for the first input box and the label. The second <div> is for the second input box and the label. Third <div> is for
selectors which help us to select the temperatures.
- The id name of the first sub <div> is
Temperature1 and the class name is box1
- In this div, we create a <label>
with id name L1 and we create an input box with the id name input1
and with the class name inputBox.
- Now, we create a <span> tag which is having = sign which indicates temperature = temperature.
- The id name of the second sub <div> is Temperature2.
Here we used the same class name for the first sub div and second sub div for CSS
work.
- In the second sub <div> we create a <label> with id name L2 and we create another input box with id name input2 and with class name inputBox These input boxes are used to get inputs from the user to convert one temperature value to another temperature value.
<!-- Title -->
<h1 style="text-align: center; color: black;">Temperature Converter</h1><br>
<center>
<!-- Creating main container -->
<div id="container">
<!-- input fields to get input from user -->
<div id="Temperature1" class="box1">
<label id="L1"></label><br><br>
<input type="number" class="inputBox" id="input1">
</div>
<span>=</span>
<div id="Temperature2" class="box1">
<label id="L2"></label><br><br>
<input type="number" class="inputBox" id="input2">
</div><br>
</center>
- Now, we give the id name as a selector
for the third sub <div>. In this <div> we create 2 more <div> for
<select> tag with the class name box2. Here, <select>
tag is used to select the items from the list for conversion.
<!-- Creating 2 selecter to choose options -->
<div id="selecter">
<div class="box2">
<select id="select1" style="margin-left: 5px; margin-bottom: 10px;">
<option value="Celsius">Celsius</option>
<option value="Fahrenheit">Fahrenheit</option>
<!-- <option value="Kelvin">Kelvin</option> -->
</select>
</div>
<div class="box2">
<select id="select2" style="margin-left: 5px; margin-bottom: 10px;">
<option value="Fahrenheit" >Fahrenheit</option>
<option value="Celsius">Celsius</option>
<!-- <option value="Kelvin">Kelvin</option> -->
</select>
</div>
</div>
- Here we completed our HTML file. Now, when we
run this file on browser we got like this type of interface.
o
Styling the HTML using CSS:
- Now, we style the HTML with the help of CSS
for a better look.
- First, we give margin and padding for the whole document.
*{
margin: 0;
padding: 0;
box-sizing: border-box;
}
- Secondly, we style the whole body with the properties background-color, padding-top, and font-family. I used the Kanit named google font for a good font style.
- use this font, click on Kanit word. Then select the regular 400 font family, then choose the @import radio button. After selection, you get a <style> tag. Now, in the <style> tag you will get a link, copy that link, and past it in the first line of the CSS file. After that, copy the font-family property and past it where you want to put it.
- Now, we style the container part with the properties, width, height, background, text-align, font-family, font-weight, padding. border-radius and box-shadow.
#container{
width: 500px;
height: 250px;
background:#f9f7f6;
text-align: center;
font-family: 'Kanit', sans-serif;
font-weight: bold;
padding: 50px;
border-radius: 15px;
box-shadow: -11px 11px 21px #c5c3c2,
11px -11px 21px #ffffff;
}
- Now, we decorate the box1 named
sub <div> tags. Properties are display, font-size, color, padding,
margin, margin-left, margin-top, background, and last one border-radius.
.box1{
display: inline-block;
font-size: 18px;
color: black;
padding: 5px;
margin: 15px;
margin-left: 60px;
margin-top: 5px;
background:#f9f7f6;
border-radius: 20px;
}
- Styling label using the following
properties:
label{
margin: -10px;
font-size: medium;
position: relative;
right: 3px;
}
- Styling inputBox by the following
properties:
.inputBox{
padding: 8px;
border-radius: 5px;
display: inline-block;
width: 120px;
font-size: 16px;
font-weight: bold;
box-shadow: -11px 11px 21px #c5c3c2,
11px -11px 21px #ffffff;
}
- Now, we add a pseudo-class to the inputBox
that is a focus. This focus class is used when we focus on input
box some changes will happen.
.inputBox:focus{
outline: 2.5px solid black;
}
- Now, we style the <span> tag:
span{
font-size: 20px;
position: relative;
left: 20px;
}
- Now, we style box2, selector, and select using
their suitable properties.
.box2{
color: aliceblue;
padding: 5px;
margin-top: 5px;
display: inline-block;
margin-left: -5px;
margin-right: 107.5px/*72.5*/;
}
#selecter{
width: 500px;
text-align: center;
display: inline-block;
}
select{
width: 100px;
border-radius: 5px;
background:#f9f7f6;
color: black;
font-family: 'Kanit', sans-serif;
font-weight: bold;
padding: 5px;
margin-top: 15px;
cursor: pointer;
}
- Now, again we add a pseudo-class to <select>
that is a focus. In this focus pseudo-class class used when we focus on the input box
some changes will happen.
select:focus{
outline: 2.5px solid black;
}
- Here we completed our CSS file. When we refresh
On the page, we can see the following type of interface which is completely different
from the first interface.
Building JS file:
- Finally, we reached the last part of the
temperature converter which is JavaScript. JavaScript is the main file of Temperature
Converter. Without the help of the JS file, we cannot convert from
temperature unit to temperature unit.
- Now, let’s start the interesting part of the
program.
- To convert the temperature units, we need to
select some import elements with the help of the getElementById() function. We
select the following ids.
input1 and input2 – These are the id of
element <input> which helps to get input from the user.
select1 and select2 – These are the id of
element <select> which helps to select temperatures.
L1 and L2 – These are the id of an element
<label> which helps to set the label.
- Now, we create some variables. In these
variables, we store the selected elements. For Example, see the following code,
// Selecting Elements
let input1 = document.getElementById('input1');
let input2 = document.getElementById('input2');
let select1 = document.getElementById('select1');
let select2 = document.getElementById('select2');
let label1 = document.getElementById('L1');
let label2 = document.getElementById('L2');
let temp1;
let temp2;- After the selection, we create 2 variables named temp1
and temp2. Which are used to store the values of select1
and select2.
- Now, in label1 we store the selected value of
select1 (First Selector). After that in label2, we store the selected value of
select2 (Second Selector) and display these labels on the screen with the help of
innerHTML property.
- Now, we add an event on select1
with the help of the addEventListener() function. The event name is
input. The purpose of adding this event is whenever a user changes their selection
according to that selection, the label1 value will be changed. Like select1, we add
the same event on select2 to perform the same type of task.
label1.innerHTML = select1.value;
label2.innerHTML = select2.value;
select1.addEventListener('input', function(){
temp1 = select1.value;
label1.innerHTML = temp1;
});
select2.addEventListener('input', function(){
temp2 = select2.value;
label2.innerHTML = temp2;
});
- Now, we are going to create a function called
celToFah(). Using this function, we can convert the temperature from
Celsius to Fahrenheit. In this function, we are giving the Celsius default value as a
0 and Fahrenheit default value as a 32. And we are adding again an
input event using the addEventListener() function. Because
whenever an input1 value changes, the Celsius to Fahrenheit formula
converts the Celsius and changes the value of input2 in the Fahrenheit value.
Formula: Fahrenheit = (Celsius * 9/5) + 32
- Like input1 we add the same event on input2 also.
But this time we convert Fahrenheit to Celsius value. Whenever the value of input2
was change the Fahrenheit to Celsius formula converts the Fahrenheit and
changes the value of input1 into Celsius.
Formula: Celsius
= (Fahrenheit - 32) * 5/9
// function to convert Celsius to Fahrenheit OR Fahrenheit to Celsius
function celToFah(){
select1.value = "Celsius";
select2.value = "Fahrenheit";
label1.innerHTML = select1.value;
label2.innerHTML = select2.value;
input1.value = "0";
input2.value = "32";
input1.addEventListener('input', function(){
let Celsius = this.value;
let Fahrenheit = (Celsius * 9/5) + 32;
if(!Number.isInteger(Fahrenheit)){
Fahrenheit = Fahrenheit.toFixed(2);
}
input2.value = Fahrenheit;
});
input2.addEventListener('input', function(){
let Fahrenheit = this.value;
let Celsius = (Fahrenheit - 32) * 5/9;
if(!Number.isInteger(Celsius)){
Celsius = Celsius.toFixed(2);
}
input1.value = Celsius;
});
}
celToFah(); // calling a function
- Now, we again add an input event on select1 and select2. So according to the select1 value and select2 value, we convert the temperatures by their formulas. For example, if the select1 value is Celsius and the select2 value is Fahrenheit then we call the created function celToFah(). If the select1 value is Fahrenheit and select2 values are Celsius then we use the formula Celsius = (Fahrenheit - 32) * 5/9.
- If select1 value in Fahrenheit and select2 value is Celsius then we use the formula, Kelvin, = (Fahrenheit - 32) * 5/9.
select1, select2.addEventListener('input', function(){
if (select1.value == "Celsius" && select2.value == "Fahrenheit") {
input1.value = "0";
input2.value = "32";
celToFah();
}
// If condition to convert Fahrenheit to Celsius OR Celsius to Fahrenheit
if (select1.value == "Fahrenheit" && select2.value == "Celsius") {
input1.value = "0";
input2.value = "-17.77";
input1.addEventListener('input', function(){
let Fahrenheit = this.value;
let Celsius = (Fahrenheit - 32) * 5/9;
if(!Number.isInteger(Celsius)){
Celsius = Celsius.toFixed(2);
}
input2.value = Celsius;
});
input2.addEventListener('input', function(){
let Celsius = this.value;
let Fahrenheit = (Celsius * 9/5) + 32;
if(!Number.isInteger(Fahrenheit)){
Fahrenheit = Fahrenheit.toFixed(2);
}
input1.value = Fahrenheit;
});
}
});
Now, here we successfully build our Temperature Converter program.
I hope you are understanding this program very well. Full source code is given below.
HTML Code:
<!-- Creating Temperature Converter with HTML, CSS and JAVASCRIPT -->
<!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>Temperature Converter</title>
<link rel="stylesheet" href="style.css"/>
</head>
<body>
<!-- Title -->
<h1 style="text-align: center; color: black;">Temperature Converter</h1><br>
<center>
<!-- Creating main container -->
<div id="container">
<!-- input fields to get input from user -->
<div id="Temperature1" class="box1">
<label id="L1"></label><br><br>
<input type="number" class="inputBox" id="input1">
</div>
<span>=</span>
<div id="Temperature2" class="box1">
<label id="L2"></label><br><br>
<input type="number" class="inputBox" id="input2">
</div><br>
<!-- Creating 2 selecter to choose options -->
<div id="selecter">
<div class="box2">
<select id="select1" style="margin-left: 5px; margin-bottom: 10px;">
<option value="Celsius">Celsius</option>
<option value="Fahrenheit">Fahrenheit</option>
</select>
</div>
<div class="box2">
<select id="select2" style="margin-left: 5px; margin-bottom: 10px;">
<option value="Fahrenheit" >Fahrenheit</option>
<option value="Celsius">Celsius</option>
</select>
</div>
</div>
</div>
</center>
<script src="js/script.js"></script>
</body>
</html>
CSS Code:
@import url('https://fonts.googleapis.com/css2?family=Kanit&display=swap');
*{
margin: 0;
padding: 0;
box-sizing: border-box;
}
body{
background-color: #f9f7f6;
padding-top: 50px;
font-family: 'Kanit', sans-serif;
}
#container{
width: 500px;
height: 250px;
background:#f9f7f6;
text-align: center;
font-family: 'Kanit', sans-serif;
font-weight: bold;
padding: 50px;
border-radius: 15px;
box-shadow: -11px 11px 21px #c5c3c2,
11px -11px 21px #ffffff;
}
.box1{
display: inline-block;
font-size: 18px;
color: black;
padding: 5px;
margin: 15px;
margin-left: 60px;
margin-top: 5px;
background:#f9f7f6;
border-radius: 20px;
}
label{
margin: -10px;
font-size: medium;
position: relative;
right: 3px;
}
#Temperature1{
margin-left: 10px;
}
.inputBox{
padding: 8px;
border-radius: 5px;
display: inline-block;
width: 120px;
font-size: 16px;
font-weight: bold;
box-shadow: -11px 11px 21px #c5c3c2,
11px -11px 21px #ffffff;
}
.inputBox:focus{
outline: 2.5px solid black;
}
span{
font-size: 20px;
position: relative;
left: 20px;
}
.box2{
color: aliceblue;
padding: 5px;
margin-top: 5px;
display: inline-block;
margin-left: -5px;
margin-right: 107.5px/*72.5*/;
}
#selecter{
width: 500px;
text-align: center;
display: inline-block;
}
select{
width: 100px;
border-radius: 5px;
background:#f9f7f6;
color: black;
font-family: 'Kanit', sans-serif;
font-weight: bold;
padding: 5px;
margin-top: 15px;
cursor: pointer;
}
select:focus{
outline: 2.5px solid black;
}
JS Code:
// Selecting Elements
let input1 = document.getElementById('input1');
let input2 = document.getElementById('input2');
let select1 = document.getElementById('select1');
let select2 = document.getElementById('select2');
let label1 = document.getElementById('L1');
let label2 = document.getElementById('L2');
let temp1;
let temp2;
label1.innerHTML = select1.value;
label2.innerHTML = select2.value;
select1.addEventListener('input', function(){
temp1 = select1.value;
label1.innerHTML = temp1;
});
select2.addEventListener('input', function(){
temp2 = select2.value;
label2.innerHTML = temp2;
});
// function to convert Celsius to Fahrenheit OR Fahrenheit to Celsius
function celToFah(){
select1.value = "Celsius";
select2.value = "Fahrenheit";
label1.innerHTML = select1.value;
label2.innerHTML = select2.value;
input1.value = "0";
input2.value = "32";
input1.addEventListener('input', function(){
let Celsius = this.value;
let Fahrenheit = (Celsius * 9/5) + 32;
if(!Number.isInteger(Fahrenheit)){
Fahrenheit = Fahrenheit.toFixed(2);
}
input2.value = Fahrenheit;
});
input2.addEventListener('input', function(){
let Fahrenheit = this.value;
let Celsius = (Fahrenheit - 32) * 5/9;
if(!Number.isInteger(Celsius)){
Celsius = Celsius.toFixed(2);
}
input1.value = Celsius;
});
}
celToFah(); //Calling the function
select1, select2.addEventListener('input', function(){
if (select1.value == "Celsius" && select2.value == "Fahrenheit") {
input1.value = "0";
input2.value = "32";
celToFah();
}
// If condition to convert Fahrenheit to Celsius OR Celsius to Fahrenheit
if (select1.value == "Fahrenheit" && select2.value == "Celsius") {
input1.value = "0";
input2.value = "-17.77";
input1.addEventListener('input', function(){
let Fahrenheit = this.value;
let Celsius = (Fahrenheit - 32) * 5/9;
if(!Number.isInteger(Celsius)){
Celsius = Celsius.toFixed(2);
}
input2.value = Celsius;
});
input2.addEventListener('input', function(){
let Celsius = this.value;
let Fahrenheit = (Celsius * 9/5) + 32;
if(!Number.isInteger(Fahrenheit)){
Fahrenheit = Fahrenheit.toFixed(2);
}
input1.value = Fahrenheit;
});
}
});
Output:
Post a Comment
You are welcome to share your ideas with me in the comments!