A modern, responsive recipe finder web application that helps users discover recipes by searching for dish names. Built with vanilla HTML, CSS, and JavaScript.
- Recipe Search - Search for recipes by dish name using TheMealDB API
- Detailed Recipe Information - View ingredients, cooking instructions, and recipe videos
- Popular Recipes Carousel - Browse trending recipes in an interactive carousel
- Responsive Design - Optimized for mobile, tablet, and desktop devices
- Accessibility - WCAG compliant with ARIA labels and semantic HTML
- Modern UI - Clean, human-made design with smooth animations and transitions
- Frontend: HTML5, CSS3, Vanilla JavaScript
- API: TheMealDB (free recipe database)
- Libraries:
- ScrollReveal - Scroll animation library
- Boxicons - Icon library
- Clone the repository
git clone https://github.com/TAJAMUL11/RecipeFinder.git
cd Recipe_app- The application uses an external API (TheMealDB) which doesn't require authentication.
- Push your repository to GitHub
- Go to repository Settings → Pages
- Select the branch (usually
main) as the source - Your application will be available at
https://yourusername.github.io/Recipe_app
Note: The .env file included in the project is for documentation purposes. Since this is a static site, no server-side environment variables are needed. The API configuration is handled in config.js.
Recipe_app/
├── index.html # Main HTML file
├── style.css # Stylesheet
├── script.js # Main JavaScript logic
- Chrome/Edge (latest)
- Firefox (latest)
- Safari (latest)
- Mobile browsers (iOS Safari, Chrome Mobile)
- Semantic HTML structure
- ARIA labels and roles
- Keyboard navigation support
- High contrast color scheme
- Alt text for all images
- Search for Recipes: Enter a dish name in the search box and click "Search"
- View Details: See ingredients, cooking method, and nutritional info
- Watch Videos: Click "Watch on YouTube" to see video tutorials
- Browse Popular: Swipe through popular recipes in the carousel section
- The site is fully static and loads quickly
- CSS animations use hardware acceleration
- Images are optimized for web
- No build process needed - works out of the box
- Primary Green:
#2a5846 - Accent Green:
#0c9a61 - Text Color:
#1a1a1a - Background:
#ffffff
- Headlines: Outfit
- Body: Poppins (sans-serif)
Copyright © 2026 Tajamul Wani. All rights reserved.
- Email: thetj4054@gmail.com
- LinkedIn: Tajamul Wani
- GitHub: TAJAMUL11
Last Updated: March 2026