jQuery

jQuery - Exercises, part I

Exercise I

1. Having the following html:

<h1>abc</h1><br/>
<div>
<h1>div-1</h1>
<h1>div-2</h1>
</div>
<h1>xyz</h1>
2. Find all h1 elements that are children of a div element and
apply a background color to them.
Exercise II

1. Write a sidebar menu that:

a. Consists of a ul and several li children, all with links inside
them.
b. Animate the li elements to appear on screen one by one,
with a delay of 500 milliseconds in between.
Tip: you can use any kind of animation you like - fade,
slide, animate, whatever. Get creative :)
Exercise III

1. Using the previous exercise, add a hover effect animation to

the sidebar menu:
a. The item that’s hovered over should grow in size
b. The rest of the list items should get smaller and
semi-transparent.
Exercise IV

1. Add a text input element and a button next to it (with a text of

“Color it!”)
2. Using jQuery, any time the button is pressed:
a. Grab the value from the input
b. Apply that value as the background color of the
document.
Exercise V

1. Expand the previous exercise:

a. Hide the text field and the button
b. Add a select box, which contains two values: “plain” and
“gradient”.
c. When a use selects the “plain” option, show the text field
and the button on screen.
d. Otherwise, hide them from the screen.
e. The rest of the functionality of the previous exercise
should continue working.
Exercise VI

1. Expand the previous exercise (create the gradient option):

a. When “gradient” is selected from the select box, show
two inputs with a type of “color” and a button that also
says “Color it!”.
b. When we press the button, using the values of the two
color inputs, make the page background into a CSS linear
gradient.

Hint: https://developer.mozilla.org/en-US/docs/Web/HTML/Element/Input/color
Exercise VII

1. Expand the previous exercise (expand the gradient option):

a. Add an extra select box when the “gradient” options is
selected, with two options: “linear” and “radial”
b. Based on that selection, generate a linear or radial
gradient when a user presses the “Color it!” button.
Exercise VIII

1. Add a single div(in a new document), either with a background

color or some text.
2. Add a button with a text of “Animate!”.
3. Define a function which animate the div element with an
animation of your choice; However:
a. At the end of the animation, no matter what happened, it
should remain visible on screen. For example: if it was
faded out, you should fade it back in in the callback.
Exercise IX

1. Expand the previous exercise: Add another function, which

also animate the element, but using different animation
sequences. Same rule applies - the div element should be
visible at the end.
2. When the “Animate” button gets clicked, it should pick a
random function to execute, from the two available.
Exercise X

1. Expand the previous exercise: add four more animation

functions, using the same rules. When the button gets clicked,
it should pick a random animation from all of the available
ones.
Exercise XI
1. Create a simple tip calculator (using jQuery):
a. In a new document, add an input element and a button
with a text of “calculate”.
b. When we press the button, using the value in the input
field, calculate the appropriate tip to give using the
following rules:
c. If the value is higher than 1000, the tip should be 10%.
d. If the value is between 500 and 1000, the tip should be
8%.
e. If the value is less than 500, the tip should be 5%.
f. Show the result in a new div element in the DOM.
Homework

Enjoy your weekend ;)