SP25 BSCS MidTerm Lab

April 10, 2025 Class Quiz

Task: Dynamic Task Loader using <iframe>

Objective

In this task, you’ll enhance your E-Commerce Landing Page by creating a new page that allows users to load previous assignments and lab tasks within the same page using an <iframe>. This simulates how single-page applications dynamically load content.

What is an <iframe>?

An <iframe> (inline frame) is an HTML element used to embed another HTML page within the current page. It acts like a “window” through which users can see another web page without leaving the current one.

Example:

htmlCopyEdit<iframe src="assignment_1/index.html" width="100%" height="500px"></iframe>

This line embeds assignment_1/index.html into the current page.

Your Task

  1. Create a new page inside your lab_midterm_exam folder named: CopyEdittask_loader.html
  2. On this page, display a list of the following items:
    • Assignment 1: CV using HTML & CSS
    • Assignment 2: E-Commerce Landing Page
    • Lab Task 1: Landing Page using Bootstrap
    • Lab Task 2: Checkout Page with Validation
  3. Next to each task, add a “View” button or link.
  4. When the user clicks any link or button, use JavaScript to:
    • Load the corresponding HTML file inside an <iframe>
    • Do not redirect the whole page.
    • Update the iframe src dynamically.