We'll start with an uninteractive website and end up at this highly interactive (if not revolutionary) web app.

In between, we'll be adding a fair amount of JavaScript to make that happen!

• You should get familiar with the index.html file. You are also absolutely welcome to add IDs and classes to make your querying easier or just more in your own personal style.

• Similarly, you should get accustomed to what's in style.css although you won't need to change anything in there.

• But you could and should notice that there are two transition rules being applied. These make it so that when those rules are changed--width on an img or opacity on the lis in the ul--those changes happen over 2 seconds, producing a neat effect.

1. The first step is our ol. The lis in there should all have an event listener on them that give them a line-through effect on them when they are clicked. The solution here is following the same pattern we did before--query the element, make a function that affects that target, then tie them together with an event listener--but with two additional tricks:
   • We'll need to query ALL of the elements with querySelectorAll, which will return an array (or array-like collection) that we can loop through, putting the same event listener on EACH individual item in the collection.
   • We'll need to use event and its property target to figure out which element was actually clicked. Fortunately, the browser will be kind enough to pass the event object into our event listener functions, where we can take it in as a parameter if we need it. We haven't needed to do that before, and so while the browser has been passing it in with every call to an event listener, we've been ignoring it. The thing to keep in mind here is that event.target is ALWAYS going to be the item that was clicked.
2. Now that we've used those tools to get the first list to apply line-through when its items are clicked, we can do the same for the second list and opacity.
3. The third one is a little different, but basically the same. We're just using images instead of lis, and you can find them by their surrounding div instead of ol/ul.
4. But this last step, the Meteor Me button mass extinction, is hugely different. How do we affect ALL the items we've covered so far on one single button press? It's not actually that different. We'll just have to have a function that, when run, loops through all three sets of elements, applying the correct effect to each set. You don't need the event object here, because you don't care WHICH element was interacted with; you're gonna affect them all. Then simply attach that function as an event listener on the button, and you're done!

And you're DONE.

• Use forEach instead of a loop. This is a pretty good in-depth article on forEach, but you don't need to read the entire thing to use it!
• Make helper functions for your CSS changes. Right now, you may find yourself doing the style changes twice; once in the event listener on each item, and once in your "Meteor Me" button code. But you could write a helper function that takes in a node element and runs the opacity change (and one each for the other two!), and then call that on the element you want to change. It's not a huge win (Write Everything Twice, and that's exactly what we're doing), but it's a good exercise for when we DO need this kind of helper function.