ah teaches web design and dev

JavaScript Exercise (Oct 19)

This exercise is required.

To practice with some basics of JavaScript (JS), in this tutorial you will be working within the developer tools console to put together a short script that toggles on a class for resizing an image without refreshing the page.


Please download the pre-made HTML/CSS files. Take a look at the structure of the HTML, as well as the CSS selectors — such as .block and .big — that are available.

To get started, either create a new code snippet within Chrome Developer Tools or create and link a blank JS file to the page. Make sure to keep the developer tools console readily available for this exercise.

  1. Place 'use strict'; on the first line of your JS to ensure you use strict/clean JS markup.
  2. The the log(...) method is built to output debugging messages. Please use the log("message") method on the console (object) to output a message that indicates the script is running.
  3. The querySelector(...) method is built to help find elements using CSS-style selectors. Please use the querySelector(...) method on our document (object) to search for the .block element and capture it in a new variable (i.e. var newVariable = ...).
  4. EventListeners, allow our JS to listen for different kinds of interactions with the selected element. Please create an EventListener that listens for 'click' events that happen to our new variable. This will start to look something like: newVariable.addEventListener('click');
  5. As part of our EventListener you will have to add a function — a collection of commands to run — that says what to run when our newVariable element is clicked on. The EventListener link has examples of how to set this up.

At this point, not much should appear to happen when you load your script with the page. Just a message in the developer tools console should indicate that your JavaScript is running. If you see any additional errors, consult with your TA.

The next steps are important to getting the script to perform the action we want: To make the image larger.

  1. Within the function defined in step #5, use the log(...) method to output a message indicating that a click has been detected. Please note that if you click on the kitten now, you should see the console message appear.
  2. To help with scaling the image, the main.css file has a class called .big. This class sets a height and width of 500px to any element it is applied to. We are going to add this class to our element using the classList object and its methods, which allow us to change an element's classes in a variety of ways.
  3. Again, within the function defined in step #5 and using the classList object and its method please add the class of .big to our newVariable.

What should now happen when you click on the thumbnail: (a) a message appears in the console indicating that a click has been detected, and (b) the kitten should grow larger. If you see any additional errors or this is not working, please consult your TA.

Once having set up the intended action, please:

  1. Add comments through-out the code to indicate what resources you drew upon to complete the exercise.
  2. Please upload your file to your SFU filespace and submit the URL to the Canvas assignment.

Your submission is due before the end of your lab time.

The Rules

Please remember the rules for this exercise:

  1. You can use online resources, course materials, your TA, and lab-mates for support. This being said, others are not allowed to do your work for you. Also, if you are drawing from online resources, course materials, your TA or peers, you must;
  2. Cite any knowledge that is not yours in a comment in the code. The internet is a glorious repository of information and you are welcome to draw on it, but you must let us know when something does not originate from your own knowledge.
  3. If work has been copied without citation the entire exercise portion of the final grade is forfeit (it totals to 5% of the final grade). A simple solution to this potential problem is to just note where your knowledge is coming from.

Recommended Resources