What's for Dinner?

Abstract: This app is designed to help users decide what to cook for dinner by providing random dish suggestions for different categories. Users can choose from sides, mains, and desserts, and with a simple click of the button, they receive a random dish idea to inspire their meal planning. Additionally, users have the option to select an entire meal, which provides a complete dinner suggestion consisting of a side, main, and dessert.

Learning Goals:

• Gain experience building an application using HTML, CSS, and JavaScript.
• Write HTML and CSS to match a provided comp.
• Understand how to listen to and respond to user events.
• Develop individualized programming skills and problem-solving abilities.

Expectations: To gauge your progress during this project, the expectation is to complete the MVP (iteration 1) and at least one "Choose Your Own Adventure" (CYOA) feature. If you feel up to the challenge, you can choose to implement more CYOA features.

Setup:

1. Fork this project to your GitHub account.
2. Clone the repository to your local machine.
3. Navigate to the project directory.
4. Read this README thoroughly, then begin working!

Workflow: Ensure you follow Git best practices by using branches and committing frequently.

Day One Deliverables: By the end of the kickoff day:

• Carefully review the project specification.
• Complete the provided form (if applicable).

Link: What's for Dinner App/Website

Contributor: Amy

Iteration 0: Build Out Comp

• An assets directory is provided in the repo, and colors are specified in the CSS file.
• Don't concern yourself with 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 (excluding "Entire Meal") and clicks the "Let's Cook!" button, they should see a random dish from the list of possible dishes for that category.
• When the dish name appears, the cookpot icon should disappear.

Choose Your Own Adventure: In the spirit of personalizing your project and building your skills, you have the option to choose additional features to add. You can select one or more of the following features, but ensure you complete all bullet points for the chosen features.

Entire Meal Functionality:

• When the user selects the "Entire Meal" option and clicks the "Let's Cook!" button, they should see 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 should disappear.

Wins:

• Successful implementation of the core functionality, providing random dish suggestions.
• Creation of a visually appealing user interface (UI).
• Effective collaboration with a focus on individual strengths.
• Enhanced understanding of JavaScript and user interaction.

Challenges:

• Debugging and ensuring the MVP is fully functional and free of bugs.
• Balancing individualized feature implementation with project completion.
• Ensuring the UI is responsive and works across different browsers.

Observations & Questions:

Observations:

• This project offered valuable hands-on experience with web development.
• The CYOA approach allowed for individualization and skill development.
• Recognizing the importance of UI design and responsiveness.

Github Questions:

• How can we further optimize our GitHub workflow for future projects?
• Are there any additional GitHub features or best practices we should explore?

Terminal Questions:

• What are some advanced Git commands or strategies that can enhance our version control process?
• How can we streamline our terminal commands for a more efficient development workflow?

Coding Questions:

• How can we improve the error handling and validation in the user interface?
• Are there opportunities for code refactoring to enhance efficiency and readability?

💡 Iterations and Features:

Iteration 0: Build Out Comp

• Create the initial project structure.
• Refer to provided images and assets for the design.
• Utilize the assets directory and predefined colors from the CSS file.
• Focus on setting up the visual elements of the application.
• Ignore 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

• Implement the core functionality of the MVP.
• Allow users to select a dish option (excluding "Entire Meal").
• When the user clicks the "Let's Cook!" button, display a random dish from the list of possible dishes for the selected category.
• Hide the cookpot icon when the dish name appears.

Choose Your Own Adventure (Optional Features)

In this project, you have the flexibility to choose from various optional features based on your preferences and skill development goals. Consider your strengths, areas for growth, and usefulness when selecting these features. Ensure you complete all bullet points for your chosen feature(s).

Entire Meal Functionality

• Enhance the application by adding the "Entire Meal" feature.
• When the user selects "Entire Meal" and clicks "Let's Cook!", display a message with options for a side, main, and dessert.
• Provide options from the lists of possible dishes for all categories.
• Hide the cookpot icon when the meal items appear.

Feature 2 (Your Choice)

• Choose and describe another feature you'd like to add to the application.
• Outline the functionality and user interactions.
• Include any necessary images or diagrams.

Feature 3 (Your Choice)

• Choose and describe another feature you'd like to add to the application.
• Outline the functionality and user interactions.
• Include any necessary images or diagrams.

Feature 4 (Your Choice)

• Choose and describe another feature you'd like to add to the application.
• Outline the functionality and user interactions.
• Include any necessary images or diagrams.