Bloc Assignment 11 Solution Flow

thought-process.js

// Bloc Frontend Foundation
// Checkpoint 11 Assignment Instructions
//
// Add an event listener to the album cover. When a user clicks it, the album
// page content should toggle between the three album objects: albumPicasso,
// albumMarconi, and your album object.
//

// Okay, I know I'll need a click handler on the big album cover image, so I'll
// start there. The click handler will be very simple to confirm it's working.
// I'd probably just insert a console.log() and make sure that shows up in
// the console when I click the image.

// Cool, that was an easy win. Time to move on to more of the meat of the
// assignment. The instructions say to switch the album we're displaying info
// for when the cover image is clicked. I can use the setCurrentAlbum()
// function I created in the checkpoint to handle swapping the information. To
// make things easy I'll start by hardcoding an album other than the the one I'm
// loading by default in my window.onload handler. That way I know the function
// is working.

// Alright, now that it's swapping to that other album on click I need to make
// it cycle through to the next album dynamically instead of using a static
// variable like I am now. Any time I need to loop over a collection the first
// thing I think of is a simple array. My album variables are floating around
// by themselves so I'm going to create an albums array and add each of them to
// it.

// Now that I have an array I'm going to update my onclick handler to point to
// a specific album in the array instead of one of the named album variables.
// I'll do this to make sure my data is as I expect and still renders correctly.
// I should probably also console.log() the entire albums array to inspect it.

// Awesome, that works. Now to cycle the albums. To do that I'm going to need to
// keep track of whichever one is currently being displayed so I know where in
// the array I am. I'll create a variable to hold that current index number and
// set it to the album I want to show by default - probably the first in the
// array, but it could be any of them.

// Great, now I can update my onclick handler for the album cover so it advances
// to the next item in the array. I'll simply increment my current index and be
// good to go!

// Okay, that works, but I ran into an issue: I need to reset the index if we're
// on the last element in the array! Otherwise it just keeps on going to indices
// that don't exist. I'll compare the current index against the length of the
// albums array and set it back to zero when I've reached the end.

// Whew. Okay, all done!