1. Context
• Client: Print it, a family-run printing company looking to make its static website more engaging.
• Team: Artdantech, Lucien (director, providing requirements via an explanatory video).
• Deliverables: a working homepage carousel matching expectations (arrows, bullet points, infinite loop, synchronized image/text), code integrated into the site repository.
• Starting point: existing page and CSS, provided assets (arrow_left.png, arrow_right.png, slider images), script.js with a slides array.
2. Need
• Add a dynamic carousel to browse visuals (left/right), show position using bullets, loop continuously, and display a slide-specific tagLine.
• Keep the existing design system and styles (reuse current CSS classes, do not break the layout).
3. Client / Audience
• Print it website visitors (desktop and mobile) discovering the offer through an interactive visual experience.
• Lucien (validation of a simple, clear UX aligned with the video requirements).
4. Goals
4.1 Functional
• Arrow navigation (previous/next).
• Dynamically generated bullets with a clear active state.
• Synchronized image + text (tagLine) on every slide change.
• Infinite loop: wrap to start/end without errors.
4.2 Technical
• HTML: insert arrows inside the banner/slider, provide a container for bullets, keep semantic structure.
• CSS: reuse existing classes for arrow/bullet positioning (no major styling changes).
• Vanilla JavaScript: arrow listeners, bullet generation from slides[], current index management, DOM updates, infinite loop logic.
5. Constraints / Challenges
• Respect existing CSS (classes/positions already defined for arrows and bullets).
• Robustness: no boundary/index errors, same behavior across modern browsers.
• Accessibility: keyboard support and ARIA attributes for arrows; alt text for images; visible focus.
• Maintainability: clean code, minimal globals, isolated logic (pure functions when possible).
6. Process / Methodology
6.1 Analysis
• Review provided HTML/CSS: locate the banner, image container, and expected arrow/bullet hooks (e.g. .arrow, .arrow_left, .arrow_right, .dots, .dot_selected).
• Inspect script.js: confirm the data structure slides = [{ image: '...', tagLine: '...' }, …].
6.2 Breakdown into GitHub issues
• Insert arrows into the DOM (HTML).
• Add event listeners (left/right) + quick tests (console logs).
• Generate bullets dynamically from slides.length and manage active state.
• Implement slide switching logic (image + tagline + active bullet).
• Infinite loop (wrap-around) + edge cases (single slide, missing images).
• Add keyboard/ARIA accessibility + remove debug logs + final tests.
6.3 Architecture & logic
• Repo structure (example): see GitHub repo.
• Data: const slides = [{ image: 'slide1.jpg', tagLine: 'Text <span>highlight</span>' }, …];
• State: let current = 0;
• Core functions:
` - renderDots(): create N bullets, add .dot_selected to the first, click → goTo(i).
- updateSlide(): update image src, update .tagline innerHTML, update bullet active state.
- next(): current = (current + 1) % slides.length; updateSlide().
- prev(): current = (current - 1 + slides.length) % slides.length; updateSlide().
- goTo(i): current = i; updateSlide().
`
• Listeners: .arrow_right.addEventListener('click', next); .arrow_left.addEventListener('click', prev); optional: keydown (ArrowRight/ArrowLeft).
6.4 Technical choices (rationale)
• Vanilla JS is sufficient: small scope, full DOM control without dependencies.
• Infinite loop via modulo: simple, reliable, avoids heavy conditional logic.
• Dynamic bullets: no maintenance when slides are added/removed.
• Accessibility: arrows as <button> with aria-label; bullets focusable if clickable; keyboard interactions supported.
6.5 Main flows
• Right arrow click: active bullet → next, image + tagline update; at the end → wraps to first.
• Left arrow click: same in reverse; at the start → wraps to last.
• Bullet click: jump directly to target index and update image/text/active state.
6.6 Tests & quality
• Lightweight manual checks: index changes, wrap-around, synced image/text/bullets, random bullet jumps, rapid clicking.
• Accessibility: keyboard navigation (Tab + Enter/Space; Arrow keys if implemented), visible focus, meaningful image alt text; existing contrast preserved by current CSS.
• Validation: W3C HTML/CSS, clean console (no errors), modern browser compatibility.
7. Analysis
• Separating data (slides), state (current), and rendering (updateSlide) keeps the carousel simple, extensible, and robust. Dynamic dot generation removes a common source of errors (incorrect dot count).
8. Technical decisions
• Modern DOM APIs (querySelector, classList), standard events, modulo wrap-around, controlled innerHTML for rich tagLine content (from a trusted local array).
• Progressive enhancement: keyboard controls as a bonus, no framework dependency.
9. Resolution logic
• Add arrows (HTML) → wire listeners (JS) → generate bullets (slides.length) → implement navigation (updateSlide) → add wrap-around → finalize a11y + tests.
10. Stack used
• HTML5 (slider structure, buttons, containers).
• Existing CSS (arrow positioning, bullet styling, built-in responsive layout).
• JavaScript ES6+ (script.js), no framework, browser DevTools.
11. Final result
• Dynamic, smooth, accessible carousel: interactive arrows, synchronized bullets, infinite loop, consistent image and tagLine updates.
• Integration preserves existing styling; clean, maintainable code ready for demo to Lucien and deployment on the Print it site.