Advertisement
Guest User

Untitled

a guest
Feb 21st, 2017
77
0
Never
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
text 2.55 KB | None | 0 0
  1. // Bloc Frontend Foundation
  2. // Checkpoint 11 Assignment Instructions
  3. //
  4. // Add an event listener to the album cover. When a user clicks it, the album
  5. // page content should toggle between the three album objects: albumPicasso,
  6. // albumMarconi, and your album object.
  7. //
  8.  
  9. // Okay, I know I'll need a click handler on the big album cover image, so I'll
  10. // start there. The click handler will be very simple to confirm it's working.
  11. // I'd probably just insert a console.log() and make sure that shows up in
  12. // the console when I click the image.
  13.  
  14. // Cool, that was an easy win. Time to move on to more of the meat of the
  15. // assignment. The instructions say to switch the album we're displaying info
  16. // for when the cover image is clicked. I can use the setCurrentAlbum()
  17. // function I created in the checkpoint to handle swapping the information. To
  18. // make things easy I'll start by hardcoding an album other than the the one I'm
  19. // loading by default in my window.onload handler. That way I know the function
  20. // is working.
  21.  
  22. // Alright, now that it's swapping to that other album on click I need to make
  23. // it cycle through to the next album dynamically instead of using a static
  24. // variable like I am now. Any time I need to loop over a collection the first
  25. // thing I think of is a simple array. My album variables are floating around
  26. // by themselves so I'm going to create an albums array and add each of them to
  27. // it.
  28.  
  29. // Now that I have an array I'm going to update my onclick handler to point to
  30. // a specific album in the array instead of one of the named album variables.
  31. // I'll do this to make sure my data is as I expect and still renders correctly.
  32. // I should probably also console.log() the entire albums array to inspect it.
  33.  
  34. // Awesome, that works. Now to cycle the albums. To do that I'm going to need to
  35. // keep track of whichever one is currently being displayed so I know where in
  36. // the array I am. I'll create a variable to hold that current index number and
  37. // set it to the album I want to show by default - probably the first in the
  38. // array, but it could be any of them.
  39.  
  40. // Great, now I can update my onclick handler for the album cover so it advances
  41. // to the next item in the array. I'll simply increment my current index and be
  42. // good to go!
  43.  
  44. // Okay, that works, but I ran into an issue: I need to reset the index if we're
  45. // on the last element in the array! Otherwise it just keeps on going to indices
  46. // that don't exist. I'll compare the current index against the length of the
  47. // albums array and set it back to zero when I've reached the end.
  48.  
  49. // Whew. Okay, all done!
Advertisement
Add Comment
Please, Sign In to add comment
Advertisement