Temperature Converter Website using HTML, CSS, and JavaScript
Published: 2023-05-19 04:01:54

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](https://www.codewithrandom.com/2022/11/13/temperature-convertor-using-javascript/)** 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.

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.

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.
```
## 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.

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.
```
## 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."

**Step3:** 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.

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.

## JavaScript Code of Temperature Converter
```
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);
}
```
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.

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.

We have successfully created our Temperature Convertor using HTML, CSS & JavaScript (Source Code) | **[Temperature Converter](https://www.codewithrandom.com/2022/11/13/temperature-convertor-using-javascript/)**. You can use this project for your personal needs and the respective lines of code are given with the code pen link mentioned above.

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