Temperature Converter using HTML CSS and JavaScript

Temperature Converter using HTML CSS and JavaScript

by

In everyday life, we often check temperature to describe our environment. Temperature is measured in different units like Kelvin, Fahrenheit, and Celsius but people commonly use Fahrenheit and Celsius. In this article, I am going to teach you step-by-step how you can create a Temperature Converter using HTML, CSS, and JavaScript.

Temperature Converter using HTML CSS and JavaScript
Temperature Converter using HTML CSS and JavaScript

Temperature Conversion Formulas

These formulas are used to convert temperatures between Celsius, Fahrenheit, and Kelvin:

  • Celsius to Fahrenheit and Kelvin:
    • Formula F = (9/5)C + 32
    • Formula K = C + 273.15
  • Fahrenheit to Celsius and Kelvin:
    • Formula C = (5/9)(F – 32)
    • Formula K = (5/9)(F – 32) + 273.15
  • Kelvin to Celsius and Fahrenheit:
    • Formula C = K – 273.15
    • Formula F = (9/5)(K – 273.15) + 32

Here C, F, and K means:

  • C: Represents temperature in Celsius.
  • F: Represents temperature in Fahrenheit.
  • K: Represents temperature in Kelvin.

Algorithm Of Temperature Converter

Although you may already know the algorithm of the Temperature Converter tool because it is a very common tool, if still you don’t know the algorithm, then here I am going to make you understand the algorithm of the Temperature Converter.

Because before making any project it is very important to understand its algorithm, so first of all you must understand this algorithm and what we have to do.

  1. Get User Data:
    • Get user data from input fields for Celsius, Fahrenheit, and Kelvin.
    • There will be a total of three inputs and one reset button
  2. Celsius Input:
    • When the user inputs a value in the Celsius field:
      • Convert the Celsius value to Fahrenheit and Kelvin.
      • Update the Fahrenheit and Kelvin input fields with the calculated values.
  3. Fahrenheit Input:
    • When the user inputs a value in the Fahrenheit field:
      • Convert the Fahrenheit value to Celsius and Kelvin.
      • Update the Celsius and Kelvin input fields with the calculated values.
  4. Kelvin Input:
    • When the user inputs a value in the Kelvin field:
      • Convert the Kelvin value to Celsius and Fahrenheit.
      • Update the Celsius and Fahrenheit input fields with the calculated values.
  5. Reset Button:
    • When the user clicks the reset button:
      • Clear all input fields for Celsius, Fahrenheit, and Kelvin.

This is the algorithm for our Temperature Converter project and now we have to convert this algorithm into code. So let’s do it.

Prerequisites to Make a Temperature Converter in JavaScript

To create a Temperature Converter using HTML, CSS, and JavaScript you need:

  1. Basic knowledge of HTML for structuring the Temperature Converter interface.
  2. CSS knowledge for styling and layout.
  3. Undestanding of JavaScript for handling Temperature Converter logic and updating the display.
  4. A code editor for writing and testing code.

Temperature Converter HTML Code

Here is the HTML code for the Temperature Converter, you can easily understand the code because I have added comments in the code at every step.

And you can also copy the entire code with the “Copy” button.

HTML
<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    
    <!-- Title of the web page -->
    <title>Temperature Converter</title>

    <!-- Link to the external stylesheet (CSS) file -->
    <link rel="stylesheet" href="style.css">
</head>

<body>
    <!-- Main container for the temperature converter -->
    <div class="temperature-converter">

        <div class="header">
            <h1>Temperature Converter</h1>
        </div>

        <!-- Input field for Celsius temperature -->
        <input type="number" placeholder="Celsius">
        <div class="unit-icon">℃</div>

        <!-- Input field for Fahrenheit temperature -->
        <input type="number" placeholder="Fahrenheit">
        <div class="unit-icon">℉</div>

        <!-- Input field for Kelvin temperature -->
        <input type="number" placeholder="Kelvin">
        <div class="unit-icon">K</div>

        <!-- Button to clear all input fields -->
        <div class="converter-button">
            <button id="reset-button">Reset</button>
        </div>
    </div>

    <!-- Link to the external JavaScript file -->
    <script src="script.js"></script>

