/jquery-events-lab

5 jQuery event handling exercises

Primary LanguageHTML

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 embeds 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.

When they hit it again, record their "end" time.

Then, calculate the total time, and put it on the page.

###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.

Deliverables

  1. When you wrap up work, edit this README to include your name, a link to the original repository, and a 3-5 sentence reflection on completing this assignment. Push your updates to GitHub and add a link to the repo to the "My Work" section of your website!

  2. Choose one of the event types we've looked at or another you'd like to try, and implement it on your website.