This exercise is required.
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
.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.
'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.
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 having set up the intended action, please:
- Add comments through-out the code to indicate what resources you drew upon to complete the exercise.
- 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.
Please remember the rules for this exercise:
- 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 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.
- 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.