Langkau ke kandungan
WANCODE
EN

Kalkulator Tip & Pembahagi Bil

60 minitPemulaHTML formsJavaScriptEventsValidation

Hasil

Borang yang berfungsi, memaparkan “Tip seorang” dan “Jumlah seorang” dalam RM dengan dua tempat perpuluhan, menolak input yang salah dengan mesej yang mesra, dan boleh di-reset dengan kemas.

Objektif pembelajaran

  • Bina borang yang mesra aksesibiliti dengan <label for> dan input nombor
  • Kendalikan event submit borang dan hentikan muat semula halaman dengan preventDefault()
  • Tukar teks input kepada nombor dan format wang dengan toFixed(2)
  • Validasi input dan paparkan mesej ralat yang membantu, bukan NaN

Prasyarat

  • Asas HTML (elemen dan atribut) — lihat trek HTML & CSS
  • JavaScript asas: variable, function, pernyataan if dan document.querySelector — lihat trek JavaScript

Tingkah laku yang dijangka

  • Masukkan bil RM 100, tip 10% dan 2 orang, kemudian tekan Calculate — paparan menunjukkan tip RM 5.00 dan jumlah RM 55.00 seorang.
  • Jumlah sentiasa ada tepat dua tempat perpuluhan (RM 38.33, bukan 38.333333).
  • Bil kosong, tip negatif atau 0 / 2.5 orang memaparkan mesej ralat yang jelas — tidak sekali-kali NaN atau Infinity.
  • Butang Reset mengosongkan input, keputusan dan sebarang ralat.

Makan di luar dengan kawan-kawan dan bahagi bil — ini aplikasi JavaScript pertama yang sempurna: beberapa input, satu pengiraan, dan banyak cara pengguna boleh menaip sesuatu yang tak dijangka. Tip tidak wajib di Malaysia (banyak restoran sudah mengenakan caj perkhidmatan), jadi tetapkan tip kepada 0% dan ia berfungsi sebagai pembahagi bil biasa.

JavaScript
tip            = bill × (tip% ÷ 100)
tipPerPerson   = tip ÷ people
totalPerPerson = (bill + tip) ÷ people

Itulah seluruh pengiraannya. Kerja sebenar ialah memastikan nombor yang masuk itu bersih.

Menekan butang mencetuskan event submit pada borang. Kod anda mendengar event itu.

Nilai input sentiasa string, walaupun dalam input type="number". "100" + 10 menjadi "10010", bukan 110 — jadi tukar dengan Number() dahulu.

Peringkat

Dalam index.html, gantikan komen itu dengan:

• <form id="tip-form"> yang mengandungi tiga input nombor: #bill, #tip dan #people, setiap satu dengan <label for="…"> yang sepadan • <p id="error"> untuk mesej ralat (kosong buat masa ini) • butang submit (<button type="submit">Calculate</button>) • selepas borang, dua elemen keputusan: #tip-per-person dan #total-per-person (mulakan dengan RM 0.00)

CSS sudah ditulis untuk id dan class ini, jadi ia sepatutnya terus nampak cantik.

Semakan

  • Ada form#tip-form
  • #bill, #tip dan #people ialah input nombor dalam borang
  • Setiap input ada label
  • Borang ada butang submit
  • Kotak ralat dan kedua-dua elemen keputusan wujud
Senarai semak penyiapan

Tandakan item ini apabila ia benar untuk projek anda. Projek selesai apabila setiap peringkat lulus dan setiap item ditanda.

Pratonton

Output konsol daripada kod anda akan dipaparkan di sini.

Langkah 1 daripada 5