Practice with Events and Effects

Your turn to practice what you've learned about jQuery.

Scroll down...

Content

Resources

Comments

In this assignment, you'll use your newfound jQuery skills to pull together a couple of common DOM effects -- a form validation and a drop-down menu -- followed by some more advanced widgets like a photo tagger.

Use event delegation where possible to offload child element events to parent element handlers. Also, see if you can find a way to organize your code which doesn't feel totally chaotic. We'll look more into organizational patterns in upcoming lessons.

Getting Started

  1. Fork and clone the Project Repo on Github
  2. Set up a basic index.html file plus script and stylesheet files that it imports.

1. The Form Validation

Note: Only add the minimum styling required. This isn't meant to look good, only functional

  1. Set up a simple form which contains a text field, a text area, a password field, and a password confirmation field.
  2. When the user types into a text field, display a counter next to the field listing how many characters are remaining (maximum 32). This should disappear if the text is completely removed.
  3. Add the same for the text area at a maximum character count of 140.
  4. Add the same for the password and confirmation at a maximum character count of 16
  5. When the user begins typing in the password confirmation field, provide feedback indicating the confirmation doesn't match the password (until it does). If the user deletes all text from the confirmation field, this message should disappear as well.
  6. When the user clicks "submit", verify that the following validations are met. If not, highlight the offending field in red and display a red error message next to it indicating what went wrong. You'll need to prevent the default behavior of this button.

Validations

  1. Text field -- 4-32 characters
  2. Text area -- 4-140 characters
  3. Password/confirmation -- 6-16 characters
  4. Password -- must match confirmation

Refactor!

Don't forget to refactor! See if you can use objects and functions to make your code more extensible. How much work would it be right now if you had to double the number of total form inputs? Can you reduce that?

2. The Dropdown

Build a simple form-style dropdown menu using any method you'd like. Don't style it any more than necessary. This is meant to replicate the functionality of a <select> form so do NOT use <select> tags to build it (we recommend lists or divs).

Note: Only add the minimum styling required. This isn't meant to look good, only functional

A few requirements:

  1. The top-level element should start out blank (so the menu has nothing selected yet).
  2. It should contain at least 3 example elements within it to choose between
  3. It should smoothly slide open and closed
  4. The sub-elements should change background color when the menu is opened and they are hovered over
  5. The sub-elements should be clickable (the mouse should be a pointer when hovering). When clicked, the menu closes and that element becomes the top-level element to indicate it has been selected.
  6. (Optional) Make it so your hacked-together dropdown actually submits like a normal form element would. Consider how you might do so with hidden fields...

Something to think about: How might you do this with just HTML attributes and a single function which accesses those to perform validations?

3. The Photo Tagging Box

On Facebook, when you hover your mouse over a photo, it often brings up a square "Photo tagging box" which allows you to select who is present in the photo from your list of friends. You'll build something like that here.

Photo tagging targeting box

  1. Build a simple Index.html file which displays a photo in it.
  2. When the user's mouse moves over the photo, it should be in the center of a square "targeting" outline (which should stand out, so make it a noticeable color). This outline should not show unless the mouse is hovering over the photo.
  3. When the user clicks, the targeting outline becomes fixed at that location and a simple drop-down menu slides down below it. Pre-populate this menu with a few sample names to choose from.
  4. If the user clicks away from the dropdown, "cancel" the tagging and resume the process of having the targeting box follow the mouse on hover.
  5. If the user selects a name from the list, assign that name to the now-fixed tag box. The name should be displayed somewhere next to this new tag box.
  6. Resume the hover-targeting phase and allow the user to continue tagging locations in the photo. Previous tags should remain on the screen until the browser reloads and everything is reset.
  7. (Optional) Add a "Remove Tag" link or "X" to each tag box which allows the user to remove it from the DOM.
  8. (Optional) Make the existing tag boxes invisible until you hover over them.

NOTE: If you have trouble with your tagger toggling visibility over and over when you don't want it to, consider attaching your hover listener to a container div for the image and the mouseover listener to the image itself. Also have a look at CSS pointer-events.

4. (Optional) Simon

When you were kids, you may have played Simon. Now build your own!

Simon game

The game contains four colored squares which light up in a particular order. The player has to remember and repeat the order of those squares by clicking on them. The number of squares in a row increases by one with each round and the pace quickens. If the player guesses the wrong square or takes too long to guess, the game is over.

For example, in the first round, square 2 might light up.

If the player guesses correctly, in the second round squares 2 then 4 light up.

If the player guesses correctly, in the third round squares 2 then 4 then 2 light up.

This continues until the player guesses the wrong square or takes too long.

Your mission is to build this game using colored Divs or images which "light up" (change color briefly) and the player chooses them by clicking on them.

Bonus: Include sounds as well!

5. (Optional) Duck Hunt

Remember the Nintendo game Duck Hunt? No, you're too young, but it was awesome...

Duck Hunt

Your job is to build it!

  • Build a very simple game which generates a "duck" on the screen somewhere (can be an image of a duck or just a colored div).
  • Have the mouse be an image of a gun's targeting sight.
  • When you click, briefly put an "explosion" image on that area of the screen.
  • If you click on the duck, have it "fall off" the screen to the bottom.
  • Regenerate a new duck somewhere else on the screen.
  • (Bonus): Make the duck "fly" around.
  • (Bonus): Keep score and limit the number of shots you can take.

Finishing Up

  1. Commit, push, and submit a pull request back to the main repo.
Pull request 300 Octocat 300


Sign up to track your progress for free

There are ( ) additional resources for this lesson. Check them out!

There are no additional resources for this lesson just yet!

Sorry, comments aren't active just yet!

Next Lesson: Project Walkthrough: The Royalty Free Music Player