RYUG Store

A front-end e-commerce storefront for refurbished household goods, built with plain HTML, CSS, and vanilla JavaScript.

Live demo: https://brandonrobare.github.io/ryug-store/

Overview

RYUG ("Recycle Your Ugly Gift") is a six-page storefront mockup for a shop that cleans up and resells household items. I built it for Web Programming I at Kent State (CS4-4105, Fall 2025) to practice multi-page layout, responsive design, and DOM scripting without a framework. Everything runs in the browser. There is no server, no database, and no real checkout, so the cart buttons, forms, and login are interface demonstrations rather than working transactions.

Demo

You can open the live demo or run the files locally (see Getting Started). The site opens on a login page and leads into a storefront with featured items, a searchable catalog backed by product photos in assets/, a single-flip discount game, a scrolling history timeline, and a contact form.

The catalog pulls real product imagery from the assets/ folder:

The home page also embeds a short unboxing clip (assets/box-open.mp4) to show how arrivals get inspected.

Features

Every page loads one shared script, js/main.js, which wires up five small modules on DOMContentLoaded. A module activates only when its matching markup exists on the current page.

• Login gate (index.html). The login form intercepts submit, checks the password against a hard-coded hint value (password123), and on a match writes a success message and redirects to home.html after a short delay. A miss shows the hint inline. This is client-side only and stores nothing.
• Catalog search filter (catalog.html). Typing in the search box filters the product cards live. Each card carries a data-item-name, and the filter shows or hides cards as the query changes.
• Discount flip game (discount.html). Nine reward labels get shuffled with a Fisher-Yates pass, then one is dropped onto each tile. The first click flips that tile and locks the rest of the grid, so a visitor gets a single reveal.
• Auto-scrolling timeline (history.html). The history box scrolls itself one pixel at a time and loops back to the top at the end. Clicking the box toggles the scroll on and off.
• Word counter (every page). A small badge counts the words inside each page's main content region and prints the total.

Tech Stack

• HTML5 for page structure
• CSS3 for layout, the gradient hero, the 3D tile flip, and the responsive breakpoint (css/style.css)
• Vanilla JavaScript (ES6, no framework) for all interaction (js/main.js)
• Bootstrap 5.3 via CDN for the navbar, grid, and form controls
• Static product images and one MP4 clip in assets/

Architecture

Six HTML pages share one stylesheet and one script. The pages link to each other through a common navbar, and the login page redirects into the home page on success.

graph TD
  Login[index.html<br/>Login] -->|valid password| Home[home.html<br/>Home]
  Login --> Home
  Home --> Catalog[catalog.html<br/>Catalog]
  Home --> Discount[discount.html<br/>Discount game]
  Home --> History[history.html<br/>History timeline]
  Home --> Contact[contact.html<br/>Contact]
  Catalog --> Home
  Discount --> Home
  History --> Home
  Contact --> Home
  Login -.shared.- Style[css/style.css]
  Home -.shared.- Script[js/main.js]

Loading

The single script splits into five independent setup functions plus a shared shuffle helper:

graph LR
  Init[DOMContentLoaded] --> WC[setupWordCounts]
  Init --> AS[setupAutoScrollToggle]
  Init --> LF[setupLoginForm]
  Init --> DT[setupDiscountTiles]
  Init --> SF[setupSearchFilter]
  DT --> SH[shuffle<br/>Fisher-Yates]

Loading

Getting Started

No build step and no dependencies to install. Either:

• Open the live demo, or
• Download the folder and open index.html in any modern browser to start at the login page. The hint password is password123. You can also open home.html directly to skip the login gate.

A local web server is not required, though serving the folder (for example with python -m http.server) avoids any file-path quirks with the embedded video.

Project Structure

ryug-store/
├── index.html        # Login gate (entry point)
├── home.html         # Storefront homepage + featured items + video
├── catalog.html      # Product grid, search filter, specs table, newsletter form
├── discount.html     # Single-flip discount game
├── history.html      # Auto-scrolling timeline
├── contact.html      # Contact form and policies
├── css/
│   └── style.css     # All styling, animations, responsive rules
├── js/
│   └── main.js       # Five interaction modules + shuffle helper
└── assets/           # Product photos, poster image, box-open.mp4

Roadmap

This is a front-end mockup, so the obvious next steps all involve adding a back end:

• Real authentication instead of a hard-coded password check
• A working cart with persistence (localStorage first, then a server)
• Form submissions that actually send (contact and newsletter currently do nothing)
• Product data loaded from a file or API rather than hard-coded markup
• Alt text and keyboard handling passes to tighten accessibility

Author & Acknowledgments

Built by Brandon Robare as coursework for Web Programming I (CS4-4105) at Kent State University, Fall 2025. The unboxing clip comes from Pexels.

License

Released under the MIT License. See the LICENSE file, or the project Wiki for more detail.