LAB ACTIVITY 3A Duration: 3 Hours JS Form + Validation + if/else + Calculation

Build a Shopping Discount Calculator using JavaScript.

Students will create a shopping calculator with a form UI using Bootstrap 5 (CDN) and implement DOM, validation, if/else, and calculation in script.js.

Back to Topic Jump to Steps

Sample Output (View First)

Tengok contoh output siap dulu supaya student jelas rupa form + output (error & success).
View Completed Output Start Steps
Optional: Letak screenshot output siap dalam folder sample/ (contoh: sample/lab3a-output.png).
Lab 3A Completed Output (Sample)

Important Notes

Read First
Reminder:
Ini lab HTML + JavaScript. Bootstrap untuk kemaskan UI sahaja. Semua logic mesti dibuat dalam script.js (no inline onclick).
  • Guna addEventListener untuk handle button click.
  • Validation mesti dibuat dalam JS (jangan bergantung pada min/max HTML sahaja).
  • Output wajib dipaparkan dalam UI (output box), bukan console sahaja.

Learning Outcomes (CLO)

By the end of this lab session, students should be able to:

  • Access form inputs using DOM selectors.
  • Implement validation and show error messages in the UI.
  • Apply if/else rules to calculate discount.
  • Display formatted results clearly using Bootstrap alerts.

Hardware / Software

  • Text Editor: Visual Studio Code
  • Browser: Chrome / Edge (DevTools required)
  • Framework: Bootstrap 5.3.x (CDN)

Steps (Complete Step-by-Step)

Buat ikut turutan. Setiap step ada Hint button (reference only).
Step 1

Create Project Folder

Create folder named:

RegNo_JS_LAB3A
Example: 10DDT23F1705_JS_LAB3A
Step 2

Create Files

  • Create index.html
  • Create script.js
Checkpoint: Open index.html in browser, no errors.
Step 3

Build Form UI (Bootstrap CDN)

Task:
Form Element Requirement
Customer Name Text input (id="customerName")
Product Dropdown (id="product") with exactly 3 options: Laptop (RM2500), Headphone (RM150), Mouse (RM80). Dropdown value must be the price.
Quantity Number input 1–20 (id="quantity")
Member Checkbox (id="isMember")
Calculate Button Button (id="btnCalc")
Output Box Bootstrap alert (id="outputBox")
Checkpoint: Form nampak kemas (card + inputs + button + output box).
Form Screenshot
Optional
Contoh Form
Step 4

Add Event Listener

Do this in script.js:
  1. Access btnCalc using DOM.
  2. Add click event to Calculate button.
  3. When clicked, call function: calculateBill()
  4. Test: Console should show confirmation message (e.g. ✅ Button clicked).
Step 5

Validation

Inside calculateBill(), validate the following:
Validation Rule Requirement
Name cannot be empty If empty → show error in red (output box) and return;
Name must not contain numbers If contains digits → error + return;
Product must be selected If dropdown value is empty → error + return;
Quantity must be between 1–20 If < 1 or > 20 → error + return;
Quantity must be a number If NaN → error + return;
Rule: If invalid, display error message in red inside output div and stop the function using return.
Step 6

Perform Calculation

After validation:
  1. Retrieve product price from dropdown value.
  2. Calculate: subtotal = price × quantity
Step 7

Apply Discount (if/else)

Use these rules:
  • If member AND subtotal ≥ 1000 → 15% discount
  • If NOT member AND subtotal ≥ 1000 → 10% discount
  • If subtotal < 1000 → No discount
Calculate:
  • discountAmount
  • finalTotal
Step 8

Display Final Output

Display inside output div:
  • Customer Name
  • Selected Product
  • Quantity
  • Subtotal
  • Discount %
  • Final Total
Rule: If valid → show result in green (Bootstrap alert success).
Final Step

Submission

  • Zip folder RegNo_JS_LAB3A
  • Include screenshots: form + error output + success output
Upload the .zip file to CIDOS.
Submit before the deadline set by your lecturer.