Day 5 - Buttons and Event listeners

1. New Achievements

Cordelle has shared this Playlist of Javascript exercises

• Can these be used as an Achievement?

2. Functions and events

Demo: Refactor of yesterday’s demo

• Starter code: DOM prompt()

Activity

In groups of 2-3, refactor a code example to use an click Listener and callback function so that the code runs only when a button is clicked:

1. Create an index.html page with embedded or external Javascript;
2. Add one of the following code examples to your page so that it runs when the page first loads:
   • Full Activity
     • capitalize.js
     • gst-calculator.js
     • num-squared.js
     • tip-calculator.js
     • to-celcius.js
3. Move the code into a new function named handleClick so that it no longer runs on page load;
4. Add an HTML <button> to your HTML page;
5. Create a button DOM variable using document.querySelector();
6. Add a click Event Listener to your button so that it runs handleClick() when the button is clicked;
7. Bonus: Add a prompt() to your function code to accept user input and present a customized response for your click Event.

Lab Time

• Early Dismissal!
• Tony will be available for the rest of the afternoon but no attendance will be taken.

Prep

Review

• Watch: Functions in JavaScript Tutorial for Beginners: Learn JavaScript in 1 Hour by Mosh
  • 39:41 Functions
  • 44:22 Types of Functions
• Read: Function expressions on Javascript.info

Reading list

• EventTarget.addEventListener()
  • Event Reference

Watch list

• Introduction to JavaScript Event Listeners by Steve Griffith