By now, you should have learned how to use flexbox, and also created a slideshow of UGA football players by using arrays. Your job in this assignment is to draw on both sets of learning and create something new.
Instructions
- Create an html document that uses flexbox to evenly distribute three images and names of the same UGA football players inside of div tags.
- As you may have guessed, you will need six total buttons to control three total slideshows.
If you are interested, here are a few tips:
- The most SIMPLE way to approach this exercise is to create three sets of arrays, each with seven names and image names, along with three separate functions.
- Each array and each function must have a unique name.
- The first set of arrays contains the first seven players. The second set contains the next seven. The third set contains the last seven.
- The first function can be the one that you created in class. The next function should reference the second array and inject content into the second div tag.
- Remember that we used document.querySelector to set a variable named output to the div tag named goDawgs that we targeted in the first slideshow exercise in class. Later we used that same variable named output in the function that we created. You will have to repeat this process for each of the two new div tags and functions, but will have to create new variables.
note: it would also be possible to nest all three arrays inside of a parent array, and just use one function with 3 arguments instead of just one. The first argument would not change. The second argument would tell the function which of the three nested arrays to access. The third argument would target one of the three div tags.
Make it work. Then make it work better (and prettier)!