Features

Features

All interaction lives in js/main.js. Each feature is a small function that runs on DOMContentLoaded and bails out if its target markup is not on the page. Here is how each one works.

Login validation and redirect

The login form sits on index.html. setupLoginForm grabs the form, the username and password inputs, and a feedback element. On submit it calls preventDefault so the page does not reload, then compares the password value against a hard-coded hint string, password123.

sequenceDiagram
  participant U as Visitor
  participant F as Login form
  participant J as setupLoginForm
  participant B as Browser
  U->>F: Enter password, click Login
  F->>J: submit event (preventDefault)
  J->>J: password === "password123"?
  alt match
    J->>F: show success message
    J->>B: redirect to home.html after 600ms
  else mismatch
    J->>F: show the password hint
  end

Loading

Two things worth being honest about. The username field is marked required in the HTML, so the browser enforces that it is non-empty, but the script itself only checks the password. And nothing is stored or sent. The redirect is a plain window.location.href change, so anyone can also just open home.html directly.

Catalog search filter

setupSearchFilter runs on catalog.html. It finds the search input (#itemSearch) and every element carrying a data-item-name. On each input event it lowercases the query, then loops over the cards and toggles each one's display based on whether its name contains the query. Clearing the box brings every card back. It is a substring match on the visible product name, nothing fuzzier.

Discount flip game with Fisher-Yates shuffle

setupDiscountTiles powers discount.html. It starts from a fixed list of nine rewards (percentages off, free shipping, a gift card, and so on) and shuffles them with the shared shuffle helper.

That helper is a textbook Fisher-Yates shuffle. It copies the array, then walks from the last index down to the first, picking a random index j between 0 and the current index i and swapping the two entries:

function shuffle(arr) {
  const copy = [...arr];
  for (let i = copy.length - 1; i > 0; i -= 1) {
    const j = Math.floor(Math.random() * (i + 1));
    [copy[i], copy[j]] = [copy[j], copy[i]];
  }
  return copy;
}

Each shuffled reward gets written onto a tile's hidden back face. The game allows one reveal: the first click on any tile adds the flipped class (the CSS handles the 3D rotation) and sets pointerEvents = 'none' on every tile, which locks the grid. A revealed flag guards against repeat flips.

Auto-scrolling timeline

setupAutoScrollToggle runs on history.html. The timeline box scrolls itself with a setInterval that nudges scrollTop up by one pixel every 25 milliseconds. When it reaches the bottom it resets to the top, so the timeline loops. Scrolling starts on its own when the page loads. Clicking the box toggles between the running and stopped states by clearing or restarting the interval, and a data-scrolling attribute tracks which state it is in.

Word counter

setupWordCounts runs on every page. It reads the text inside each page's main content region, trims and splits it on whitespace, counts the non-empty pieces, and prints the total into a badge. It is a static count taken once at load, not a live editor counter.