Build a Weight Converter Website
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
Copy after login -
Open the project directory:
cd Weight-Converter
Copy after login -
Run the project:
- Open the index.html file in a web browser to use the weight converter.
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
- GitHub Profile
The above is the detailed content of Build a Weight Converter Website. For more information, please follow other related articles on the PHP Chinese website!
Hot AI Tools
Undresser.AI Undress
AI-powered app for creating realistic nude photos
AI Clothes Remover
Online AI tool for removing clothes from photos.
Undress AI Tool
Undress images for free
Clothoff.io
AI clothes remover
AI Hentai Generator
Generate AI Hentai for free.
Hot Article
Hot Tools
Notepad++7.3.1
Easy-to-use and free code editor
SublimeText3 Chinese version
Chinese version, very easy to use
Zend Studio 13.0.1
Powerful PHP integrated development environment
Dreamweaver CS6
Visual web development tools
SublimeText3 Mac version
God-level code editing software (SublimeText3)
Hot Topics
1378
52
Working With GraphQL Caching
Mar 19, 2025 am 09:36 AM
If you’ve recently started working with GraphQL, or reviewed its pros and cons, you’ve no doubt heard things like “GraphQL doesn’t support caching” or
Building an Ethereum app using Redwood.js and Fauna
Mar 28, 2025 am 09:18 AM
With the recent climb of Bitcoin’s price over 20k $USD, and to it recently breaking 30k, I thought it’s worth taking a deep dive back into creating Ethereum
Creating Your Own Bragdoc With Eleventy
Mar 18, 2025 am 11:23 AM
No matter what stage you’re at as a developer, the tasks we complete—whether big or small—make a huge impact in our personal and professional growth.
Vue 3
Apr 02, 2025 pm 06:32 PM
It's out! Congrats to the Vue team for getting it done, I know it was a massive effort and a long time coming. All new docs, as well.
A bit on ci/cd
Apr 02, 2025 pm 06:21 PM
I'd say "website" fits better than "mobile app" but I like this framing from Max Lynch:
Can you get valid CSS property values from the browser?
Apr 02, 2025 pm 06:17 PM
I had someone write in with this very legit question. Lea just blogged about how you can get valid CSS properties themselves from the browser. That's like this.
Stacked Cards with Sticky Positioning and a Dash of Sass
Apr 03, 2025 am 10:30 AM
The other day, I spotted this particularly lovely bit from Corey Ginnivan’s website where a collection of cards stack on top of one another as you scroll.
Let's use (X, X, X, X) for talking about specificity
Mar 24, 2025 am 10:37 AM
I was just chatting with Eric Meyer the other day and I remembered an Eric Meyer story from my formative years. I wrote a blog post about CSS specificity, and
