Bina Laman Web Penukar Berat

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

• 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:

1. Klon repositori:
   

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

2. Buka direktori projek:
   

   cd Weight-Converter
   

3. Jalankan projek:

   • Buka fail index.html dalam penyemak imbas web untuk menggunakan penukar berat.

Penggunaan

1. Buka tapak web dalam penyemak imbas web.
2. Masukkan berat dalam pound ke dalam medan input.
3. 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:

8b05045a5be5764f313ed5b9168a17e6
49099650ebdc5f3125501fa170048923
  93f0f5c25f18dab9d176bd4f6de5d30e
    7c8d9f814bcad6a1d7abe4eda5f773e5
    26faf3d1af674280d03ba217d87e9421
    b2386ffb911b14667cb8f0f91ea547a7Weight Converter6e916e0f7d1e588d4f442bf645aedb2f
    d8b7823904473d155afe66ded7e78f93
    5de102113aede4703971b3b780c58efb2cacc6d41bbb37262a98f745aa00fbf0
  9c3bca370b5104690d9ef395f2c5f8d1
  6c04bd5ca3fcae76e30b72ad730ca86d
    4883ec0eb33c31828b7c767c806e14c7
      4a249f0d628e2318394fd9b75b4636b1Weight Converter473f0a7621bec819994bb5020d29372a
      1adfcf403e84ee950da4e51ec7bcc58ePounds8c1ecd4bb896b2264e0711597d40766c
      2bd967a228ad4dd6dd46bd4135780e50
      e388a4556c0f65e1904146cc1a846beeYour weight in kg is: 1d8fe9c7fe60ca65fea7ef18556b479354bdf357c58b8a65c66d7c19c8e4d11494b3e26ee717c64999d7867364b1b4a3
      fcc3d86900ee5e367762a3d4e4f4c3eb94b3e26ee717c64999d7867364b1b4a3
    16b28748ea4df4d9c2150843fecfba68
    ffd6ba4147bda351239915f463e46e38
      e388a4556c0f65e1904146cc1a846beeMade with ❤️ by Abhishek Gurjar94b3e26ee717c64999d7867364b1b4a3
    16b28748ea4df4d9c2150843fecfba68
  36cc49f0c466276486e50c850b7e4956
73a6ac4ed44ffec12cee46588e518a5e

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

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 2d1b547ac038f694c7ef60a480b9dfa0 {
      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);

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!

Kredit

Projek ini dibangunkan sebagai aplikasi praktikal JavaScript untuk pengendalian input pengguna dan manipulasi DOM.

Pengarang

• Abhishek Gurjar
  • Profil GitHub

Atas ialah kandungan terperinci Bina Laman Web Penukar Berat. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!