Abhishek Gurjar

Posted on Aug 18

Build a Temperature Converter Website

#html #css #javascript #temperatureconverter

Introduction

Hello, fellow developers! I'm excited to share my latest project: a practical Temperature Converter. This project is perfect for those looking to enhance their JavaScript skills by working with user inputs, performing conversions, and dynamically updating the DOM. Whether you're a beginner or an experienced developer, this Temperature Converter is a great project to understand the basics of unit conversion.

Project Overview

The Temperature Converter is a web-based application that allows users to easily convert temperatures between Celsius, Fahrenheit, and Kelvin. This project demonstrates how to create an interactive user interface, handle calculations, and provide real-time feedback to the user.

Features

User-Friendly Interface: Simple and intuitive design for ease of use.
Real-Time Conversion: Instantly converts temperature values as you input them.
Responsive Design: The layout adapts to different screen sizes, providing a seamless experience on both desktop and mobile devices.
Multiple Unit Support: Converts between Celsius, Fahrenheit, and Kelvin.

Technologies Used

HTML: Structures the web page and input elements.
CSS: Styles the interface, ensuring a clean and responsive design.
JavaScript: Handles the conversion logic and updates the temperature values in real-time.

Project Structure

Here's a quick look at the project structure:

Temperature-Converter/
├── index.html
├── styles.css
└── script.js

index.html: Contains the HTML structure for the Temperature Converter.
styles.css: Includes CSS styles to enhance the appearance of the converter.
script.js: Manages the conversion logic and dynamic updates.

Installation

To get started with the project, follow these steps:

Clone the repository:

git clone https://github.com/abhishekgurjar-in/Temperature-Converter.git

Open the project directory:
```
cd Temperature-Converter
```
Run the project:
- Open the index.html file in a web browser to start using the Temperature Converter.

Usage

Open the website in a web browser.
Enter a temperature value in either Celsius, Fahrenheit, or Kelvin input fields.
View the converted values automatically updated in the corresponding fields.
Reset the fields if you want to start a new conversion.

Code Explanation

HTML

The index.html file provides the basic structure of the Temperature Converter, including the input fields for Celsius, Fahrenheit, and Kelvin. Here’s a snippet:

<!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" />
    <script src="./script.js" defer></script>
  </head>
  <body>
    <video id="background-video" autoplay loop muted poster="https://assets.codepen.io/6093409/river.jpg">
      <source src="./images/bg.mp4" type="video/mp4">
    </video>
    <div class="container">
      <h1 class="heading">Temperature Converter</h1>
      <div class="temp-container">
        <label for="celsius">Celsius:</label>
        <input
          onchange="computeTemp(event)"
          type="number"
          name="celsius"
          id="celsius"
          placeholder="Enter Temperature"
          class="input"
        />
      </div>
      <div class="temp-container">
        <label for="fahrenheit">Fahrenheit:</label>
        <input
          onchange="computeTemp(event)"
          type="number"
          name="fahrenheit"
          id="fahrenheit"
          placeholder="Enter Temperature"
          class="input"
        />
      </div>
      <div class="temp-container">
        <label for="kelvin">Kelvin:</label>
        <input
          onchange="computeTemp(event)"
          type="number"
          name="kelvin"
          id="kelvin"
          placeholder="Enter Temperature"
          class="input"
        />
      </div>
    </div>
    <div class="footer">
      <p>Made with ❤️ by Abhishek Gurjar</p>
    </div>
  </body>
</html>

CSS

The styles.css file styles the Temperature Converter, providing a clean and responsive layout. Here are some key styles:

body {
  margin: 0;
  background: url(./images/bg.mp4);
  min-height: 100vh;
  display: flex;
  justify-content: center;
  flex-direction: column;
  align-items: center;
  font-family: monospace;
  color: white;
}

.container {
  background: #202124;
  padding: 20px;
  box-shadow: 0 4px 10px rgba(0, 0, 0, 0.3);
  border-radius: 10px;
  width: 85%;
  max-width: 450px;
  min-width: 350px;
  display: flex;
  flex-direction: column;
  align-items: center;
}

.heading {
  font-size: 32px;
}

.temp-container {
  width: 100%;
  padding: 15px;
  font-weight: bold;
  font-size: 18px;
}

.input {
  width: 220px;
  font-family: monospace;
  padding: 5px;
  float: right;
  outline: none;
  background: white;
  border-color: white;
  border-radius: 5px;
  color: black;
  font-size: 18px;
}

.input::placeholder {
  color: gray;
}

#background-video {
  width: 100vw;
  height: 100vh;
  object-fit: cover;
  position: fixed;
  left: 0;
  right: 0;
  top: 0;
  bottom: 0;
  z-index: -1;
}

.footer {
  margin-top: 200px;
  text-align: center;
}

JavaScript

The script.js file handles the conversion logic, updating the temperature values based on user inputs. Here’s a snippet:

const celsiusEl = document.getElementById("celsius");
const fahrenheitEl = document.getElementById("fahrenheit");
const kelvinEl = document.getElementById("kelvin");

function computeTemp(event) {
  const currentValue = +event.target.value;

  switch (event.target.name) {
    case "celsius":
      kelvinEl.value = (currentValue + 273.32).toFixed(2);
      fahrenheitEl.value = (currentValue * 1.8 + 32).toFixed(2);
      break;
    case "fahrenheit":
      celsiusEl.value = ((currentValue - 32) / 1.8).toFixed(2);
      kelvinEl.value = ((currentValue - 32) / 1.8 + 273.32).toFixed(2);
      break;
    case "kelvin":
      celsiusEl.value = (currentValue - 273.32).toFixed(2);
      fahrenheitEl.value = ((currentValue - 273.32) * 1.8 + 32).toFixed(2);
      break;
    default:
      break;
  }
}

Live Demo

You can check out the live demo of the Temperature Converter here.

Conclusion

Building this Temperature Converter was a rewarding experience, reinforcing my understanding of JavaScript and how to create interactive web applications. I hope this project inspires you to explore further and build your own conversion tools. Happy coding!

Credits

This project was developed as part of my ongoing journey to enhance my web development skills, focusing on JavaScript and DOM manipulation.

Author

Abhishek Gurjar
- GitHub Profile

DEV Community