[SOLVED] Cpsc1520 – javascript 3 exercise: events! functions! js resources!

Events in JavaScript are the backbone of getting input from the user and making pages reactive. In class,
we’ve learned how to add event listeners (and handlers), use the event object, prevent default event
actions from happening, and a whole bunch more.
In this exercise, we will use this knowledge to keep our “More JavaScript Resources” page open and
make it more user-friendly by highlighting links as our users hover over them.
Events Exercise
Exercise Step 1 – Show the Javascript Resources
1. Link your JavaScript file.
2. Select the “div” with the class “javascript-resources” and the “button” with the id of “showresources.
3. Add an event listener on the button that will listen to the “click” event.
4. In the event handler from the last step remove the class “d-none” from the “div” with the class
“javascript-resources” that you selected in the first step. The result should look like the
following image.
Note: If you refresh the page the resources should be hidden again.
Exercise Step 2 – Add font boldness on the links when you hover over an item.
1. Add an event listener on element selected in the previous step that will listen to the mouseover
event. Ensure that you’re passing in the event object to the event handler function.
2. Use console.log to print out the “event.target” to see the link list item elements are the
event.target returned
3. On the event.target use the method “classList.add” to add the class named “fw-bold”.
a. When you only hover over the the first link item you should see something like this.
Exercise Step 3 – Remove the font boldness on the links when you move your mouse
away
1. You see an issue with your application. The idea is that you only want to bold the text of the
item you are hovering over. In the image below, all links get highlighted when you hover your
mouse over the other items in the list. You need to fix this (probably with another event listener
of mouseout).
a. Image of current functionality.
2. Add another event listener on the div list group selected in the first step (the last section) that
listens to mouseout events.
3. In the event handler, on the event.target use the method “classList.remove” to remove the class
named “fw-bold.” The handler will now remove the class when you move away from an item in
the list.
a. When you test the third item (after hovering over the other items) it should now look
something like this.
Exercise Step 4 – Italicize a clicked item.
1. Add an event listener to the list to listen to the “click” event.
2. In that event handler, use the same techniques in the previous steps to add the class “fst-italic”
on the “event.target”.
a. The result when you click the first and third items is as shown below.
Exercise Step 4 – Push up your code to github (accepting this assignment)
1. Open the link given and accept the assignment. Your link should look something like this.
Note the image will be different because you’ll accept the assignment specified.
You’ll see a page like this.
One you’re repo is ready the page should look like the following.
2. You should see the page below once you click on the link highlighted in blue. Click the button
that says “Code.” You’ll need to select “HTTPS” unless you’ve set up “SSH” (you can also set up
GitHub CLI”. Click on the copy icon once you’ve selected the proper icon.
3. Clone the repository in your console (or if you’re using GitHub Desktop) using the “git clone
REPO_URL” command.
And go into this folder.
4. Make your changes, then add them to staging (using “git add .”) and commit them (using “git
commit -m “CHANGE THIS MESSAGE”). Once committed, push them up to GitHup (using “git
push”) it should look like below.
5. If you click “Pull Requests” and then the first item called “Feedback” you should see your
commit (seen at the bottom).
6. Upload the link of your repository to Moodle.
Grading
I’ll give full marks if:
• Your code is pushed up to github correctly.
• You didn’t change the html.
• List element is selected “event.target” is used, other janky ways will not be accepted.
• The one single list item is bolded when I mouse over it.
• When I click one of the items, that specific item is italicized
• When I open your project it should behave exactly as described above.
If you don’t follow the instructions you’ll get a zero. There are no marks in between.