I will be blogging about the challenge but making an individual post per day is a bit excessive to me so the plan is to do 5 days per post.
You can check out this GitHub repo for my code! Each day will be uploaded into it's own file.
In this exercise I learned about data-* attributes and transition events, as well as the important reminder that when you have an array of events you can't listen on all of them at the same time. You have to exclusively loop over every element and attach an event listener.
To customize this project I swapped out the provided background image with a 35mm photo I took at Jay Pritzker Pavillion in Millenium Park a few years ago.
Ok definitely learned some things about CSS and how to manipulate it with JS today plus some more about data-* attributes. Like how you can just set them to pretty much anything and how the dataset is an object that will contain all of the data attributes from that specific element. It takes everything that has data-* on that element and puts it into an object for you, super cool!
Whew! This was a fun challenge. I definitely needed the practice working with arrays and am glad this is a part of the series. During bootcamp we did get a lot of practice with map and filter but I had not done a lot of work with reduce before. It is so useful! This exercise also had some great practice with ternaries which are my favorite!