This was my first experience with CSS as part of the Turing Front-End development program.
I designed a basic website to recommend recipes for the user to try cooking that night. (Based off a comp provided to us here: https://frontend.turing.edu/projects/module-1/dinner.html)
The site allows the user to:
- Generate a random suggestion based off of their selection of a Side, Entree, or Dessert
- "Favorite" a recipe, adding it to a list of their favorite recipes
- View their list of favorite recipes
- Delete a "favorited" recipe from their favorite recipe list
- Return to the home page from their favorite recipes page
To generate a random recipe suggestion, the user simply selects one of the "Side", "Entree", or "Dessert" buttons in the left-hand box, then clicks the "Let's Cook" button. This will replace the graphic of the cooking pot on the right hand side with a suggested recipe.
To favorite a suggested recipe, the user clicks the heart button that appears with the recipe suggestion. This will add it to their list of favorites.
To view their favorite recipes, the user clicks the "View Favorites" button at the top right hand corner of the page. This will take them to a new page with their list of favorite recipes.
If a user wishes to remove a favorited recipe from their list, they must click the radio button to the left of the recipe they want to delete, then click the "Remove From Favorites" button below.
If the user wishes to to return to the home page from their list of favorites, they simply click the "home" button at the top of the list.
- Learn CSS well enough to make the page maintain its appearance in dynamic environments
- Add actual recipes, rather than just names of recipes
Deploy Link: https://daniel-oc.github.io/whats-for-dinner/ Repo Link: https://github.com/Daniel-OC/whats-for-dinner
If you'd like to do additional coding on this project:
- Fork this repo
- Git Clone the new repo
- Navigate into the new folder in your terminal
- Open index.html to see your local version of the page as it updates
If you'd like to see my other work, please go here: https://github.com/Daniel-OC