Build your own Fahrenheit to Celsius Converter using JavaScript

Build Fahrenheit to Celsius Temperature Converter

A Fahrenheit to Celsius converter is a tool or formula that allows for the conversion of temperatures from the Fahrenheit scale (°F) to the Celsius (or Centigrade) scale (°C). This conversion is useful in contexts where temperature values need to be expressed in different units, such as scientific calculations, weather reporting, or everyday temperature comparisons. The Fahrenheit is a temperature scale proposed by European physicist Daniel Gabriel Fahrenheit in 1724.

Introduction

In this tutorial, we’ll guide you through the process of creating a simple and effective Fahrenheit to Celsius converter web application. Learn the basics of HTML, enhance the user interface with CSS, and implement the conversion logic using JavaScript. Elevate your web programming skills with this hands-on project.

How Fahrenheit to Celsius Converter works

The Fahrenheit and Celsius scales are two common units of temperature measurement. The Fahrenheit scale is commonly used in the United States, while most other countries, and scientific contexts, use the Celsius scale.

The formula for converting Fahrenheit to Celsius Converter is:

Fahrenheit to Celsius Converter Formula

In this formula:

  • Celsius is the temperature in degrees Celsius (°C).
  • Fahrenheit is the temperature in degrees Fahrenheit (°F).
Fahrenheit to Celsius Converter

Prerequisites

Before diving into the code, make sure you have a basic understanding of HTML, CSS, and JavaScript. Ensure you have a text editor like Visual Studio Code or Sublime Text installed for a seamless coding experience.

Setting Up the HTML Structure

Create a new HTML file and set up the basic structure. Define input fields for Fahrenheit, along with a button to trigger the conversion. Also, include a section to display the result.

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" href="styles.css">
    <title>Fahrenheit to Celsius Converter</title>
</head>
<body>
    <div class="calculator">
        <h1>Fahrenheit to Celsius Converter</h1>

        <label for="fahrenheit">Fahrenheit:</label>
        <input type="number" id="fahrenheit" placeholder="Enter temperature in Fahrenheit">

        <br/>

        <button onclick="convertTemperature()">Convert</button>

        <hr />

        <h4 id="result">Result: </h4>
    </div>

    <script src="script.js"></script>
</body>
</html>

Styling with CSS

Enhance the visual appeal of Fahrenheit and Celsius Converter by styling it with CSS. Create a new file named styles.css and add the following styles:

body {
    font-family: 'Arial', sans-serif;
    display: flex;
    align-items: center;
    justify-content: center;
    height: 100vh;
    margin: 0;
    font-size: 17px;
    background: #fafafa;
}
h1 {
    margin: 5px 0 15px 0;
    text-align: center;
    text-transform: uppercase;
    font-size: 20px;
    letter-spacing: 1px
}
.calculator {
    width: 400px;
    padding: 20px;
    border: 1px solid #ccc;
    border-radius: 5px;
    background: #fff;
}
label, input, button {
    margin: 10px 0;
}
input {
    display: block;
    width: calc(100% - 20px);
    padding: 10px;
}
button {
    background-color: #000;
    color: #fff;
    outline: 0;
    border: 0;
    padding: 10px 15px;
    cursor: pointer;
    font-size: 16px;
    margin: 0 auto; 
    border-radius: 5px;
    margin-bottom: 5px;
}
hr {
    margin: 15px 0;
}
h4 {
    margin-bottom: 0;
}

These are just the basic stylings, which you can enhance and modify as per your design requirements.

Implementing JavaScript Logic For Fahrenheit to Celsius Converter

Now, create a JavaScript file named script.js to implement the conversion logic. Add the following code:

function convertTemperature() {
    // Retrieve input values
    const fahrenheitInput = document.getElementById('fahrenheit');

    // Validate input
    if (fahrenheitInput.value === '') {
        alert('Please enter a temperature value.');
        return;
    }

    // Fahrenheit to Celsius conversion
    if (fahrenheitInput.value !== '') {
        const fahrenheitValue = parseFloat(fahrenheitInput.value);
        const celsiusValue = (fahrenheitValue - 32) * 5/9;
        document.getElementById('result').innerText = `Result: ${fahrenheitValue}°F = ${celsiusValue.toFixed(2)}°C`;
    }
}

Code Explanation

The HTML sets up the structure, CSS styles the page, and JavaScript handles the conversion logic. The convertTemperature() function is triggered by the button click, fetching input values, and performing the conversion. The result will be displayed in the result div.

Conclusion

Congratulations! You’ve built a Fahrenheit to Celsius temperature converter using HTML, CSS, and JavaScript. Feel free to customize and expand this project to further enhance your web programming skills.

This tutorial focuses on the Fahrenheit to Celsius temperature converter. This will help you to grasp the HTML forms and the JavaScript concepts. Keep exploring and building to refine your skills and create impressive web applications.

Now, deploy your temperature converter and share your creation with the world!

Also, learn How to Build Celsius to Fahrenheit Converter Using JavaScript.

Related Posts