================================================================
HOMEWORK 1 — Frontend Application: Recipe Finder
================================================================
Course:    Web Technologies
Topics:    Lectures 3, 4, 5 (HTML/CSS, JS/DOM, Fetch/REST)
Weight:    15% of course mark
Due:       Friday Week 7, 23:59 EAT
Submit:    Single GitHub repo URL on Moodle

----------------------------------------------------------------
BRIEF
----------------------------------------------------------------
Build a single-page Recipe Finder using HTML, CSS, vanilla JS, and a
public REST API. NO frameworks (no React, Vue, etc.).

Suggested API: TheMealDB (https://www.themealdb.com/api.php) -- free, no key.

----------------------------------------------------------------
REQUIRED FEATURES
----------------------------------------------------------------
1. Search recipes by name; show grid of results (image, title, area).
2. Filter by category (use the list-of-categories endpoint).
3. Click a recipe -> show full details: ingredients, instructions, video link.
4. "Favourites" tab (separate view) backed by localStorage.
5. Loading / Empty / Error states for every async operation.
6. Responsive: works at 360px, 768px, 1280px widths.
7. Accessible: alt on all images, labels on inputs, sufficient contrast.

----------------------------------------------------------------
TECHNICAL REQUIREMENTS
----------------------------------------------------------------
- Mobile-first CSS with at least 2 media queries
- Code split into modules: api.js, ui.js, state.js, app.js
- All async code uses async/await
- No global mutable state outside a small store object
- README with screenshots and API attribution

----------------------------------------------------------------
GRADING (100 marks)
----------------------------------------------------------------
Search + filter + details work .... 25
Favourites with persistence ....... 15
All four UI states implemented .... 10
Responsive at 3 breakpoints ....... 10
Accessibility checks .............. 10
Code organisation (modules) ....... 15
Git history + meaningful commits .. 5
README quality .................... 10

----------------------------------------------------------------
PENALTIES
----------------------------------------------------------------
Use of any frontend framework: -50
Hard-coded API key in repo: -10 (and please rotate it!)
Late submission: -10 per day, max 3 days