What's for dinner? The ultimate question. This app helps users answer the question by suggesting sides, mains and desserts.
Hungry? Check it out.
The spec for this project can be found here.
When you first visit What's For Dinner you are prompted to select what kind of meal you are looking for- side, main, or dessert. When you have selected your meal and click "Let's Cook" the cookpot image in the right box disappears and you see a randomly selected recipe.
Two buttons appear as well: one allows you to add the current recipe to your favorites, and another will clear the selection.
When you click "View Favorites" you are taken to another page which displays all of the recipes you have added to your favorites. A button appears next to each recipe which allows you to remove it from the list when your tastes change.
Another small feature, is that some error handling is incorporated into the homepage to prevent empty form submission.
This was a solo project implemented by Claire Fields, a Mod 1 Front End Engineering student at the Turing School of Software and Design. The design comp was provided by instructors at the Turing School, Claire wrote all of the HTML, CSS, and JavaScript.
HTML, CSS, Vanilla JavaScript.
Some possible future additions include:
- An "Entire Meal" button which will display a random side, main and dessert.
- The ability for users to add their own recipes to the database, or delete recipes they don't like
- A login page
- Some JavaScript to ensure that a user never sees a repeated recipe until they've seen them all
- A "View all Recipes" button
- Local storage, so that the user's favorite recipes will persist, even if they reload the page.
- The option to click on a recipe and see an actual recipe instead of just a recipe name.