Build a Weight Converter Website-CSS Tutorial-php.cn

Build a Weight Converter Website

WBOY

Release： 2024-08-18 06:32:32

Original

905 people have browsed it

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

Copy after login

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>

Copy after login

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);
  }

Copy after login

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);

Copy after login

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!