SP26 Web Midterm SP24-BCS-A

April 7, 2026 Class Quiz Web Technologies Course

Task: Modify your existing e-commerce landing page to include a “Featured Deals” section that pulls data dynamically.

  1. AJAX Integration: Use a jQuery AJAX call to fetch product data from a public API (e.g., https://fakestoreapi.com/products?limit=4).
  2. DOM Manipulation: Instead of hard-coding products, clear your current product container and inject the data received from the API into your CSS-styled cards.
  3. Interaction: Add a “Quick View” button to each card. When clicked, it should trigger a modal/popup (created with CSS/JS) that displays the product’s full description and rating without refreshing the page.
  4. Responsive Fix: Ensure that the dynamically injected cards maintain the responsiveness you built in your original project.