</body>

</html>
HTML

Temperature Converter CSS Code

Here is the CSS code for the Temperature Converter, you can easily understand the code because I have added comments in the code at every step.

CSS
body {
    /* Set font family and background gradient for the body */
    font-family: 'Arial', sans-serif;
    background: linear-gradient(45deg, #8E2DE2, #4A00E0);
    margin: 0;
    display: flex;
    justify-content: center;
    align-items: center;
    height: 100vh;
}

.temperature-converter {
    /* Style for the main temperature converter container */
    background: linear-gradient(135deg, #25b7c4, #4a00e0);
    padding: 20px;
    border-radius: 8px;
    box-shadow: 0 0 20px rgba(0, 0, 0, 0.3);
    text-align: center;
}

.header {
    /* Style for the header section containing the title and icon */
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 20px;
}

h1 {
    /* Style for the title */
    margin: 0;
    color: #fff;
}

.temperature-icon,
.unit-icon {
    /* Style for temperature and unit icons */
    font-size: 24px;
    margin-left: 5px;
    margin-block:-6px 10px;
    color: #fff;
}

input {
    /* Style for input fields */
    width: 80%;
    padding: 10px;
    margin-bottom: 10px;
    box-sizing: border-box;
    border: 2px solid #fff;
    border-radius: 8px;
    background-color: rgba(255, 255, 255, 0.3);
    color: #fff;
    font-size: 16px;
    transition: all 0.3s ease;
}

input:hover,
input:focus {
    /* Hover and focus styles for input fields */
    background-color: rgba(255, 255, 255, 0.5);
    transform: scale(1.02);
}

.unit-icon {
    /* Style for unit icons */
    display: inline-block;
    width: 20%;
    color: #fff;
}

.converter-button {
    /* Style for the button container */
    margin-top: 20px;
}

button {
    /* Style for the button */
    background: linear-gradient(45deg, #FF9A8B, #FF6A88);
    color: #fff;
    padding: 10px 20px;
    font-size: 16px;
    border: none;
    border-radius: 4px;
    cursor: pointer;
    transition: background 0.3s ease;
}

button:hover {
    /* Hover style for the button */
    background: linear-gradient(45deg, #FF6A88, #FF9A8B);
}
CSS

Temperature Converter JavasScript Code

Here is our JavaScript code for the Temperature Converter using JavaScript. You can easily understand the code because I have added comments at each step.

JavaScript
// Selecting input fields for Celsius, Fahrenheit, and Kelvin
let celsiusInput = document.querySelector('input:nth-of-type(1)');
let fahrenheitInput = document.querySelector('input:nth-of-type(2)');
let kelvinInput = document.querySelector('input:nth-of-type(3)');

// Selecting the reset button
let resetButton = document.querySelector('#reset-button');

// Function to round a number to two decimal places
function roundNumber(number) {
    return Math.round(number * 100) / 100;
}

/* Event listener for Celsius input */
celsiusInput.addEventListener('input', function () {
    let cTemp = parseFloat(celsiusInput.value);
    let fTemp = (cTemp * (9 / 5)) + 32;
    let kTemp = cTemp + 273.15;

    // Updating Fahrenheit and Kelvin inputs
    fahrenheitInput.value = roundNumber(fTemp);
    kelvinInput.value = roundNumber(kTemp);
});

/* Event listener for Fahrenheit input */
fahrenheitInput.addEventListener('input', function () {
    let fTemp = parseFloat(fahrenheitInput.value);
    let cTemp = (fTemp - 32) * (5 / 9);
    let kTemp = (fTemp - 32) * (5 / 9) + 273.15;

    // Updating Celsius and Kelvin inputs
    celsiusInput.value = roundNumber(cTemp);
    kelvinInput.value = roundNumber(kTemp);
});

/* Event listener for Kelvin input */
kelvinInput.addEventListener('input', function () {
    let kTemp = parseFloat(kelvinInput.value);
    let cTemp = kTemp - 273.15;
    let fTemp = (kTemp - 273.15) * (9 / 5) + 32;

    // Updating Celsius and Fahrenheit inputs
    celsiusInput.value = roundNumber(cTemp);
    fahrenheitInput.value = roundNumber(fTemp);
});

/* Event listener for the reset button */
resetButton.addEventListener('click', () => {
    // Clearing all input fields
    celsiusInput.value = '';
    fahrenheitInput.value = '';
    kelvinInput.value = '';
});
JavaScript

Explanation of Temperature Converter’s JavaScript code:

  1. First of all, we get input fields for Celsius, Fahrenheit, and Kelvin and reset button element.
  2. Then, we created a total of five functions for the logic of the Temperature Converter project in JavaScript.
  3. roundNumber Function:
    • Purpose: This function is for rounding a number to two decimal places.
    • What Happens: When this function is called with a number as an argument, it rounds the number to two decimal places using Math.round() and returns the rounded value.
  4. Celsius Input Event Listener:
    • Purpose: Triggered when the user inputs a value in the Celsius temperature field.
    • What Happens: It calculates the matching values in Fahrenheit and Kelvin based on the entered Celsius value. Then, it updates the Fahrenheit and Kelvin input fields with the calculated values.
  5. Fahrenheit Input Event Listener:
    • Purpose: Triggered when the user inputs a value in the Fahrenheit temperature field.
    • What Happens: It calculates the matching values in Celsius and Kelvin based on the entered Fahrenheit value. Then, it updates the Celsius and Kelvin input fields with the calculated values.
  6. Kelvin Input Event Listener:
    • Purpose: Triggered when the user inputs a value in the Kelvin temperature field.
    • What Happens: It calculates the matching values in Celsius and Fahrenheit based on the entered Kelvin value. Then, it updates the Celsius and Fahrenheit input fields with the calculated values.
  7. Reset Button Event Listener:
    • Purpose: Triggered when the user clicks the “Reset” button.
    • What Happens: It sets the values of all three temperature input fields (Celsius, Fahrenheit, and Kelvin) to an empty string, which means clearing all input fields.

Understanding JavaScript Methods and Terms Used in Our Code:

Let’s simplify the JavaScript methods and terms used in our code:

  1. document.querySelector:
    • Purpose: Used to select/get the element according to the CSS selector and it will give first element if there are multiple elements.
  2. Event Listeners (addEventListener):
    • Purpose: Functions that wait for a specific event to occur and then execute the provided function by us.
  3. parseFloat:
    • Purpose: Converts a string into a floating-point number.
  4. addEventListener for the Reset Button:
    • Purpose: Listens for a ‘click’ event on the reset button and executes the provided arrow function when the event occurs.
  5. roundNumber Function:
    • Purpose: Rounds a number to two decimal places.

This is how you can make a Temperature Converter in JavaScript.

Read this: Dark Mode Toggle using HTML CSS and JavaScript

Read this: How To Create Digital Clock Using HTML CSS and Javascript

Read this: Image Slider using HTML CSS and JavaScript

Read this: Make A Random Quote Generator Using HTML, CSS, and JavaScript

Read this: ToDo List App in JavaScript for Beginners

Conclusion

In this article, we learned how you can create a Temperature Converter using HTML, CSS, and JavaScript.

I have tried to make you understand the entire code step by step, hope you have understood this project well and if you are facing any problem or error while making this project then you can comment in the comment box given below. I will try to reply as soon as possible.

To learn JavaScript well, you have to create some good projects and Temperature Converter was one of them and to create more projects you can read our other blogs.

Thanks.

Leave a comment