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.
- Open the
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
Top comments (0)