Bina Laman Web Penukar Berat-tutorial css-php.cn

Bina Laman Web Penukar Berat

WBOY

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

asal

906 orang telah melayarinya

Build a Weight Converter Website

pengenalan

Helo, rakan pembangun! Saya sangat teruja untuk memperkenalkan projek terbaharu saya: Penukar Berat. Projek ini ialah alat yang ringkas tetapi praktikal yang membantu pengguna menukar berat daripada paun kepada kilogram. Ia merupakan cara terbaik untuk mempraktikkan JavaScript, terutamanya dalam mengendalikan input pengguna, pengiraan dan manipulasi DOM. Sama ada anda baru menggunakan JavaScript atau mencari projek yang menyeronokkan dan pantas, penukar berat ini sesuai untuk anda.

Gambaran Keseluruhan Projek

Penukar Berat ialah aplikasi web yang membolehkan pengguna memasukkan berat dalam paun dan mendapatkan berat yang setara dalam kilogram. Projek ini mempamerkan cara bekerja dengan input borang, melakukan pengiraan dalam JavaScript dan mengemas kini kandungan halaman web secara dinamik berdasarkan input pengguna.

Ciri-ciri

Pengendalian Input Pengguna: Menerima input pengguna dalam paun dan menukarkannya kepada kilogram.
Pengesahan: Memaparkan mesej ralat untuk input yang tidak sah (cth., nilai bukan angka atau negatif).
Pengiraan Masa Nyata: Mengemas kini hasil penukaran serta-merta semasa pengguna menaip.
Reka Bentuk Responsif: Reka letak direka bentuk untuk responsif, memberikan pengalaman yang konsisten merentas peranti.

Teknologi yang Digunakan

HTML: Menstruktur antara muka penukar berat.
CSS: Menggayakan penukar, termasuk reka letak responsif dan pengendalian ralat.
JavaScript: Menguruskan pengesahan input pengguna, penukaran berat dan kemas kini DOM.

Struktur Projek

Berikut ialah pandangan ringkas pada struktur projek:

Weight-Converter/
├── index.html
├── styles.css
└── script.js

Salin selepas log masuk

index.html: Mengandungi struktur HTML penukar berat.
styles.css: Termasuk gaya CSS untuk reka letak dan reka bentuk responsif.
script.js: Mengendalikan logik untuk penukaran berat dan pengesahan input.

Pemasangan

Untuk memulakan projek, ikut langkah berikut:

Klon repositori:

git clone https://github.com/abhishekgurjar-in/Weight-Converter.git

Salin selepas log masuk

Buka direktori projek:
```
cd Weight-Converter
```
Salin selepas log masuk
Jalankan projek:
- Buka fail index.html dalam penyemak imbas web untuk menggunakan penukar berat.

Penggunaan

Buka tapak web dalam penyemak imbas web.
Masukkan berat dalam pound ke dalam medan input.
Lihat berat ditukar dalam kilogram dipaparkan pada halaman. Jika input tidak sah, mesej ralat akan muncul.

Penerangan Kod

HTML

Fail index.html menyediakan struktur penukar berat, termasuk medan input dan paparan hasil. Berikut adalah coretan:

<!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>

Salin selepas log masuk

CSS

Fail styles.css menggayakan penukar berat, termasuk medan input, mesej ralat dan reka letak. Berikut ialah beberapa gaya utama:

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

Salin selepas log masuk

JavaScript

Fail script.js mengurus logik penukaran, pengesahan input dan mengemas kini DOM. Berikut adalah coretan:

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

Salin selepas log masuk

Demo Langsung

Anda boleh melihat demo langsung Penukar Berat di sini.

Kesimpulan

Membina Penukar Berat ini merupakan projek yang menyeronokkan yang membolehkan saya meneroka potensi JavaScript dalam mengendalikan pengesahan dan pengiraan input masa nyata. Saya harap projek ini memberi inspirasi kepada anda untuk mencipta alatan serupa yang memudahkan tugas harian. Jangan ragu untuk meneroka, menyesuaikan dan memperbaik kod untuk memenuhi keperluan anda. Selamat mengekod!