Lab 1

Dynamic Content Creation

Lab Overview

In this lab, you will create a dynamic shopping cart application to practice and reinforce your DOM manipulation skills. The application will allow users to add, update, and remove items dynamically while keeping track of the total price. This lab focuses on modifying elements, creating and appending new elements, and updating content dynamically using JavaScript.

Workplace Context

Imagine you are tasked with building the shopping cart feature for an e-commerce website. Customers should be able to:

Add items to their cart dynamically.
View the items they have added, along with their prices and quantities.
Update the quantity of items in the cart, reflecting real-time price changes.
Remove items from the cart.

This lab will help you simulate and build core functionality used in modern e-commerce applications.

Objectives

By the end of this lab, you will:

Dynamically create and manipulate DOM elements to build interactive features.
Update the DOM to reflect changes in user input, such as quantity updates and price calculations.
Use event handling to implement interactivity for adding, updating, and removing items.
Use efficient DOM manipulation techniques to minimize performance bottlenecks.

Instructions

Setup the Project

Create a new folder named dynamic-shopping-cart.
Inside the folder, create the following files:
- index.html
- styles.css
- script.js

Build the HTML Structure

Include the following base HTML structure in your index.html file:


<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <link rel="stylesheet" href="styles.css">
  <title>Dynamic Shopping Cart</title>
</head>
<body>
  <h1>Dynamic Shopping Cart</h1>
  <div id="product-container">
    <input type="text" id="product-name" placeholder="Product Name">
    <input type="number" id="product-price" placeholder="Product Price">
    <button id="add-product">Add Product</button>
  </div>
  <ul id="cart"></ul>
  <h3>Total: $<span id="total-price">0</span></h3>
 
  <script src="script.js"></script>
</body>
</html>

Style the Application

Add some basic styles in styles.css:


body {
  font-family: Arial, sans-serif;
  margin: 20px;
  line-height: 1.6;
}
 
#product-container {
  display: flex;
  gap: 10px;
  margin-bottom: 20px;
}
 
#cart {
  list-style: none;
  padding: 0;
}
 
.cart-item {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 10px;
}
 
.cart-item span {
  flex: 1;
}
 
.cart-item button {
  margin-left: 10px;
}

Optionally, you can use Bootstrap or Tailwind to style your application.

Implement the JavaScript

Implement the core functionality in script.js. Below, we have included a starting point, but you can modify it to fit your needs.


const productNameInput = document.getElementById('product-name');
const productPriceInput = document.getElementById('product-price');
const addProductButton = document.getElementById('add-product');
const cart = document.getElementById('cart');
const totalPriceSpan = document.getElementById('total-price');
 
let totalPrice = 0;
 
// Function to update the total price
function updateTotalPrice(amount) {
  totalPrice += amount;
  totalPriceSpan.textContent = totalPrice.toFixed(2);
}
 
// Function to remove an item
function removeItem(event) {
  const item = event.target.closest('li');
  const price = parseFloat(item.dataset.price);
  updateTotalPrice(-price);
  item.remove();
}

Activity Tasks

Add Products:
- Test adding products with different names and prices.
- Ensure each product appears in the list with the correct price.
Remove Products:
- Test removing products from the cart.
- Verify that the total price updates accurately after removing items.
Edge Cases:
- Attempt to add products with empty names or invalid prices and ensure the application handles these cases gracefully.
Enhance the App (Optional):
- Allow users to update the quantity of products in the cart and recalculate the total price.

Reflection Questions

How did you dynamically create and append new elements to the DOM?
What steps did you take to ensure accurate updates to the total price?
How did you handle invalid input for product name or price?
What challenges did you face when implementing the remove functionality?

Submission

Submit your project via a GitHub repository using the Start Assignment link on Canvas.