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.
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.
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.
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.
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.)
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!
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.
- 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 tosizeCols * cardWidth
px, wherecardWidth
includes border and margin.
- I.e., the width of the
- 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.
- Hint: Mind that cards are dynamically created elements. Static event binding using
- The HTML and CSS files are already written, and you are not allowed to make changes to these.
- 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.
- Use the HTML5 progress element (but remember to progress "backwards").
- Display an alert when the time is up.