randeestafford / events_lab

5 jQuery event handling exercises

<<<<<<< HEAD

DOM Events & jQuery

In the following exercises you will play with five of the most common DOM events in jQuery:

• ready
• submit
• change
• click
• keypress

You can find a full list of event related methods in jQuery here: http://api.jquery.com/category/events/

Exercises

Instructions:

• For each exercise, start by opening the index.html file for that challenge in your browser. (You can do this from inside Sublime Text by right clicking inside the html file and selecting "Open in Browser").
• To solve the challenge, you'll need to change each base.js file.
• Make sure to open your Chrome Developer Console so that you can check for bugs!
• SOLUTIONS: Solutions are in the solutions branch.

###1. ready

• Challenge: Can you get the page to say "Go!" (without touching the html)?

###2. submit

• Challenge: Can you stop the forms from submitting?
  • Why does one button reload the same page and the other redirect?
  • What is the "?" doing in the URL? Try removing it.
• Bonus: Instead of redirecting to youtube, let's embed the video in our page instead!
  • When the user clicks "submit", dynamically insert the embed code into the page (on youtube, click "share" under the video, then click "embed" and copy the html). HINT: The embed code belongs in your javascript, not your html!

###3. change

• Challenge: Some simple addition! Can you get the total to update whenever you update the numbers?
• Bonus: Add a "reset" button that clears all the inputs.

###4. click

• Challenge: Can you create a list of all the phrases that you click?
• Stretch: In addition to listing the phrase I clicked, can you include a timestamp?

###5. keypress

• Challenge: Stop watch. 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 navbar at the top of every page, with links to all the other pages. ======= #SF-WDI-22 Homework submission

Homework will be turned in to your fork of this repository daily.

##Setup

To set up your initial homework repository do the following:

• fork this repo to create a copy of it on your github account
• clone the forked repo from your github account onto your computer inside your dev/ directory
• cd into the newly cloned repo on your computer
• mkdir **GIT-USER-NAME**
• cd **GIT-USER-NAME**
• echo "#**YOUR NAME**'s Homework repo" > README.md to set up your repo's README
• git add -A to stage your changes
• git commit -m "inital commit" to have git save your changes
• git push origin master to put your changes up on github!

GIT-USER-NAME should be replaced with your actual git user name (must be exact)

YOUR NAME should be your actual name.

##Submit homework

Each day you will submit your homework by doing the following from within your homework repo on your computer:

• copy any required files into your homework repo directory as instructed in homework writeup
• git add -A to stage all your changes
• git commit -m "homework commit" to have git save the changes -- feel free to add to the commit message if you'd like
• git push origin master to put the changes up on github
• go to your homework repo's page on your account on github.com
• create a pull request according to the guidelines below

####Pull request details

(Must be in this format)

Title: w##d##

Replace ## with week and day number (eg w01d02 = homework for week 1 day 2)

Message:

comfort: #
completeness: #

Message about your experience goes here

Replace the #s next to comfort and completness with a number (1 - 5) to represent how comfortable you are with the topic and how much of the assignment you were able to complete. A 1 is the lowest (least comfortable / very little complete), and a 5 is the highest (most comfortable / fully complete).

30a1fe0024b665f82d59f5fade6b2486d26ae3a7