U4Ch1L11_Functions_Make
Purpose: Students will develop a Quote Making App that leaves it to them to decide how to write the code.

Activity:  U4Ch1L11_Level 1: View the Quote Maker App.

Journal
Run the Program – Now answer the following Questions:

• What does the App do? (Display a quote with user-defined fonts and background colors.)
• What are the Inputs?
• The dropdowns for background color and font family. 
• The quote text field
• The slider to generate the font size
• What are the Outputs?
• The fully designed quote displayed at the bottom of the screen

Activity: Create A Flowchart of the Quote Maker App

Create The Quote Maker App

---

Create the Variables:

• You will need one for each of the 4 App Inputs you stated above. Here is an example:



---

Create ‘onEvent’;

• Here is an example for the ‘Quote’ input:
• 
• Make an ‘onEvent for each of the Inputs you recognized and created variables for.
• Note: Remember to change the “id name” for each ‘onEvent’ (you can find the ‘id’s in the Design section)
• Also: Usually, the ‘onEvent’ is triggered by a “click”…not here. Look in the drop down arrow and look for “change’ & “insert.” You should be able to determine which is used when.

---

Update the Variables

In each ‘onEvent’ that you have written, Update the Variables; this allows the variables to receive new values. Here is an example.

---

Add ‘setText’ & ‘setProperty’

Depending up whether you are working directly with text (eg. ‘quote’), or in this case, how  the text is formatted (eg. Font, color, size), add a ‘setText’ & ‘setProperty’ line of code to each ‘onEvent ‘statement. Here is an example.

The Major Part of The App is Complete – Just Two Segments Remain.

---

Add ‘if-else’

• Run the App again. Enter: Color/ Lavender & Font Family/Lucinda Sans. Now read the bottom of the App screen…it should say “Great Combo.”
• Try it again, now enter: Color/Light Green & Font Size/24. Now read the bottom of the App screen…it should say “Looking Fresh.”
• Try it once last time, enter anything but these last two combinations. The Response will be, “Nice Design.”
• Your Task – Add ‘if-else’ statements that will allow the program to provide these responses.
• The structure is an ‘if’ Lavender & Lucinda Sans.  /  ‘else if’ Light Green & 24  /  else Nice Design!
• It should be placed in each ‘onEvent’. Here is an example.



---

Finally…Add Functions!

This is the easiest step. Look at the entire program and see which lines of code repeat throughout the program. First, ‘Declare Fx’ and Second ‘Call Fx.’

Hint: I recommend you place the ‘setText’, ‘setProperty’ and ‘if-else’ statements in the ‘Declare Fx’. Remember to place a ‘Call Fx’ in each ‘onEvent’.