Recipe Finder — Web Application
A responsive Recipe Finder web application built using HTML, CSS, and JavaScript.
This project was developed incrementally during an internship and extended to demonstrate practical frontend development skills, UI design, and API integration.
The project focuses on building interactive, user-friendly web interfaces using core web technologies.
Features
- Search and display recipes using an external API
- Responsive design for mobile, tablet, and desktop
- Clean navigation and structured layout
- Image carousel and gallery components
- Interactive To-Do / Notes application with localStorage
- Product listing page with filtering and sorting
- Interactive quiz module
Tech Stack
- HTML5 — semantic structure and layout
- CSS3 — Flexbox, Grid, media queries
- JavaScript (ES6) — DOM manipulation, events, API handling
- Browser APIs — Fetch API, localStorage
Project Structure (simplified)
/
├── index.html # Main entry / portfolio home
├── recipes.html # Recipe search and API integration
├── carousel.html # Image carousel
├── quiz.html # Interactive quiz
├── todo.html # To-do / notes app
├── products.html # Product listing with filters
├── style.css # Shared styles
├── script.js # Shared JavaScript logic
├── carousel.js # Carousel functionality
├── quiz.js # Quiz logic
Getting Started
-
Clone the repository
git clone https://github.com/23f3000678/special-spork.git -
Open index.html in your browser
-
Navigate through the pages to explore different features
No backend setup or build tools are required.
Learning Outcomes
- Building responsive layouts using CSS Grid and Flexbox
- Writing modular and reusable JavaScript
- Handling user interactions and events
- Fetching and displaying data from external APIs
- Managing client-side state using localStorage
- Structuring and organizing multi-page frontend projects
Notes
This project was created as a learning-focused web application during an internship.
It demonstrates frontend fundamentals and hands-on experience with real-world UI features rather than production-level optimization.
:D