This content originally appeared on DEV Community and was authored by Abhishek Gurjar
Introduction
Hello, fellow developers! I'm thrilled to introduce my latest project: a Weight Converter. This project is a simple yet practical tool that helps users convert weight from pounds to kilograms. It's an excellent way to practice JavaScript, particularly in handling user inputs, calculations, and DOM manipulation. Whether you're new to JavaScript or looking for a fun, quick project, this weight converter is perfect for you.
Project Overview
The Weight Converter is a web application that allows users to input a weight in pounds and get the equivalent weight in kilograms. This project showcases how to work with form inputs, perform calculations in JavaScript, and dynamically update the webpage content based on user input.
Features
- User Input Handling: Accepts user input in pounds and converts it to kilograms.
- Validation: Displays error messages for invalid inputs (e.g., non-numeric or negative values).
- Real-time Calculation: Updates the conversion result immediately as the user types.
- Responsive Design: The layout is designed to be responsive, providing a consistent experience across devices.
Technologies Used
- HTML: Structures the weight converter interface.
- CSS: Styles the converter, including responsive layout and error handling.
- JavaScript: Manages user input validation, weight conversion, and DOM updates.
Project Structure
Here's a quick look at the project structure:
Weight-Converter/
├── index.html
├── styles.css
└── script.js
- index.html: Contains the HTML structure of the weight converter.
- styles.css: Includes CSS styles for the layout and responsive design.
- script.js: Handles the logic for weight conversion and input validation.
Installation
To get started with the project, follow these steps:
-
Clone the repository:
git clone https://github.com/abhishekgurjar-in/Weight-Converter.git -
Open the project directory:
cd Weight-Converter -
Run the project:
- Open the
index.htmlfile in a web browser to use the weight converter.
- Open the
Usage
- Open the website in a web browser.
- Enter a weight in pounds into the input field.
- View the converted weight in kilograms displayed on the page. If the input is invalid, an error message will appear.
Code Explanation
HTML
The index.html file sets up the structure of the weight converter, including the input field and the result display. Here’s a snippet:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Weight Converter</title>
<link rel="stylesheet" href="./style.css" />
<script src="./script.js" defer></script>
</head>
<body>
<div class="container">
<h1>Weight Converter</h1>
<label for="input">Pounds</label>
<input
type="number"
id="input"
class="input"
step="0.1"
placeholder="Enter number"
/>
<p>Your weight in kg is: <span id="result"></span></p>
<p class="error" id="error"></p>
</div>
<div class="footer">
<p>Made with ❤️ by Abhishek Gurjar</p>
</div>
</body>
</html>
CSS
The styles.css file styles the weight converter, including the input field, error messages, and layout. Here are some key styles:
body {
margin: 0;
background-color: black;
min-height: 100vh;
display: flex;
justify-content: center;
flex-direction: column;
align-items: center;
font-family: 'Courier New', Courier, monospace;
color: white;
}
.container {
background: rgba(141, 133, 133, 0.632);
padding: 20px;
box-shadow: 0 4px 10px rgba(0, 0, 0, 0.3);
border-radius: 10px;
width: 85%;
max-width: 450px;
margin-bottom: 200px;
}
.input-container {
display: flex;
justify-content: center;
align-items: center;
font-size: 18px;
font-weight: 700;
}
.input {
padding: 10px;
width: 70%;
background: rgb(255, 253, 253);
border-color: rgba(0, 0, 0, 0.5);
font-size: 18px;
border-radius: 10px;
color: rgb(0, 0, 0);
outline: none;
}
.error {
color: red;
}
#result {
color: rgb(0, 255, 0);
}
JavaScript
The script.js file manages the conversion logic, input validation, and updates the DOM. Here’s a snippet:
const inputEl = document.getElementById("input");
const errorEl = document.getElementById("error");
const resultEl = document.getElementById("result");
let errorTime;
let resultTime;
function updateResults() {
if (inputEl.value <= 0 || isNaN(inputEl.value)) {
errorEl.innerText = "Please enter a valid number!";
clearTimeout(errorTime);
errorTime = setTimeout(() => {
errorEl.innerText = "";
inputEl.value = "";
}, 2000);
} else {
resultEl.innerText = (+inputEl.value / 2.2).toFixed(2);
clearTimeout(resultTime);
resultTime = setTimeout(() => {
resultEl.innerText = "";
inputEl.value = "";
}, 10000);
}
}
inputEl.addEventListener("input", updateResults);
Live Demo
You can check out the live demo of the Weight Converter here.
Conclusion
Building this Weight Converter was an enjoyable project that allowed me to explore JavaScript’s potential in handling real-time input validation and calculations. I hope this project inspires you to create similar tools that make everyday tasks easier. Feel free to explore, customize, and improve the code to suit your needs. Happy coding!
Credits
This project was developed as a practical application of JavaScript for user input handling and DOM manipulation.
Author
- Abhishek Gurjar
This content originally appeared on DEV Community and was authored by Abhishek Gurjar
Abhishek Gurjar | Sciencx (2024-08-17T15:57:46+00:00) Build a Weight Converter Website. Retrieved from https://www.scien.cx/2024/08/17/build-a-weight-converter-website/
Please log in to upload a file.
There are no updates yet.
Click the Upload button above to add an update.