ahandrewh teaches IAT-339web design & development

JavaScript exercise (due June 21)

This document is a draft

Until June 14As a result it may still change up until June 14.

Introduction

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 toggles a larger version of an image on and off.

Instructions

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 .thumbnail and .image_background 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 a JS with less potential errors.
  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 .thumbnail element and capture it in a new variable (i.e. const newVariableName = ...).
  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.
  6. 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 button now, you should see the console message appear.

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 and a log message when you click on the button. 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 load the image in the big frame.

  1. To help with loading the background image, the main.css file has a class called .image_background. This class sets the background-image 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.
  2. Again, within the function defined in step #5 and using the classList object and its method please toggle the class of .image_background to our newVariable.

The button image should now load in the big frame when clicked. 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 create a new repository for your exercise on SFU GitHub. Add your files to the repository and push the changes to the remote repository.
  3. Submit the URL to the Canvas assignment.

Your submission is due before lecture on June 21.

Grading rubric

This code exercise is worth 1% (1 point) of your final grade.

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.