From the course: JavaScript: Enhancing the DOM
Unlock the full course today
Join today to access over 22,400 courses taught by industry experts or purchase this course individually.
What we'll build
So, in the next series of movies, we're going to be building a very simple dom related project. We're going to be going to the artist page, and if you scroll down a little bit, there's a list of artwork from these artists that are in the show. If you click on it, this is going to pull an overlay which grays out the background. And then an image. This same image is going to resize vertically or horizontally, depending on its dimensions. This is a seemingly simple task, but it requires quite a bit of JavaScript to get it right. So, if we take a look at the finished version of this code. You can see that the HTML is pretty simple. Scroll down here and you'll see that assisted list of images with an image tag inside each one of those list items. Now, in the JavaScript, you can see that what we're doing is selecting a specific node of this document's dom. And then adding an event listener that waits for a click inside this node. We could have added an onclick event on each of the images…
Practice while you learn with exercise files
Download the files the instructor uses to teach the course. Follow along and learn by watching, listening and practicing.
Contents
-
-
-
-
-
-
-
What we'll build2m 16s
-
Adding a bubbling event listener4m 11s
-
Creating and styling an overlay with JavaScript4m 39s
-
Adding an image3m 48s
-
Resizing images in the DOM2m 59s
-
Centering an image2m 36s
-
Handling clicks1m 29s
-
Adjusting for scrolling1m 36s
-
Detecting and adjusting for a window resize2m 40s
-
-