JavaScript Enhancements

Enhancement 1: Product Comparison Panel

What it does

Lets users select up to three home theatre systems and view their key features side-by-side in a slide-up comparison panel.

How to trigger (Interaction)

  1. Open the Products page.
  2. Click the Compare button beneath a product heading to add it to the panel (click again to remove).
  3. Up to three products can be compared at once. Click Close to reset.

Where implemented

  • Page: product.html
  • Script: scripts/enhancements.js (section header: "Enhancement 1: Product Comparison Panel")

Why it exceeds the basics

  • Provides meaningful e-commerce interactivity beyond form validation.
  • Implements dynamic DOM generation using vanilla JS only (no libraries).
  • Keeps code lightweight (40–50 lines core logic).

Accessibility & UX

  • Uses simple buttons for keyboard accessibility.
  • Clear affordances: "Compare" toggles to "Remove", and a persistent "Close" action resets the state.

References

Marker demo steps

  1. Click Compare on Aurora, Nexus, and Essence.
  2. Observe three side-by-side cards in the bottom panel with features and price.
  3. Click Close to hide the panel and reset all buttons to Compare.

Note: The panel content is built directly from each product section's DOM to avoid text-matching issues.

Enhancement 2: Room Size Audio Planner

What it does

Suggests the best system for a user's room size and automatically updates the enquiry form: selects the recommended product, checks suitable features, and triggers a real-time total update.

How to trigger (Interaction)

  1. Open the Enquire page.
  2. Choose a value in the Room Size dropdown (Small / Medium / Large).
  3. Watch the Product dropdown and recommended features update automatically, along with the Estimated Total.

Where implemented

  • Page: enquire.html (Room Size field + recommendation message container)
  • Script: scripts/enhancements.js (section header: "Enhancement 2: Room Size Audio Planner")

Why it exceeds the basics

  • Adds a personalised, domain-relevant planner (not generic validation).
  • Integrates with the site's existing price calculator to update totals live.
  • Lightweight logic (30-40 lines).

Accessibility & UX

  • Recommendation message uses aria-live="polite" for screen reader announcements.
  • Preserves any previously selected options and only adds suggested features.

References

Marker demo steps

  1. Select Small → "Essence Series" + Smart Hub is recommended; total updates.
  2. Select Medium → "Nexus Series" + Wireless Rears; total updates.
  3. Select Large → "Aurora Series" + Wireless Rears + Professional Calibration; total updates.

Note: Implemented with vanilla JS; no external libraries used.

Summary

Both enhancements are coded in scripts/enhancements.js with clear header comments,(no libraries; vanilla JS; 30–50 lines each), and add meaningful, domain-specific interactivity.