whats-your-flavorite: An HTML repository from young8179

📖 About the project

Our website design, "What's Your Flavorite", was built on providing two major functionalities. First, providing the user the ability to input the grocery items they have at home and collect the results of all the recipes they can make. The other, was giving the user the ability to "favorite" and email themselves recipes of their choosing. In order to make this possible, we pulled from two API's. The first API, "MealDB", provided a host of valuable information. MealDB contained the recipe name, url and picture. What we needed to do to support this API to work with our idea, was to create our own array's of food items for the checkboxes. Our Second API, "Email.js", enabled the ability to send information held in local storage (the "favorited" recipes) to send an email of the user's choice. From a design perspective, we wanted to reflect the theme as closely as possible. Our theme was all about food and staying in to cook. To match that, we aimed for earthy backgrounds and colors. Our second and third page was created to mimic what the users dining table or kitchen may look like. In conclusion, our site was made to be a quick and efficient way for the user to find delicious recipes all from the comfort of their home.

🛠️ Used Technologies

JavaScript
JQuery
HTML
CSS
Bootstrap
Font Awesome
APIs

📋 List of the APIs used

Recipes: https://www.themealdb.com/api.php
Email: https://www.emailjs.com/

🖥 Preview

👇 Home Page

👇 Recipes Page

👇 Your Flavorites Page

👇 Email received

⚙ How to run

1. Fork this respository

Click the Fork button on the upper right-hand side of this repository's page.

2. Clone the repository

Under the repository name, click on the code button and copy the clone URL for the repository.
Open your terminal and type git clone https://github.com/alessandraburckhalter/front-end-project

3. Open the folder

After cloning the repository, use your favorite code editor to open the folder. We recommend Visual Studio Code.

4. Open the file

Open the file with the Live Server extension on Visual Studio Code.

❗ Challenges

One of the biggest challenges was overestimating how robust the mealdb is. It really made us narrow the scope our project. Despite that, we still focused on delivering an atractive product. It's not a very powerful site, but we're all happy with how it looks.