Skip to content

Latest commit

 

History

History
112 lines (53 loc) · 3.28 KB

README.md

File metadata and controls

112 lines (53 loc) · 3.28 KB
Raw

Training: DOM Events & jQuery

In this training, you'll practice with some of the most common DOM events in jQuery:

  • ready
  • submit
  • change
  • click
  • keypress

The .ready method is specific to jQuery and uses a few native JavaScript event types internally. The other events listed are all native JavaScript events, and we recommend you use them with jQuery's .on.

You can find a full list of event-related methods in jQuery's event documentation. For a list of standard JavaScript events, check MDN's event reference.

Instructions:

Fork this repository to your GitHub account, then clone your GitHub copy onto your computer.

  • Each event has its own directory with HTML, CSS, and JavaScript files. Start each event page by opening its HTML file in your browser.
  • Read the descriptions below (and the existing HTML and JavaScript) for each event page. To meet the goals, you'll need to change each base.js file. Do not change the HTML files.
  • Make sure to keep your developer console open so that you can check for bugs!
  • Make at least one git commit for each page.

ready

Get the page to say "Go!" without touching the html.

ready screenshot

submit

Stop the forms from submitting.

submit

  • That's weird. Why does one button reload the same page and the other redirect to youtube?

  • Hmm... What is the "?" doing in the URL? How did it get there? Try removing it.

Stretch: Instead of just stopping the forms, make it so that clicking the submit buttons adds an embedded youtube video to the page.

change

change solution screenshot

Addition! Get the total to update whenever you update the numbers.

Stretch: Add a "reset" button that clears all the inputs.

click

Create a list of all the phrases that are clicked.

click screenshot

Stretch: In addition to listing the phrase I clicked, can you include a timestamp?

keypress

Make a stop watch!

keypress screenshot

When the user hits spacebar, record their "start" time.

The next time they hit the spacebar again, record their new "end" time.

Then, calculate the time difference, and display it on the page.

Stretch: update the display to show the time while the clock is running.

Wrap it Up

Recommended: Can you link all the pages together? Create a <nav> element on every page, with links to all the other pages.