Front-end Web Development
Assignment for Week 10
- Download this zip with an HTML and CSS file.
- Include a
<script> reference in the HTML file to the latest version of jQuery.
- 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 clicking the
a element does not take you to
In addition, make it so the number inside the
a element increments by 1 when clicked.
Furthermore, make the
a 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 wrap it in a jQuery call, and reference it more than once. You might consider storing the wrapped element in a new variable (I called mine
$this) so you don't have to wrap it multiple times.
You should store a variable that counts the number of times the
a 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.