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.
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.
Here's a quick look at the project structure:
Temperature-Converter/ ├── index.html ├── styles.css └── script.js
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:
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>
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; }
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; } }
You can check out the live demo of the Temperature Converter here.
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!
This project was developed as part of my ongoing journey to enhance my web development skills, focusing on JavaScript and DOM manipulation.
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!