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

What we'll build

From the course: JavaScript: Enhancing the DOM

Start my 1-month free trial

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…

Contents