v4.0 Part 3 - Functionality & JavaScript
Interactive Elements + Dynamic Content
2.1 Interactive Elements
- Accordions, Tabs, Modals (jQuery): Implemented using jQuery 3.7.1 - Accordion toggles max-height with animation, Tabs switch panels with fadeIn, Modals open/close with backdrop blur, slideUp animation. Found in index, about, contact, cart pages.
- Interactive Maps (Leaflet): Leaflet 1.9.4 + CARTO dark tiles - Map shows Durban (-29.8587,31.0218) home location + NYC HQ (40.7128,-74.0060) + polyline connecting. Custom divIcon markers with neon colors #00E5FF #FFB700 #FF6A00. Location-based feature. In contact.html #map div.
- Animations & Transitions (CSS+JS): Scroll reveal via IntersectionObserver (.reveal.active), stagger items with delay, float animation 6s infinite, loader dots bounce, modal slideUp 0.4s, lightbox zoomIn, accordion max-height 0.4s, toast slide. All combined.
- Advanced DOM Manipulation: Dynamic product loading via innerHTML, stagger delay calculation i*60ms, event delegation for dynamically added buttons, localStorage cart count update, char count live update, toast creation, tab re-trigger animations, map marker creation via JS loop.
- Gallery with Lightbox: .lightbox-trigger class on all images - click opens #lightbox overlay with backdrop blur 12px, zoomIn animation, caption from alt attribute, close on overlay click or ESC. In index, games, about.
2.2 Dynamic Content
- Dynamically Load Content: productsData array of 8 products in script.js - loadProducts() function filters and renders via JS after 400ms simulated loading with loader dots. Products container #productsContainer filled dynamically. Also posts concept similar for games.
- Search & Filter: Store: #searchInput filters by name lowerCase includes, filter tags data-filter all/games/apparel/gear. Games: #gameSearch filters .game-card by textContent includes. No results message .no-results.show when visible==0. Real-time on input event.
Libraries Used
- jQuery 3.7.1 CDN for accordions/tabs/modals
- Leaflet 1.9.4 + CARTO dark tiles for maps
- Vanilla JS for DOM, IntersectionObserver, localStorage