Advertisement
Not a member of Pastebin yet?
Sign Up,
it unlocks many cool features!
- // 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!
Advertisement
Add Comment
Please, Sign In to add comment
Advertisement