Build a Temperature Converter Website

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:

1. Clone the repository:
   

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

2. Open the project directory:
   

   cd Temperature-Converter
   

3. Run the project:

   • Open the index.html file in a web browser to start using the Temperature Converter.

Usage

1. Open the website in a web browser.
2. Enter a temperature value in either Celsius, Fahrenheit, or Kelvin input fields.
3. View the converted values automatically updated in the corresponding fields.
4. 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:

8b05045a5be5764f313ed5b9168a17e6
49099650ebdc5f3125501fa170048923
  93f0f5c25f18dab9d176bd4f6de5d30e
    7c8d9f814bcad6a1d7abe4eda5f773e5
    acd8feeb3a0ea7477b979779de32785a
    26faf3d1af674280d03ba217d87e9421
    b2386ffb911b14667cb8f0f91ea547a7Temperature Converter6e916e0f7d1e588d4f442bf645aedb2f
    d8b7823904473d155afe66ded7e78f93
    5de102113aede4703971b3b780c58efb2cacc6d41bbb37262a98f745aa00fbf0
  9c3bca370b5104690d9ef395f2c5f8d1
  6c04bd5ca3fcae76e30b72ad730ca86d
    4492840997c74db10011ac8717ea6ac2
      9947948bd0c7f33255136b5b9e12c219
    a6a9c6d3f311dabb528ad355798dc27d
    4883ec0eb33c31828b7c767c806e14c7
      8aa91ccc1781f6d086dd693d1ccd2e49Temperature Converter473f0a7621bec819994bb5020d29372a
      5af4639a3b4aa67ddb14f778e2191314
        4f3b9da5e46787dc85d5626accbd48a5Celsius:8c1ecd4bb896b2264e0711597d40766c
        1af2da99b7d2b2ac0ca2620ea43ea8f3
      16b28748ea4df4d9c2150843fecfba68
      5af4639a3b4aa67ddb14f778e2191314
        79830ae63548443415aa4d7f9c38b8d2Fahrenheit:8c1ecd4bb896b2264e0711597d40766c
        c21b76a69f2b20dcfa863aa9b2f20cba
      16b28748ea4df4d9c2150843fecfba68
      5af4639a3b4aa67ddb14f778e2191314
        4033c6ff5b61c7068afe78fdf1824b20Kelvin:8c1ecd4bb896b2264e0711597d40766c
        7506eb57d1d6fd93dfc9a1c28bbb6cf4
      16b28748ea4df4d9c2150843fecfba68
    16b28748ea4df4d9c2150843fecfba68
    ffd6ba4147bda351239915f463e46e38
      e388a4556c0f65e1904146cc1a846beeMade with ❤️ by Abhishek Gurjar94b3e26ee717c64999d7867364b1b4a3
    16b28748ea4df4d9c2150843fecfba68
  36cc49f0c466276486e50c850b7e4956
73a6ac4ed44ffec12cee46588e518a5e

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

The above is the detailed content of Build a Temperature Converter Website. For more information, please follow other related articles on the PHP Chinese website!