Skip to content

A JavaScript-based recipe application that allows users to search for recipes, view detailed recipe information, adjust servings, bookmark favorite recipes, and upload their own recipes. Features include dynamic content rendering, responsive design, and an intuitive user interface.

License

Notifications You must be signed in to change notification settings

TSWanniarachchi/forkify

Folders and files

NameName
Last commit message
Last commit date

Latest commit

 

History

1 Commit
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 

Repository files navigation

Forkify Recipe Application

Description

Forkify Recipe Application is a modern web application that allows users to search for recipes, view detailed recipe information, adjust servings, bookmark their favorite recipes, and even upload their own recipes. This application provides a seamless user experience with dynamic content rendering and responsive design.

How to Use

  1. Search for Recipes:
    • Enter an ingredient or recipe name in the search bar at the top of the page.
    • Click the search icon or press Enter to retrieve a list of matching recipes.
    • The results will be displayed with images and brief descriptions.
  2. Pagination:
    • Use the pagination controls at the bottom of the results to navigate through multiple pages of recipes.
  3. View Recipe Details:
    • Click on any recipe from the search results to view detailed information.
  4. Adjust Servings:
    • Use the "+" and "-" buttons to adjust the number of servings for the selected recipe.
    • The ingredient quantities will automatically adjust according to the selected serving size.
  5. Bookmark Recipes:
    • Click the bookmark icon on a recipe to save it to your favorites.
    • Access your bookmarked recipes anytime from the bookmarks menu.
  6. Upload Your Own Recipe:
    • Click the "Add Recipe" button to open the upload form.
    • Fill in the required fields, including title, ingredients, and cooking instructions.
    • Click the "Upload" button to add your recipe to the application.

Features

  • Recipe Search: Search for recipes using keywords or ingredients.
  • Recipe Details: View detailed information including ingredients, cooking time, and steps.
  • Serving Adjustment: Dynamically adjust ingredient quantities based on the number of servings.
  • Bookmarking: Save and manage your favorite recipes.
  • Recipe Upload: Upload your own recipes with custom details.
  • Responsive Design: The application is optimized for various screen sizes.

Technologies Used

  • HTML5
  • CSS3 (SASS)
  • JavaScript (ES6+)
  • Parcel
  • Babel
  • Core-JS
  • API Integration
  • MVC Architecture

Getting Started

To run the application locally, follow these steps:

  1. Clone this repository to your local machine.
  2. Install dependencies using npm install.
  3. Start the development server using npm start.
  4. Open the application in your browser at http://localhost:1234.

License

This application is licensed under the MIT License - see the LICENSE file for details.

Disclaimer

This application is for educational purposes and personal use. The code provided is open-source, and you are free to use, modify, and distribute it as per the license agreement.

Enjoy your cooking journey with Forkify Recipe Application! 🍽️👨‍🍳

About

A JavaScript-based recipe application that allows users to search for recipes, view detailed recipe information, adjust servings, bookmark favorite recipes, and upload their own recipes. Features include dynamic content rendering, responsive design, and an intuitive user interface.

Topics

Resources

License

Stars

Watchers

Forks

Releases

No releases published

Packages

No packages published