For this project you will create an app that helps a user make a decision. Examples: What class to take, What to buy, Where should I go on vacation… etc)

You will submit to Schoology:
● This completed project-planning guide ● Screen shot of your code (in text form)… It must be the screen so it will include your name. ● A video that shows your program running
App Requirements (use this as a check list and mark off as you finish the items)
____ 1. One number (within your conditional statement).
____ 2. One String (within your conditional statement).
____ 3. One function that updates the screen.
____ 4. The update function is called 2 or more times in the program.
____ 5. The conditional statement has at least one logical operator (&&, || or ! ).
____ 6. There are at least three different possible output answers:
Example: “Yes, you can adopt a cat!”, “No, you can’t adopt a cat”, and “Congratulations, you can adopt a kitten!). ____ 7. Your code has comments.
You need comments above your function, and onEvents explaining purpose & functionality.
____ 8. The user interface (UI) is easy to read and navigate… i.e. the text, boxes, buttons are easy to read and see.
____ 9. There are no errors in your code when you hit RUN.
Steps (use this as a check list and mark off as you finish the items)
____ 1. Brainstorm an app idea for making a decision
____ 2. Design your app’s user interface (1 screen… think about the Quote Maker app from Lesson 11).
____ 3. Draft a flowchart of the decision-making process (this is basically your conditional statement in a flowchart).
____ 4. Write down all your element ID’s and make sure they have good names.
____ 5. Create your UI in App Lab (remember to use the element ID’s you created above.
____ 6. Write down a summary of how your app is supposed to work…
(try writing the step by step use of someone using your app.
____ 7. Code your app… remember after creating an onEvent or Function, test to make sure it is updating properly.
____ 8. Remember to use the debug console below as well as the Watcher for variables.
____ 9. Once you have completed your code, you will create a video of your code and submit in Schoology.
____ 10. Take a screenshot of your code in Text Form & submit in Schoology.
(make sure it’s a screen shot with your name in it.)
____ 11. Click the submit button in App Lab to submit in code.org.
Investigate Step 1. Brainstorm App Ideas: Your app should be designed to help a user make a decision. The decision can be small or
big, like what to eat for lunch or where to apply for a job. Keep in mind how your idea might help solve a problem for your user. (write down 3 possibilities below then place a check mark next to the one you are choosing to do)
___ Idea 1: _____________________________________________________________________________
_____________________________________________________________________________
___ Idea 2: _____________________________________________________________________________
_____________________________________________________________________________
___ Idea 3: _____________________________________________________________________________
_____________________________________________________________________________
Step 2: Element ID’s (Write all your names here) 1 2 3 4 5 6 7 8 9 10 11
Step 3: Variables: What variables will be used to store information?
Name Information Stored Variable Type (string, number, Boolean) Ex: age
The age of the user
number
Step 4: Flowchart for conditional statements: Draft a flowchart to show the decision making process Think about what conditionals you will need to use in your app…. Follow the flowchart example to help you. Example:
Step 5. Design User Interface: In the space below draw a rough sketch of your user interface. This means you should include all the buttons, text, and images that the user will be able to use. Write notes or draw arrows showing how different user interface elements should work.
Note: you are working with 1 screen only… after you sketch your app, label all the inputs and outputs with the proper elementId names.
Step 6. Describe in detail how your app is supposed to run. Give us an idea of how it will function.
Rubric - Checklist
Category Checklist Item
App Development Planning Guide
● Planning guide is fully completed.
● Video shows the program running, including input, program
Video
functionality, and output.
● The User Interface is easy to navigate, it's clear how the app is
User Interface
designed to be used, and all text is readable.
Code: Warnings & Error Messages
● No warnings or error messages appear when the app is run.
● At least one number and one string are each stored in a
Code: Variables
variable and used to make a decision.
● A function is used to update the screen and is called at least
Code: Function
two times in the program.
● A conditional is used inside of the function to make a decision
based on information stored in variables, correctly using a
Code: Conditional
logical operator in the Boolean expression, and displaying the
decision on the screen with at least three different responses.
Code: Comments ● The update screen function has a comment which clearly
explains its purpose and functionality.

11 answers

Step 1: Brainstorm App Ideas

___ Idea 1: Daily Workout Suggestion App This app will help users choose a workout based on their fitness goals and available time. ___ Idea 2: Vacation Destination Picker The app will guide users to a vacation spot based on their preferences (beach, city, adventure). ✔️ Idea 3: Meal Planner The app will suggest meals based on dietary restrictions, preferences, and available ingredients.

Step 2: Element ID’s

  1. inputDietaryRestrictions
  2. inputMealPreference
  3. inputIngredients
  4. btnSuggestMeal
  5. outputMealSuggestion
  6. msgError

Step 3: Variables

| Name | Information Stored | Variable Type | |------------------------|-------------------------------------------------|----------------| | dietaryRestrictions | User's dietary restrictions | string | | mealPreference | User's meal preference | string | | ingredients | Ingredients user has available | string | | suggestionCount | Total number of meal suggestions generated | number |

Step 4: Flowchart for Conditional Statements

  1. Start
  2. Get user input for dietary restrictions, meal preference, and ingredients.
  3. Check if dietaryRestrictions is empty OR mealPreference is empty:
    • If TRUE: Display error message.
    • If FALSE: Go to next step.
  4. Check if available ingredients include necessary components for the meal:
    • If TRUE: Suggest a meal based on preference.
    • If FALSE: Suggest alternative meals based on dietary restrictions.
  5. End.

Step 5: Design User Interface

  • Title: "Meal Planner App"
  • Text Inputs:
    • Dietary Restrictions (Element ID: inputDietaryRestrictions)
    • Meal Preference (Element ID: inputMealPreference)
    • Ingredients Available (Element ID: inputIngredients)
  • Button:
    • Suggest Meal (Element ID: btnSuggestMeal)
  • Output Box:
    • Meal Suggestion (Element ID: outputMealSuggestion)
  • Error Message Box:
    • Message (Element ID: msgError)

(Sketch not included; please visualize a simple layout with labels and inputs organized vertically)

Step 6: Description of App Functionality

  1. The user opens the app and is presented with three text input boxes and a button.
  2. The user enters their dietary restrictions (e.g., "vegetarian"), preferred meal type (e.g., "dinner"), and available ingredients (e.g., "tomato, pasta").
  3. The user clicks the "Suggest Meal" button, triggering a function to process the inputs.
  4. The function checks if any inputs are missing. If so, it displays an error message.
  5. If all information is present, the app checks the ingredients against a predefined list of meals.
  6. The app suggests a meal based on the user's input, and updates the output box.
  7. The user can repeat the process as desired.

Step 7: Code Your App

Below is a rough representation of what the code might look like:

// Function to update the meal suggestion based on user inputs
function updateMealSuggestion() {
  // Getting user inputs
  var dietaryRestrictions = getText("inputDietaryRestrictions");
  var mealPreference = getText("inputMealPreference");
  var ingredients = getText("inputIngredients");
  
  // Clear the error message
  setText("msgError", "");

  // Check if any input is empty
  if (dietaryRestrictions === "" || mealPreference === "") {
    setText("msgError", "Please provide all inputs.");
    return;
  }

  // Logic to determine meal suggestion
  if (ingredients.includes("pasta") && mealPreference === "dinner" && dietaryRestrictions === "vegetarian") {
    setText("outputMealSuggestion", "You can make a Vegetarian Pasta!");
  } else if (mealPreference === "lunch") {
    setText("outputMealSuggestion", "How about a salad?");
  } else {
    setText("outputMealSuggestion", "Sorry, no options available for your selections.");
  }
}

// Event Listener for button click
onEvent("btnSuggestMeal", "click", function() {
  updateMealSuggestion();
});

Step 8: Debugging

Remember to utilize the debug console and variable watcher to ensure variables are being updated correctly.

Steps 9-11: Submission

  • Create a video demonstrating the app running, showcasing input, functionality, and output.
  • Take a screenshot of the code in text format with your name visible.
  • Submit both video and screenshot to Schoology, and submit the project in App Lab.

This checklist and outline should guide you through your project development efficiently! Good luck!

Where should I put each of these?
Title: "Meal Planner App"
- Text Inputs:
- Dietary Restrictions (Element ID: inputDietaryRestrictions)
- Meal Preference (Element ID: inputMealPreference)
- Ingredients Available (Element ID: inputIngredients)
- Button:
- Suggest Meal (Element ID: btnSuggestMeal)
- Output Box:
- Meal Suggestion (Element ID: outputMealSuggestion)
- Error Message Box:
- Message (Element ID: msgError)

Here's how you can organize the layout of your Meal Planner App by placing each of these elements into a user interface in App Lab. The layout will be vertical for easy navigation and user input. Below is a suggested arrangement of elements on the screen:

User Interface Layout

  1. Title: Displayed prominently at the top of the app

    • Element Type: Text Label
    • Content: "Meal Planner App"
    • Element ID: labelTitle (or similar)
  2. Text Inputs: Gather user inputs beneath the title

    • 1st Text Input:
      • Label: "Dietary Restrictions"
      • Element Type: Text Input
      • Element ID: inputDietaryRestrictions
    • 2nd Text Input:
      • Label: "Meal Preference"
      • Element Type: Text Input
      • Element ID: inputMealPreference
    • 3rd Text Input:
      • Label: "Ingredients Available"
      • Element Type: Text Input
      • Element ID: inputIngredients
  3. Button: This will trigger the meal suggestion

    • Element Type: Button
    • Content: "Suggest Meal"
    • Element ID: btnSuggestMeal
  4. Output Box: Where the meal suggestion will be displayed

    • Element Type: Text Area or Label
    • Label: "Meal Suggestion:"
    • Element ID: outputMealSuggestion
  5. Error Message Box: This will show error messages to the user

    • Element Type: Text Area or Label
    • Label: "Error Message:"
    • Element ID: msgError

Suggested Layout in App Lab

Here’s a visualization of the arrangement:

---------------------------------------------------------
|                        Meal Planner App               |
---------------------------------------------------------
| Dietary Restrictions:                                   |
| [inputDietaryRestrictions]                             |
---------------------------------------------------------
| Meal Preference:                                       |
| [inputMealPreference]                                  |
---------------------------------------------------------
| Ingredients Available:                                 |
| [inputIngredients]                                     |
---------------------------------------------------------
| [btnSuggestMeal]                                       |
---------------------------------------------------------
| Meal Suggestion:                                      |
| [outputMealSuggestion]                                 |
---------------------------------------------------------
| Error Message:                                         |
| [msgError]                                            |
---------------------------------------------------------

Additional Tips for UI in App Lab

  • Label Elements: Use labels for each text input to guide the user clearly on what to enter.
  • Spacing: Make sure to provide enough spacing between elements to avoid a crowded look.
  • Text Size and Style: Choose appropriate font sizes and styles to enhance readability.
  • Colors: Use contrasting colors for buttons and background to make them stand out.

With this layout and structure, users will find it easy to navigate your Meal Planner App and make their inputs effectively. Once you have that organized, you can proceed with coding the functionality as previously outlined.

I’m asking where should i put each information? Top bottom left right?

Thanks for clarifying! Here's a straightforward arrangement of the elements in your Meal Planner App based on their placement in the user interface, specifying whether they should be at the top, bottom, left, or right:

Suggested Element Placement

  1. Title:

    • Position: Top Center
    • Description: The title "Meal Planner App" should be prominently displayed at the top center of the app, making it clear what the app is about.
  2. Text Inputs (stacked vertically):

    • Position: Below the Title
    • Description: Place the three text input fields directly below the title in the following order:
      • Dietary Restrictions (Element ID: inputDietaryRestrictions)
      • Meal Preference (Element ID: inputMealPreference)
      • Ingredients Available (Element ID: inputIngredients)
    • Alignment: Centered, taking up the full width of the app.
  3. Button:

    • Position: Below the Text Inputs
    • Description: Place the "Suggest Meal" button below the text inputs, centered below them.
  4. Output Box:

    • Position: Below the Button
    • Description: The meal suggestion output area should be directly below the button to display the result of the user's input. Make this box larger or visually distinct to ensure it catches the user's attention.
  5. Error Message Box:

    • Position: Below the Output Box
    • Description: The error message display should be below the output box. It can be either centered or right-aligned, depending on your preference, but keep it easily noticeable.

Visualization of Layout

Here’s a visual representation of the layout:

---------------------------------------------------------
|                Meal Planner App                       |  <-- Title
|                       (Top Center)                   |
---------------------------------------------------------
| Dietary Restrictions:                                  |  <-- Text Input 1
| [inputDietaryRestrictions]                            |
---------------------------------------------------------
| Meal Preference:                                      |  <-- Text Input 2
| [inputMealPreference]                                 |
---------------------------------------------------------
| Ingredients Available:                                |  <-- Text Input 3
| [inputIngredients]                                    |
---------------------------------------------------------
| [btnSuggestMeal]                                      |  <-- Button
---------------------------------------------------------
| Meal Suggestion:                                     |  <-- Output Box
| [outputMealSuggestion]                                |
---------------------------------------------------------
| Error Message:                                        |  <-- Error Message Box
| [msgError]                                           |
---------------------------------------------------------

Summary of Positioning:

  • Title: Top Center
  • Text Inputs: Stacked Vertically Below Title
  • Button: Below the Text Inputs, Centered
  • Output Box: Below the Button
  • Error Message Box: Below the Output Box

This arrangement will ensure a clean, intuitive user experience, making it easy for users to input their data and receive meal suggestions without confusion.

What colors should it be

Choosing an effective color scheme for your Meal Planner App is essential for both aesthetics and usability. Here are some suggestions for colors, incorporating guidelines for contrast, accessibility, and appeal:

General Color Theme Recommendations

  1. Background Color:

    • Option 1: Light or Soft White (#F8F8F8)
    • Option 2: Light Pale Yellow (#FFFDE7)
    • Purpose: A light background makes text and buttons easy to read.
  2. Title Color:

    • Option 1: Dark Green (#4CAF50)
    • Option 2: Deep Blue (#2196F3)
    • Purpose: Use a strong, contrasting color against the background to make the title stand out.
  3. Text Input Background Color:

    • Color: White (#FFFFFF)
    • Purpose: Use white for text inputs, as it provides a clean look and is standard practice.
  4. Text Input Text Color:

    • Color: Dark Gray (#333333) or Black (#000000)
    • Purpose: Ensures good readability against the white background of text inputs.
  5. Button Color:

    • Primary Color: Bright Green (#4CAF50) for "Suggest Meal" button
    • Text Color: White (#FFFFFF) on the button
    • Purpose: Bright colors work well for action buttons, making them noticeable. White text on a green background provides good contrast.
  6. Output Box Color:

    • Background Color: Light Gray (#E0E0E0) or Light Beige (#FFFAF0)
    • Text Color: Dark Gray (#333333) or Black (#000000)
    • Purpose: A subtle background color helps the output stand out while keeping it easy to read.
  7. Error Message Box Color:

    • Background Color: Light Red (#FFEBEE) to indicate an error
    • Text Color: Dark Red (#B71C1C) or Black (#000000)
    • Purpose: Using light red for the background signals a problem, while dark red or black text ensures that users can read the error message easily.

Example Color Scheme

  • Background Color: Light Pale Yellow (#FFFDE7)
  • Title Color: Dark Green (#4CAF50)
  • Text Input Background: White (#FFFFFF)
  • Text Input Text Color: Dark Gray (#333333)
  • Button (Suggest Meal): Bright Green (#4CAF50) with White Text (#FFFFFF)
  • Output Box Background: Light Gray (#E0E0E0) with Dark Gray Text (#333333)
  • Error Message Box: Light Red (#FFEBEE) with Dark Red Text (#B71C1C)

Tips for Choosing Colors

  • Contrast: Ensure there’s enough contrast between text and background colors for readability.
  • Consistency: Stick to a cohesive color palette throughout the app for a professional look.
  • Accessibility: Consider using color combinations that are friendly for color-blind users (e.g., avoid using red and green together without text labels).

Feel free to experiment within this color framework to match your own style while keeping user experience in mind!

You pick the options

Sure! Here’s a finalized color scheme for your Meal Planner App using options that offer good readability, aesthetic appeal, and user-friendly contrast:

Finalized Color Scheme

  1. Background Color:

    • Light Pale Yellow: #FFFDE7
    • Purpose: Creates a warm and inviting background.
  2. Title Color:

    • Dark Green: #4CAF50
    • Purpose: Provides strong contrast and emphasizes the app title.
  3. Text Input Background Color:

    • White: #FFFFFF
    • Purpose: Clean and standard appearance for input fields.
  4. Text Input Text Color:

    • Dark Gray: #333333
    • Purpose: Ensures high readability against the white background.
  5. Button Color:

    • Primary Color: Bright Green: #4CAF50
    • Text Color: White: #FFFFFF
    • Purpose: The bright button color stands out and signifies action clearly.
  6. Output Box Color:

    • Background Color: Light Gray: #E0E0E0
    • Text Color: Dark Gray: #333333
    • Purpose: Provides a subtle distinction for the output area, making it readable.
  7. Error Message Box Color:

    • Background Color: Light Red: #FFEBEE
    • Text Color: Dark Red: #B71C1C
    • Purpose: Light red background effectively indicates error messages, while dark red text provides clarity.

Summary of the Chosen Colors

  • Background: Light Pale Yellow (#FFFDE7)
  • Title: Dark Green (#4CAF50)
  • Text Inputs: White (#FFFFFF) for background, Dark Gray (#333333) for text
  • Button: Bright Green (#4CAF50) for background, White (#FFFFFF) for text
  • Output Box: Light Gray (#E0E0E0) for background, Dark Gray (#333333) for text
  • Error Message Box: Light Red (#FFEBEE) for background, Dark Red (#B71C1C) for text

This color schema should result in an appealing, easy-to-read, and user-friendly interface for your Meal Planner App. You can implement these colors in your app's UI elements accordingly!

What to put for input text.

In your Meal Planner App, you should provide clear and descriptive placeholder text for each input field. This text helps guide users on what to enter without requiring additional instructions. Here are suggestions for the placeholder text for each input field:

Input Fields and Suggested Placeholder Text

  1. Dietary Restrictions (Element ID: inputDietaryRestrictions)

    • Placeholder Text: "e.g., Vegetarian, Vegan, Gluten-Free"
    • Purpose: This allows users to quickly understand what kind of dietary restrictions they can enter.
  2. Meal Preference (Element ID: inputMealPreference)

    • Placeholder Text: "e.g., Breakfast, Lunch, Dinner"
    • Purpose: It clarifies that users should specify the type of meal they are planning.
  3. Ingredients Available (Element ID: inputIngredients)

    • Placeholder Text: "e.g., Chicken, Rice, Broccoli (comma-separated)"
    • Purpose: This helps users know that they can list their available ingredients and how to format their input.

Example of Implementing Placeholder Text in Your UI

Here's a quick reference on how the inputs would look with these placeholders:

---------------------------------------------------------
| Dietary Restrictions:                                  |
| [ inputDietaryRestrictions: e.g., Vegetarian, Vegan ] |
---------------------------------------------------------
| Meal Preference:                                      |
| [ inputMealPreference: e.g., Breakfast, Lunch, Dinner ] |
---------------------------------------------------------
| Ingredients Available:                                |
| [ inputIngredients: e.g., Chicken, Rice, Broccoli ]   |
---------------------------------------------------------

Implementation in Code

If you are using App Lab, you would typically set the placeholder text in your JavaScript code like this (assuming you're creating your text input elements programmatically):

setProperty("inputDietaryRestrictions", "placeholder", "e.g., Vegetarian, Vegan, Gluten-Free");
setProperty("inputMealPreference", "placeholder", "e.g., Breakfast, Lunch, Dinner");
setProperty("inputIngredients", "placeholder", "e.g., Chicken, Rice, Broccoli (comma-separated)");

Summary

Using these placeholder texts will make your app more user-friendly and help users understand what inputs are expected, leading to a better overall experience.