What's For Dinner?


What’s for dinner? The ultimate question. You will be building an app that helps users choose a recipe 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.

iteration 0 comp

Learning Goals

  • Gain experience building an application that utilizes HTML, CSS and JavaScript
  • Write HTML and CSS to match a provided comp
  • Understand how to listen to and respond to user events


  • Fork this project to your own Github account
  • Clone the repository to your local machine
  • cd into the project
  • Read this README thoroughly, then begin working!


Make sure you’re utilizing git best practices and commiting frequently.

Iteration 0: Build Out Comp

  • Images are below
  • An assets directory is provided in the repo, and colors are provided in the CSS file.

iteration 0 comp

Iteration 1: Add Random Side, Main and Dessert Functionality

  • When a user selects a dish option (don’t worry about “Entire Meal” yet) 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

iteration 1 comp

Iteration 2: Entire Meal Funcitonality

  • 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

iteration 2 and 3 comp

Iteration 3: 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!

iteration 2 and 3 comp

Iteration 4: Adding 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

NOTE: None of this needs to persist on page refresh

iteration 4 comp

Iteration 5: BONUS ROUND (Ideas for Extensions)

NOTE: This round is not required, and you should absolutely not be working on this unless your UI is solid and you are 100% sure that all of Iterations 1-4 are fully functional and bug free.

  • Add a loading animation when a user clicks the “Let’s Cook” button to simulate searching for a recipe. Hint - You will need to use CSS Keyframes, and a Javascript timeout function for this.
  • 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!
  • 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 array so that it will not show up any more (does not need to persist on page load). Make sure to alert the user in some way that the recipe has been removed.
  • Make sure that the same recipe (single item or entire meal) won’t be generated more than once. Make sure to add error handling for when a user “runs out of recipes.” (does not need to persist on page load)
  • Additional functionality for entire meal -> add the ability to swap out meal items. Note: Make sure your design for this matches the theme
  • CYOA Extension! Make sure you run your idea by instructors

Food Lists (Feel free to use your own instead!)


Miso Glazed Carrots
Garden Salad
Crispy Potatoes
Sweet Potato Tots
Coconut Rice
Caeser Salad
Shrimp Summer Rolls
Garlic Butter Mushrooms
Hush Puppies


Spaghetti and Meatballs
Pineapple Chicken
Thai Yellow Curry
Chicken Parmesean
Butternut Squash Soup
BBQ Chicken Burgers
Chicken Fried Rice
Sheet Pan Fajitas
Margarita Pizza


Apple Pie
Lemon Meringue Pie
Black Forest Cake
Banana Bread
Peach Cobbler
Funfetti Cake
Chocolate Cupcakes
Pumpkin Pie
Key Lime Pie
Tart Tatin

Lesson Search Results

Showing top 10 results