Front-end Web Development
Assignment for Week 9
- Download this zip with an HTML and CSS file.
- Download the latest version of jQuery and include a
<script> reference in the HTML file to it.
- Create a JS file of your own and include a
<script> reference to it in the HTML file.
In the JS file, add behavior that makes it so the number inside the
button element increments by 1 when the
click event occurs on it.
Furthermore, make the
button element change its
class attribute when clicked. If the class is
zero, change it to
three, and then back to
Here are the jQuery functions you should use:
Read up on the jQuery API Documentation to learn how to use these methods.
You should use the special
this variable to refer to the element that was clicked. You'll have to pass it into a jQuery call, and reference it more than once. You might consider storing the jQuery-wrapped element in a new variable (I called mine
$this) so you don't have to pass it into jQuery multiple times.
You should store a variable that counts the number of times the
button element was clicked. That's the easiest way to set the new text inside the
Another good use for this counter is determining what class you should set. There is a handy modulo operator (
%) that you can use that will provide the remainder of the current counter value if you divide it by four - this will give you either
3, which conveniently maps to the class names you're supposed to apply. For example,
4 % 4 === 0, or
7 % 4 === 3.