This exercise is required.
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
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.
'use strict';on the first line of your JS to ensure you use strict/clean JS markup.
- 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.
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
.blockelement and capture it in a new variable (i.e.
var newVariable = ...).
EventListeners, allow our JS to listen for different kinds of interactions with the selected element. Please create an
EventListenerthat listens for
'click'events that happen to our new variable. This will start to look something like:
- As part of our
EventListeneryou will have to add a function — a collection of commands to run — that says what to run when our
newVariableelement is clicked on. The
EventListenerlink has examples of how to set this up.
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.
- Within the
functiondefined 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.
- To help with scaling the image, the
main.cssfile has a class called
.big. This class sets a
500pxto any element it is applied to. We are going to add this class to our element using the
classListobject and its methods, which allow us to change an element's classes in a variety of ways.
- Again, within the
functiondefined in step #5 and using the
classListobject and its method please add the class of
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
- Add comments through-out the code to indicate what resources you drew upon to complete the exercise.
- 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.
- "use strict" (W3Schools): An explanation of the what/why we might use
Exercise rules reminder
Please remember that the exercise rules still apply:
- 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;
- 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.
- 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.