Flavor Hub

Menus and reviews from JSON

The page fetches `meals.json`, `menu.json`, `recipes.json` and `reviews.json` to populate cards rather than hard-coding every item into HTML.

Light and dark themes

CSS custom properties define the palettes. JavaScript checks the system theme, reads a saved choice and switches the root `data-theme` attribute.

Responsive navigation

A menu button opens navigation on narrow screens, and the active link changes as visitors scroll between sections.

Fetch local content files

Small asynchronous functions load JSON and create the corresponding meal, menu and review markup on the page.

CSS variables for themes

Color values live in CSS custom properties. A root `data-theme` attribute controls the alternate palette.

Scroll-based section highlighting

The script compares the scroll position with section offsets to update the active navigation link.

Build a theme without a UI framework

Problem: The same sections need readable colors in both light and dark modes.

Solution: The JavaScript toggle changes one data attribute and saves the choice; CSS variables provide the different colors.

Keep sample content editable

Problem: Meal cards, menus and reviews would be tedious to maintain as repeated markup.

Solution: Their data lives in JSON files that the page fetches and renders into sections.