GitHub Source Files
- For Loop
- Looping through a node list
My Personalize Summary
I even went to pexel.com to find my own images for this project.
The instructor uses 7 images, I believe.
But, I figured four would do for me.
Once I figured out how to get the logic for two pictures to work, adding two more pictures was pretty straight-forward.
I used CSS flex-box to wire up my CSS.
New Things Learned or Refreshed
CSS Flex-box made it super easy to center my arrows.
What used to take sophisticated styling via css-floats, is now so much easier.
But, I digress.
The first thing I had to refresh my memory on is how to loop through an array of nodes.
I created a node list of the arrows and I though I could just add an eventListener to the group of arrows in my node list.
But, I remembered (thankfully quickly upon seeing my error) that I needed to use the forEach method to loop through the node of elements.
I think that's the only thing that threw me for a loop in this project.
Use the tools you best know how to use!
Time to Code
This project took me about 40 minutes to complete on my own, including the CSS and HTML files.
What To Accomplish
- Download the source code from the github repository above.
- Delete the contents of the
- Add a link to your finished project below!
What You Should See