How kareem-hany-77/food-recipes-website works
Step by Step is a static home-cooking recipe website: visitors browse or search recipes, open a recipe, and follow its ingredient checklist and cooking steps. The main runtime layer is a dependency-free script that adds saved progress, progress indicators, cook mode, printing, menu behavior, and recipe-list filtering to the HTML pages. The README documents these capabilities and page roles; only app.js was sampled, so connections between particular HTML pages and its DOM behaviors are not independently verified in source excerpts.
Main entry points: app.js Recipe checklist · index.html Home page · koshari.html Recipe pages · advices.html Cooking advice
Components 16
Website pages
- Home page
index.html - Recipe pages
koshari.html - Cooking advice
advices.html - Videos
vid.html
Recipe discovery
- All recipes
recipes.html - Course pages
main.html - Search and filters
app.js - Surprise me
app.js
Cooking experience
- Recipe checklist
app.js - Progress and next step
app.js - Cook mode
app.js - Print action
app.js
Browser runtime
- Mobile navigation
app.js - Browser storage
- Screen wake lock
Other components
- Visitor
Connections 16
- Visitor → Home page: opens
README.md - Visitor → All recipes: browses
README.md - Visitor → Course pages: filters by course
README.md - Visitor → Recipe pages: opens recipe
README.md - Visitor → Cooking advice: reads
README.md - Visitor → Videos: views
README.md - Visitor → Search and filters: searches
README.md - Visitor → Recipe checklist: checks items
README.md - Recipe checklist → Browser storage: saves progress
app.js - Browser storage → Recipe checklist: restores progress
app.js - Recipe checklist → Progress and next step: updates
app.js - Visitor → Cook mode: toggles
app.js - Cook mode → Screen wake lock: requests screen lock
app.js - Visitor → Print action: prints recipe
app.js - Visitor → Mobile navigation: opens menu
app.js - Visitor → Surprise me: requests recipe
app.js