What’s for dinner? The ultimate question. You will be building an app that helps users choose a dish and put together meals.
This Solo Challenge gives students and instructors the opportunity to get a pulse on where you are with the foundational concepts of Module 1 curriculum. Students should use this as an opportunity to challenge themselves and work completely independently. Google can (and probably should!) be used, but any other code base should not be referenced. Instructors will be able to use your work, both completion of functionality and code quality, to determine where you stand and if you are behind for this point in the module, provide supports to intervene.
- Write HTML and CSS to match a provided comp
- Understand how to listen to and respond to user events
- Individualize your programming skill set
- In order to get a good read on your progress during this inning, we’d like to see you complete the MVP (iteration 1) and at least one CYOA feature. If you’d like to complete more CYOA features after that, please do!
- As for feedback: No news is good news. If we have concerns, we’ll let you know so that you can make adjustments before your next project
- Fork this project to your own Github account
- Clone the repository to your local machine
cdinto the project
- Read this README thoroughly, then begin working!
Make sure you’re utilizing git best practices (branches) and commiting frequently.
Day One Deliverables
- Read the spec sheet closely.
- Fill out this form.
Iteration 0: Build Out Comp
- Images are below
- An assets directory is provided in the repo, and colors are provided in the CSS file.
- Don’t worry about the “Add a Recipe” button and “Entire Meal” radio button for now.
Iteration 1: Minimum Viable Product (MVP) - Add Random Side, Main and Dessert Functionality
- When a user selects a dish option (don’t worry about “Entire Meal”) and then clicks the “Let’s Cook!” button, the user sees a random dish from the list of possible dishes for that category
- When the dish name appears, the cookpot icon disappears
Choose your own Adventure
In the interest of giving you opportunities to individualize the skills you build, this project’s main goal is to provide various different paths you can take. Along these different paths you will encounter different problems and solve them in different ways. As you make choices about which features to add, you should consider which features align with your strengths, which features would challenge you to grow, and which features you’d find to be useful in this application. Choose one or more of the following features to add. Some of them build on others, so be sure to read them all before choosing.
When you choose a feature, you must complete all bullet points!
NOTE: You should absolutely not be working on this unless your UI is solid and you are 100% sure that your MVP is fully functional and bug free.
Entire Meal Functionality
- When the user selects the “Entire Meal” option and then clicks the “Let’s Cook!” button, the user sees a message with a side, main and dessert option from the lists of possible dishes for all categories
- When the meal items appear, the cookpot icon disappears
Error Handling and Clear Button
- The user can click a clear button, which clears the page of any message. User should only be able to click the clear button if a food is visible. When the clear button is clicked and the food is removed, the image of the cookpot should re-appear.
- User should not be able to click the “Let’s Cook” button for a recipe unless they have selected an option.
Note: You can disable these buttons, hide them, or display a message to the user for error handling. The choice is yours!
User can add a recipe
- The user can click an “Add a Recipe” button, which will display a form to add a new recipe at the bottom of the page
- The user can add a type and a name, click the “Add New” recipe and that recipe will be added to the appropriate list
- When a new recipe is added, that recipe should automatically display instead of the cookpot icon
- When a user tries to add to a recipe type that does not exist, we see an error message, OR the new category gets added!
- Refactor your application so that the user lands on a “Login” page
- The login page should match the style of the application.
- The login page should contain an input for a user to enter their name, and a button to submit.
- After the user clicks the submit button, they should be taken to the main application page, and see a personalized greeting that displays their name and some sort of welcome message.
- The welcome message and name should appear in a logical place of your choosing.
User can favorite a recipe
- When a recipe appears, it should appear with a “Favorite” button.
- When the “Favorite” button is clicked, that recipe should be added to a new list of favorite recipes.
- Users should be able to view their favorites by clicking a “View Favorites” button that exists somewhere on the page
- When the “View Favorites” button is clicked, users should be taken to a new page that displays all of their favorite recipes.
- Users should be able to navigate back to the main page by clicking a button.
- Users should be able to remove a recipe from their list of favorites, by clicking a button.
- As you add these new elements to the page, be sure to match the style of existing elements.
User can delete a recipe
- Add the ability to delete a recipe (ie: when a recipe shows up, show a button that says “I don’t like this recipe” (or something similar), and remove it from the list so that it will not show up any more. Make sure to alert the user in some way that the recipe has been removed.
User never sees a repeated recipe
- After they’ve seen them all they should be notified that they will now start seeing repeat recipes.
All recipes interface
- Add a “View All Recipes” button.
- When that button is clicked, the user is taken to a new pages that displays all recipe, sorted by recipe type.
- On this page, user should have the ability to add/edit/delete recipe.
- Do some research and determine how to make your app respond to the user’s screen size.
- Layout and spacing should adapt to mobile, tablet, desktop and extra large screens.
- Make your buttons grow in size or change color when the user hovers over them, enticing them to click the dang thing.
- When the recipe appears, the text should fade in.
Remember your user experience and animate these things in gradually. Timing is everything!
- Only do this if you’ve added the “Favorite a dish” functionality.
- Do some research to utilize
localStorage, so that the user’s favorite recipes will persist, even if they reload the page.
localStoragecould also be utilized for the “User can delete a recipe” CYOA to make sure that the recipes a user has deleted stay gone after page reload.
Design your own feature
- Have an idea of something you’d like to add to the app? Go for it! Just be sure to run the idea by your instructors first!
Example Food Lists (Feel free to use your own instead!)
Miso Glazed Carrots
Sweet Potato Tots
Shrimp Summer Rolls
Garlic Butter Mushrooms
Spaghetti and Meatballs
Thai Yellow Curry
Butternut Squash Soup
BBQ Chicken Burgers
Chicken Fried Rice
Sheet Pan Fajitas
Lemon Meringue Pie
Black Forest Cake
Key Lime Pie