Kei-K23 / super-meal

superMeal website is designed to allow users to search for delicious meals and view random meal suggestions. It fetches data from the TheMealDB API to retrieve meal information and display it to the user. The main purpose for creating this website was only for hobby, joy and want to create something with my knowledge.

Home Page:https://supermeal-79083.firebaseapp.com/

Geek Repo:Geek Repo

Github PK Tool:Github PK Tool

superMeal

This project is a web application that allows users to search for meals and view their details. It utilizes the MealDB API to fetch meal data.

Features

  • Random Meal Generator: Users can click the "More Meals" button to generate random meals and display them on the page.
  • Search by Meal Name: Users can search for meals by entering a meal name in the search bar and submitting the form. The application will fetch and display meals matching the search query.
  • Meal Details: Users can double-click on a meal item to view its detailed information, including ingredients, instructions, and a YouTube link (if available).
  • Favorites: Users can mark meals as favorites by checking the heart-shaped checkbox next to the meal item. The favorite meals are stored in local storage and can be accessed in the favorites section.

Technologies Used

  • HTML
  • CSS
  • JavaScript
  • axios library
  • Aos library
  • Swiper library
  • Vite
  • Firebase Hosting
  • FontAwesome

Usage

  • Enter a meal name in the search box and press Enter or click the search button to search for meals.
  • Click on a meal item to view its details.
  • To add a meal to your favorites, click on the heart icon beside the meal item.

Notes

  • The project uses the MealDB API to fetch meal data. Please ensure that you have a stable internet connection to properly use the application.
  • The application utilizes local storage to store favorite meals. The favorites will persist even after refreshing the page or closing the browser.

Acknowledgements

Contributing

Contributions to this project are very welcome. I sure my code base is really dummy and duplicate code including. Here are some ways you can contribute:

  • Report bugs or suggest features by opening an issue.
  • Submit pull requests with bug fixes, feature implementations, or code improvements.

Please make sure to follow the existing code style and adhere to the project's coding conventions.

About

superMeal website is designed to allow users to search for delicious meals and view random meal suggestions. It fetches data from the TheMealDB API to retrieve meal information and display it to the user. The main purpose for creating this website was only for hobby, joy and want to create something with my knowledge.

https://supermeal-79083.firebaseapp.com/


Languages

Language:CSS 40.0%Language:JavaScript 30.9%Language:HTML 29.1%