https://github.com/martinezfabian/foodrecipeapp-javascript-html-css

The main goal of this project is to apply knowledge of Promises and the Fetch API in JavaScript to create a responsive and interactive recipe search application.
https://github.com/martinezfabian/foodrecipeapp-javascript-html-css

fetch-api foodrecipe promises recipe-app recipe-website

Last synced: 25 days ago
JSON representation

The main goal of this project is to apply knowledge of Promises and the Fetch API in JavaScript to create a responsive and interactive recipe search application.

• Host: GitHub
• URL: https://github.com/martinezfabian/foodrecipeapp-javascript-html-css
• Owner: MartinezFabian
• Created: 2023-06-20T22:00:26.000Z (over 1 year ago)
• Default Branch: main
• Last Pushed: 2023-06-26T01:00:10.000Z (over 1 year ago)
• Last Synced: 2023-08-21T00:03:26.298Z (over 1 year ago)
• Topics: fetch-api, foodrecipe, promises, recipe-app, recipe-website
• Language: JavaScript
• Homepage: https://martinezfabian.github.io/FoodRecipeApp-JavaScript-HTML-CSS/
• Size: 198 KB
• Stars: 0
• Watchers: 1
• Forks: 0
• Open Issues: 0
• Metadata Files:
  • Readme: README.md

Awesome Lists containing this project

README

        
# Food Recipe App

## Description

FoodRecipeApp is a recipe search application built using JavaScript, HTML, and CSS. It allows users to search for various food recipes based on different categories. The project follows a mobile-first approach and utilizes the BEM methodology for CSS styling.

The application consists of a homepage and a "My Recipes" page. On the homepage, users can select a food category from a dropdown menu. Based on the selected category, the app presents a list of dishes belonging to that category. Clicking on the "View Recipe" button opens a modal window displaying the recipe instructions, a list of ingredients with their quantities, and a link to a YouTube video demonstrating how to prepare the recipe. Users also have the option to add a recipe to their favorites by clicking the "Add to Favorites" button. Conversely, they can remove a recipe from their favorites using the "Remove from Favorites" option.

The main goal of this project is to apply knowledge of Promises and the Fetch API in JavaScript to create a responsive and interactive recipe search application.

## Technologies Used

- JavaScript

- HTML

- CSS (Mobile-first approach, BEM methodology)

## Features

- Recipe search based on food categories

- Recipe details including instructions, ingredients with quantities, and a video link

- Add recipes to favorites

- Remove recipes from favorites

## Usage

1. Use the dropdown menu on the homepage to select a food category.

2. Browse through the displayed recipes and click on "View Recipe" to see the details.

3. In the recipe modal, you can view instructions, ingredients, and watch a video related to the recipe.

4. To add a recipe to your favorites, click the "Add to Favorites" button.

5. To remove a recipe from your favorites, use the "Remove from Favorites" option.

## Online Demo

An online demo of the FoodRecipeApp can be accessed at [Demo Link](https://martinezfabian.github.io/FoodRecipeApp-JavaScript-HTML-CSS/).