pengenalan

Helo, rakan pemaju! Saya sangat teruja untuk memperkenalkan projek terbaharu saya:Penukar Berat. Projek ini ialah alat yang mudah 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

TheWeight Converterialah 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., bukan angka atau nilai 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 adalah 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

   Salin selepas log masuk

2. Buka direktori projek:
   

   cd Weight-Converter

   Salin selepas log masuk

3. Jalankan projek:

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

Penggunaan

1. Buka laman webdalam pelayar web.
2. Masukkan berat dalam poundke dalam medan input.
3. Lihat berat ditukar dalam kilogramdipaparkan 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:

        
  
 
Weight Converter
 Pounds  
Your weight in kg is: 
 
 
 
 
Made with ❤️ by Abhishek Gurjar
 
  

CSS

Fail styles.css menggayakan penukar berat, termasuk medan input, mesej ralat dan reka letak. Berikut adalah 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 <= 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);

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!