Temperature Converter using HTML, CSS, and JavaScript
Hello and welcome to today’s CodewithRandom Project tutorial. We’ll learn how to make a Temperature Converter Website Using HTML, CSS, and JavaScript that converts a location’s temperature from Celsius to Fahrenheit and vice versa. We will utilize HTML, CSS, and JavaScript to finish this temperature converter project in today’s lesson.
The HTML (Hypertext Markup Language) will help us to create the structure for the list with some necessary attributes and elements to make Temperature Converter.
Then we will use CSS (Cascading Stylesheet) which will help us to style or design the project with suitable padding and alignment in the Temperature Converter project.
50+ HTML, CSS & JavaScript Projects With Source Code
At last, we will use JS (JavaScript) which will add logic to make the Temperature Converter project responsive from the user end. I hope you have got an idea about the project.
Responsive Navbar Using HTML and CSS
To sum up, whether working with temperature readings for scientific or practical purposes, a temperature conversion is an essential tool. You can now convert temperatures from one scale to another more easily than ever thanks to the availability of online temperature converters, ensuring that you always have the precise temperature readings you require. These online temperature converts to provide an accurate converted temperature as this website uses the standard converting temperature formula to calculate the temperature.
Video Tutorial
| Project Name | Paper Effect Background |
| Project Idea | Codingartist |
| Code By | @Harshh9 |
| Written By | Harsh Sawant |
| Project Download | CodePen Link Given Below |
| Language Used | HTML, CSS, and JavaScript |
| External Link / Dependencies | Yes |
| Responsive | Yes |
Simple Portfolio Website Using Html And Css With Source Code
HTML Code of Temperature Converter
<html lang="en">
<head>
<title>Temperature Conversion</title>
<!--Google font-->
<link rel="preconnect" href="https://fonts.gstatic.com">
<link href="https://fonts.googleapis.com/css2?family=Roboto+Mono:wght@500&display=swap" rel="stylesheet">
<!--Stylesheet-->
<link rel="stylesheet" href="style.css">
</head>
<body>
<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>
<script src="script.js"></script>
</body>
</html>In order to create the temperature converter, we must first add a few crucial links to our html head and body sections. Both our external CSS file link and the URLs to Google Fonts will be added to the heading section.
Responsive Resume/CV Website Using HTML & CSS
Now, we’ll make a section for our temperature converter using the div tag and wrapper class. The label for the celsius will be added using the label tag, and an input section with the type “number” will be added using the input tag, allowing the user to enter a number. We will also include an oninput() to execute the caltofar function ().
The Fahrenheit temperature will also have a container and an input that will convert it to Celsius.
Now that the structure has been added, we will style our temperature converter.
HTML Output:
Ecommerce Website Using Html Css And Javascript Source Code
CSS Code of Temperature Converter
*,
*:before,
*:after{
padding: 0;
margin: 0;
box-sizing: border-box;
font-family: "Roboto Mono", monospace;
font-size: 18px;
}
body{
background-color: red;
}
.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;
}Step1: We’ll change the default padding and margin to “zero” by using the universal selector (*), and we’ll set the box size property to “border-box” as well. Roboto Mono will be the font family, and 18 px will be the font size.The background color is set as “Red”.
Step2:The background colour property will now be used to set the background to “white,” and the wrapper class will be used to specify the width as “450px.” We’ll set the padding to “70 px” using the padding attribute. A border of 8 pixels will be added, and the display’s flexibility setting is “flex.”
Step 3: Using the input tag selector, we will now style our input box. We’ll choose “100%” for both the width and the height. The padding setting is 0px 10px.
Responsive Login Page in HTML with CSS Code
Next is the CSS code, where we have styled, padded, and aligned the Temperature Converter project so that it is correctly positioned and doesn’t get cluttered with appropriate CSS elements. To make it responsive, let’s code the JavaScript portion.
Portfolio Website using HTML and CSS (Source Code)
JavaScript Code of Temperature Converter
ADVERTISEMENT
let celsius = document.getElementById("celsius");
let fahrenheit = document.getElementById("fahrenheit");
function celToFar(){
let output = ( parseFloat(celsius.value) * 9/5 ) + 32;
fahrenheit.value = parseFloat(output.toFixed(2));
}
function farToCel(){
let output = ( parseFloat(fahrenheit.value) - 32) * 5/9;
celsius.value = parseFloat( output.toFixed(2));
console.log(output);
}ADVERTISEMENT
First of all, using the let keyword we will select the html element using the document.getELementById() we will select html elements. Now create a function for the conversion from celsius to Fahrenheit. We will take the input from the user and using the parsefloat function we will convert the integer to the float value and then calculating through the formula and display it to the Fahrenheit input.
ADVERTISEMENT
Last stage of the project the JavaScript in which we have added the logical and coded as per the requirement with some conditions. Let us see the Final Output of the project Temperature Converter using HTML, CSS & JavaScript (Source Code) | Temperature Converter.
ADVERTISEMENT
Final output:
ADVERTISEMENT
Final Output Temperature Converter using HTML, CSS, and JavaScript
We have successfully created our Temperature Convertor using HTML, CSS & JavaScript (Source Code) | Temperature Converter. You can use this project for your personal needs and the respective lines of code are given with the code pen link mentioned above.
100+ JavaScript Projects With Source Code ( Beginners to Advanced)
If you find out this Blog helpful, then make sure to search code with random on google for Front End Projects with Source codes and make sure to Follow the Code with Random Instagram page.
Code Idea – codingartist
Written By – Harsh Sawant
Code By – @harshh9
What are the formulas for temperature conversion?
To convert temperatures in degrees Fahrenheit to Celsius
°C = (5/9) × (°F − 32)
To convert temperatures in degrees Celsius to Fahrenheit
°F = (9/5) × (°C) + 32
What is the importance of converting temperature?
A temperature converter helps in the conversion of the measurement units of the temperature recorded in a particular unit. Temperature expresses the degree of heat or cold of a solid, liquid, or gas
