JavaScript — Search, Shopping Cart, Video & Maps

C1 — Site-specific features, where they're actually relevant

Not every website needs every feature in this lesson — the SOW is deliberately worded "where applicable." An informational site (like GlowFit Gym's class timetable) has no reason to build a shopping cart; GreenLeaf Organic Foods, which sells produce, genuinely does. Decide what your own site's brief actually calls for before building any of these.

Search / filter

This reuses the exact filtering pattern from Lesson 20, applied to a search bar rather than a product list:

document.querySelector("#site-search").addEventListener("input", (e) => {
  const term = e.target.value.toLowerCase();
  document.querySelectorAll(".searchable").forEach((item) => {
    item.hidden = !item.textContent.toLowerCase().includes(term);
  });
});

Shopping cart — relevant where the site sells something

Keep this introductory: a real cart (stock levels, checkout, payment) is a substantial system in its own right — here, the goal is just the core JavaScript pattern of adding an item and keeping a running count.

<button class="add-to-cart" data-name="Vegetable Box" data-price="12">Add to basket — £12</button>
<p id="cart-summary">Basket: 0 items, £0</p>

let cartCount = 0;
let cartTotal = 0;

document.querySelectorAll(".add-to-cart").forEach((btn) => {
  btn.addEventListener("click", () => {
    cartCount += 1;
    cartTotal += Number(btn.dataset.price);
    document.querySelector("#cart-summary").textContent = `Basket: ${cartCount} items, £${cartTotal}`;
  });
});

Video control and video backgrounds

<video id="promo-video" src="vid_welcome.mp4"></video>
<button id="play-pause">Play</button>

const video = document.querySelector("#promo-video");
document.querySelector("#play-pause").addEventListener("click", () => {
  video.paused ? video.play() : video.pause();
});

A video background is technically the same <video> element, just styled with CSS to fill the background of a section and given the autoplay, muted and loop attributes — browsers only allow autoplay when the video is muted, so a background video with sound is not possible without the visitor choosing to unmute it themselves.

Embedding an interactive map

<iframe
  src="https://www.google.com/maps/embed?pb=EXAMPLE_EMBED_CODE"
  width="600"
  height="450"
  style="border:0"
  loading="lazy">
</iframe>

Google Maps' "Share → Embed a map" option generates this exact <iframe> snippet for any address — no JavaScript is needed, just pasting the generated src URL in. Use your own site's address (or a placeholder, if your chosen brand doesn't need a real one) rather than copying a real business's actual location.

If you're trying this in the Coding Lab specifically, note that embedded iframes loading external content may behave differently inside a sandboxed practice environment than on a real, published page — if the map doesn't render there, that reflects the practice environment, not an error in the technique itself.

Task

Looking at your own site's brief, decide which of search, cart, video and map are genuinely relevant — implement the ones that are, and write one sentence justifying why you left out any that you did.