- DOM Manipulation
- Control Structures
- Immediately Invoked Function Expressions
New Things Learned or RefreshedIn this project, I struggled quite a bit. I first tried to code it entirely by myself without watching John's solution. My first snag was trying to add an eventListener to my node list of store items. I kept getting the error that my node list was not a function. Specifically, my error was
storeItems.addEventListener is not a function. I found my solution on Stack Overflow after Googling the exact error: storeItems.addEventListener is not a function. Turns out, I forget my storeItems was a node list. What I really was trying to do needed an eventListener on each of the items within the nodeList. So, I added a forEach to the nodeList and then added an eventListener forEach item. My second snag was an issue of trying to change the background images of the container that held the images. I thought I could simply use
element.style.background = './img/image.jpg'. Turns out I needed to use the url function for my background property to work. (e.g.
element.style.background = url(./img/image.jpg). Of course, in the code you'll see I made my life easier by using template strings.
Time to CodeThis took about 2.5 hours, start to finish, including watching John's solution and then going back to finish my own solution.
Lines of CodeThis took 66 lines of code, including comments and white space.
Biggest Take Away(s)I don't have to add .style when adding a classList to an element. It's simply
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
- In the “Our Store” section of the website, when you click on a given item, the modal should pop up, displaying the image of the item clicked.
- When you click the close button, the modal should close.
- When you click the left and right buttons, all images should cycle through the modal container.
Need to see the video solution for this project?