/JQuery-Events-Training

Primary LanguageHTMLOtherNOASSERTION

Training: DOM Events & jQuery

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

  • ready
  • change
  • click

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

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. Stretch 2: Add a 3rd field that uses a random number under 100.

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?

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

Licensing

All content is licensed under a CC­BY­NC­SA 4.0 license. All software code is licensed under GNU GPLv3. For commercial use or alternative licensing, please contact legal@ga.co.