The Gentleman

This project was commissioned as a comprehensive JavaScript Assignment for UCD. The objective was to design, develop, and host a fully functional web project from scratch without relying on heavy frontend frameworks. The focus was strictly on demonstrating a deep, fundamental understanding of web technologies.

The technical requirements were rigorous: a semantic HTML structure, responsive CSS utilizing media queries, and crucial interactive elements. Specifically, the brief mandated at least one form processed by a custom JavaScript function, and a minimum of three distinct interactions involving complex Document Object Model (DOM) manipulation. The final deliverable had to be deployed flawlessly via GitHub Pages.

The visual identity was crafted to reflect heritage, craftsmanship, and elegance. When designing the logo, I drew inspiration from traditional, old-style emblems. Research into vintage logos revealed a consistent trend of intricate details communicating refinement, which perfectly aligned with the brand's homage to classic ideals of masculinity.

I deliberately limited the color palette to three hues to maintain a clean aesthetic: a sophisticated Deep Green (#262E19) for a timeless feel, paired with a Soft Cream (#FFFBF2) to add contrast and warmth. For typography, I selected Montserrat as the primary typeface for its modern readability, complementing it with Literata for a classic, literary tone in headings, and Great Vibes to introduce a subtle touch of bespoke luxury.

Before writing a single line of code, I dedicated the first week of the 4-week timeline entirely to strategy and wireframing in Figma. I began by establishing a clear sitemap—a foundational blueprint that ensured the user journey from "Home" to "Categories" to "Checkout" was seamless. I firmly believe a site's UX strategy should be invisible to the user, but fully intentional to the developer.

During this phase, I carefully considered layout, functionality, and feasibility, planning for responsiveness across devices. I evaluated technical considerations such as navigation styles, font sizing, and how interactive elements would behave on mobile versus desktop viewports.

To fulfill the UCD brief's requirement for advanced DOM manipulation, I engineered a robust, dynamic e-commerce architecture entirely in Vanilla JavaScript.

1. State Management & Data Persistence:
I engineered custom "Add to Cart" and "Add to Favourites" functionalities utilizing the browser's localStorage API. By deploying querySelectorAll, event listeners were attached to the product UI (Star and Bag icons). Upon clicking, the script traverses the DOM, extracts the specific product's name, price, and image data, and pushes it into a JSON array in local memory. To ensure data integrity, I implemented array methods to actively scan for existing items, effectively preventing cart duplication and alerting the user if an item is already saved.

2. Dynamic Calculations & The Cart Engine:
The Cart and Favourites pages demonstrate heavy algorithmic DOM manipulation. The script dynamically loops through the localStorage array to generate HTML elements via createElement. On the Cart page, to calculate live totals, I used regular expressions (/[^0-9,.]/g) to strip currency symbols from the stored string data, parsed them into floats, multiplied them by user-adjusted quantities, and recalculated the live subtotal. This total dynamically updates the DOM instantly when users interact with the shipping radio buttons (e.g., adding €10 for Flat Rate shipping).

3. Advanced Multi-Layered Filtering:
On the Shop page, I built a complex filtering system. Products feature custom HTML data attributes (slider-price, color, season). I implemented a global applyFilters() function that listens to the price range slider and radio buttons simultaneously. It reads the inputs, updates visual labels dynamically via textContent, and loops through every .whats-new-products-card, altering their style.display to hide or show cards that match the exact cross-section of the user's criteria.

4. Functional UI Components & Form Validation:
To address UX frustrations with standard infinite scrolls, I built a custom math-based carousel for the "What's New" and "Best Sellers" sections. Using the scrollTo method, the carousel calculates the exact pixel width of the product cards to snap to the correct position, while a dynamic counter updates the user's progress (e.g., "1 of 5"). During development, I debugged a critical issue where carousel scrolling unexpectedly snapped the page to the top; identifying a shared class name conflict between the header and the carousel allowed me to quickly patch the behavior.

Finally, fulfilling the form requirement, the Contact page utilizes event.preventDefault() to hijack the native form submission. It captures input data securely via document.getElementById().value, utilizes template literals to generate a personalized confirmation alert (e.g., "Thank you for reaching out to the Gentleman, [First Name]..."), and clears the fields using the .reset() method.