Fri Oct. 20

Goals

• I know what types of events I can use on HTML pages and how to use them
• I have added a menu toggle button to the mobile version of my portfolio page
• I have worked through all of the exercises of this week (including today's repetition exercises)

Exercises - Mad Libs

• Start with this webpage, which has several input elements and a button.
• Add a script tag to the bottom of the page for your code.
• Add an event listener to the button so that it calls a makeMadLib function when clicked.
• In the makeMadLib function, retrieve the current values of the form input elements, make a story from them, and output that in the story div (like "Pamela really likes pink cucumbers.")

[ Solution ]

Calculator

• Start with this webpage, which has inputs and buttons for things to calculate.
• Add a script tag, and add the functions from the calculator exercise (view the solution if you haven't done it yet).
• For each operation, create an event listener for the button, and when it's clicked, find the value of the appropriate input and show the result of the calculation in the solution div.
• Bonus: respond to key presses so that the user doesn't have to click the button.

[ Solution ]