LAB ACTIVITY 3A Duration: 3 Hours Bootstrap + JavaScript + Validation

Build an IT Student Programme Portal using Bootstrap and JavaScript.

Students will develop a 3-page website using Bootstrap 5 (CDN) and implement DOM, event handling, validation, alert, tooltip, popover, carousel, accordion, collapse, and modal with dynamic content in script.js.

Back to Topic Jump to Steps

Important Notes

Read First
Reminder:
Ini ialah lab HTML + JavaScript. Bootstrap hanya digunakan untuk kemaskan UI dan mengaplikasikan komponen seperti carousel, modal, tooltip, popover, accordion, dan collapse. Semua logic mesti dibuat dalam script.js.
  • Guna addEventListener() untuk event handling.
  • Jangan guna inline JavaScript seperti onclick.
  • Validation mesti dibuat dalam JavaScript.
  • Output mesti dipaparkan dalam UI, bukan console sahaja.
  • Modal pada page programmes mesti memaparkan maklumat menggunakan Bootstrap card.

Learning Outcomes (CLO)

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

  • Build a multi-page website using Bootstrap 5.
  • Use DOM selectors to access HTML elements.
  • Apply Bootstrap JavaScript components correctly.
  • Implement form validation using JavaScript.
  • Display alerts and dynamic content in the UI.
  • Update modal content dynamically using JavaScript.

Hardware / Software

  • Text Editor: Visual Studio Code
  • Browser: Chrome / Edge
  • Framework: Bootstrap 5.3.x (CDN)
  • Script File: script.js

Steps (Complete Step-by-Step)

Buat ikut turutan. Setiap step ada button contoh / reference di sebelah kanan.
Step 1

Create Project Folder

Create folder named:

RegNo_JS_LAB3A
Example: 10DDT23F1705_JS_LAB3A
Step 2

Create Files

  • Create index.html
  • Create registration.html
  • Create programmes.html
  • Create script.js
Checkpoint: All files can be opened without errors.
Step 3

Build Navigation Bar

Create a Bootstrap navbar on all pages with exactly 3 menu items:
  • Home
  • Registration
  • Programmes
Step 4

Build Home Page Content

In index.html, include the following:
  • Hero section with title and short portal description
  • One button with Tooltip
  • One button with Popover
  • Bootstrap Carousel with exactly 3 slides
  • One button that shows Alert in UI
  • One Collapse section
  • One Accordion section with at least 2 items
Suggested carousel topics: Software Development, Networking Technology, and Data Management.
Step 5

Build Registration Form UI

In registration.html, build a Bootstrap form with the following fields:
Form Element Requirement
Full Name Text input
IC Number Text input
Email Address Email input
Phone Number Text input
Programme Dropdown with relevant programme options
Study Mode Dropdown
Gender Radio buttons
Skills / Interests Checkboxes
Reason for Applying Textarea
Submit Button Button
Reset Button Button
Output Box Bootstrap alert area for error / success message
Step 6

Apply Form Validation in script.js

Validate the following:
Validation Rule Requirement
Full Name Cannot be empty and must not contain numbers
IC Number Must be exactly 12 digits. Example: 800808088888
Email Address Cannot be empty
Phone Number Must contain only digits (10 or 11 digits)
Programme Must be selected
Study Mode Must be selected
Gender Must be selected
Skills / Interests At least one checkbox must be selected
Reason for Applying Cannot be empty
Rule: If invalid, show Bootstrap error alert in output box and stop the function using return.
Step 7

Display Success Output

If validation is valid, display the following inside the output box:
  • Full Name
  • IC Number
  • Email Address
  • Phone Number
  • Programme
  • Study Mode
  • Gender
  • Selected Skills / Interests
  • Reason for Applying
Rule: Show the result using alert alert-success.
Step 8

Build Programmes Page

In programmes.html, include:
  • At least 3 Bootstrap cards for IT programmes
  • One button to show selected programme using Bootstrap alert
  • One button to open Bootstrap modal
  • Modal must contain a Bootstrap card
  • Accordion with at least 2 FAQ items
  • One collapse section for extra career information
Step 9

Update Modal Content Dynamically

When user clicks the details button:
  • Open the modal
  • Update the programme title
  • Update the programme description
  • Update the career information
The content inside the modal card must change based on the selected programme.
Step 10

Apply addEventListener in script.js

Use JavaScript to handle interactions for:
  • Form submission
  • Home page alert button
  • Tooltip initialization
  • Popover initialization
  • Programme selection alert
  • Modal content update
Final Step

Submission

  • Zip folder RegNo_JS_LAB3A
  • Include screenshots of Home, Registration, Programmes, error output, success output, and modal output
Upload the .zip file to CIDOS.
Submit before the deadline set by your lecturer.