ahandrewh teaches IAT-339web design & development

JavaScript exercise (due July 8)


This exercise is required.

To practice with some basics of JavaScript (JS) you will be working within the developer tools console to put together a script. You will be building a script that resizes an image without refreshing the page.


For this exercise you will be starting with a pre-built set of HTML and CSS files. Please download the starter files.

Please note the structure of elements in index.html, as well as the pre-built classes of .block and .big in main.css.

Building the script

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 open and 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.

Making the script change the page

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 done building a working script

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

Your submission is due before lecture on July 8.

Exercise rules reminder

Please remember that the exercise rules still apply:

  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 huge repository of information and you are welcome to use 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 exercise grade will be zero. Please make sure to include comments indicating where you had assistance or learned.