Skip to content

Latest commit

 

History

History
 
 

jquery

jQuery exercises

Exercise #1: Selectors

Complete the jQuery selector exercises from the W3C tutorial: 1, 2, 3, 4, 5, 6.

  • The task is to replace the "selector" part in $("selector").hide(); with the appropriate selector.
  • See this page for the list of possible selectors.

Exercise #2: Events

Complete the jQuery event exercises from the W3C tutorial: 1, 2, 3, 4, 5.

  • The task is to replace the "selector" and "event" parts in $("selector").event(function(){.
  • See this page for the list of possible events.

Exercise #3: HTML/CSS methods

Complete the following selected exercises from the W3C tutorial: 1, 2, 3, 4, 5, 6, 7, 8, 9, 10.

  • See this page for the list of possible HTML/CSS methods.

Exercise #4: Effect methods

Complete the following selected exercises from the W3C tutorial: 1, 2, 3, 4, 5, 6, 7, 8, 9, 10.

  • See this page for the list of possible effect methods.

Exercise #5: jQuery color picker

Solve the previous JavaScript exercise (JS II / Exercise #8) using jQuery.

  • Make a color picker that displays a color palette; display colored tiles (rectangles) in the "colors" div.
  • When a colored tile is clicked:
    • write the code of that color inside the "selected" div;
    • set the background of the "selected" div to that color.
  • You are given the HTML file and part of the JS code that collects the different colors in an array. (Only the JS file needs to be edited.)

Exercise5

Exercise #6: Playlist

Solve the previous JavaScript exercise (JS II / Exercise #7) using jQuery.

  • Create a simple playlist application where users can add songs to a list. The song here is just a non-empty string.
  • The starter HTML file contains the form and an empty playlist. There is an external CSS file with the style declarations.
  • Add your solution to exercise6.js. You are not allowed to make changes to the html file!

Exercise6

Exercise #7: Input check

Solve the previous JavaScript exercise (JS II / Exercise #5) using jQuery.

  • You are given a form with two password fields and a submit button.
  • Perform input check and display an error message next the the corresponding field if there is an error.
    • Passwords must be at least 6 characters long.
    • The two passwords must match.
  • The placeholders for the error messages have already been prepared (div-s with class "err").
  • By default the submit button should be hidden. Display the button only when there are no errors.

Exercise7/1 Exercise7/2 Exercise7/3

Exercise #8: Card board

  • When the "Deal cards" button is pressed, create cards and place them in a grid layout, as specified in the select list (the format is sizeCols x sizeRows).
  • Adjust the board's width dynamically according to the layout (such that the grey background doesn't extend to the full width of the page).
    • I.e., the width of the cardboard div should be set to sizeCols * cardWidth px, where cardWidth includes border and margin.
  • By clicking on a card, it should disappear with some effect, while leaving its original place empty.
    • Hint: Mind that cards are dynamically created elements. Static event binding using click() will not work. Check out the on() method.
  • The HTML and CSS files are already written, and you are not allowed to make changes to these.

Exercise8_1 Exercise8_2

Exercise 9: Countdown timer

  • Make a countdown timer that counts back from the selected time. Check the starting files (exercise9.html and exercise9.js) which already provide you with a select list and jQuery code for processing the user input.
  • Show in large text the remaining time in MM:SS format and update the counter with each second elapsed.
  • In addition, show the remaining time in a progress bar.
  • Display an alert when the time is up.

Exercise9