- selecting DOM elements with query selectors
- attaching events to DOM elements with
addEventListener - looping
We're going to build a virtual etch-a-sketch in the browser! Explore the existing html, css, and js code in the etch_a_sketch directory.
You will primarily be adding code to index.js, but if you think something you need is missing from index.html or style.css, you can add it.
Note that there's already 1 pixel in the screen div. It's already styled to look like a pixel. Eventually, we will fill the screen up with pixels, but first, we should make just this 1 pixel function correctly. Our goal is to make this pixel turn black when the mouse hovers over it.
- Tools you already have that will help:
addEventListener,<anyDomElement>.classList.add - Tools you will have to research: the
mouseenterevent - Tip: check out the
.colored-inclass in the style.css
We want a bunch of tiny little pixels that behave just like our original. Let's fill the grey screen div up with them. It is totally ok if they do not fill the space perfectly, or if there are any awkward little gaps of grey. A hard-coded guesstimate of how many pixels should fit in the box is fine!
- Tools:
forloops,document.createElement,<anyDomElement>.classList.add,<anyDomElement>.append
Let's replicate the behavior of our original pixel for the entire bunch. Warning: if you find yourself writing several thousand addEventListeners, you are doing it wrong!
- Tools: everything from Step 1, using the
eventparameter andevent.targetinside your callback function,document.querySelectorAll
Attach a click listener to the Clear Screen button. When clicked, this button should reset all the pixels to white.
- Tools:
document.querySelectorAll,<anyDomElement>.classList.remove
Play with your new etch-a-sketch!