Cacher is the code snippet organizer for pro developers

body {
  font-family: "Lucida Sans Unicode", "Lucida Grande", sans-serif;
  color: #FFD700;
  text-shadow: 4px 4px 2px rgba(77, 42, 0, 1);
  background: url(https://farm8.static.flickr.com/7584/16581644839_6212d3a6cb_b.jpg);
  background-repeat: no-repeat;
  background-size: cover;
}

img {
  margin: 0.5em;
  border: 3px solid coral;
  border-radius: 15px;
  padding: 0.1em;
  box-shadow: 10px 10px 15px salmon;
}

#leftColumn {
  float: left;
  width: 35%;
  
}

.imgwrapper {
  display: flex;
  flex-flow: row wrap;
}

#rightColumn {
  float: left;
  width: 55%;
}

#enlargedPic {
  border: 2px solid yellow;
  width: 680px;
  height: 500px;
}

let myPicturesArray = [
{
"albumId": 1,
"id": 1,
"title": "Lizard on a screen",
"url": "https://images.freeimages.com/images/large-previews/42c/lizard-1525731.jpg",
"thumbnailUrl":"https://images.freeimages.com/images/small-previews/42c/lizard-1525731.jpg"  
},
{
"albumId": 1,
"id": 2,
"title": "Mosaic pattern",
"url": "https://images.freeimages.com/images/large-previews/d4d/mosaic-2-1190122.jpg",
"thumbnailUrl": "https://images.freeimages.com/images/small-previews/d4d/mosaic-2-1190122.jpg"
},
{
"albumId": 2,
"id": 51,
"title": "Repetition Surreal",
"url": "https://image.shutterstock.com/z/stock-photo-surreal-enigmatic-picture-on-canvas-638004649.jpg",
"thumbnailUrl": "https://thumb1.shutterstock.com/display_pic_with_logo/2848423/638004649/stock-photo-surreal-enigmatic-picture-on-canvas-638004649.jpg"
},
{
"albumId": 1,
"id": 32,
"title": "Seemless pattern",
"url": "https://image.shutterstock.com/z/stock-photo-city-seamless-pattern-can-be-used-for-wallpaper-website-background-wrapping-paper-hand-drawn-782811730.jpg",
"thumbnailUrl": "https://thumb1.shutterstock.com/display_pic_with_logo/566254/782811730/stock-photo-city-seamless-pattern-can-be-used-for-wallpaper-website-background-wrapping-paper-hand-drawn-782811730.jpg"
},
{
"albumId": 2,
"id": 52,
"title": "Piano keyboard Spiral",
"url": "https://image.shutterstock.com/z/stock-photo-unusual-abstract-piano-keyboard-spiral-background-fractal-like-endless-staircase-black-and-white-689573419.jpg",
"thumbnailUrl" : "https://thumb1.shutterstock.com/display_pic_with_logo/161590397/689573419/stock-photo-unusual-abstract-piano-keyboard-spiral-background-fractal-like-endless-staircase-black-and-white-689573419.jpg"
},
{
"albumId": 3,
"id": 127,
"title": "Wooden plugs",
"url": "https://image.shutterstock.com/z/stock-photo-natural-background-of-wooden-plugs-in-different-shades-and-colors-top-view-of-bottle-caps-with-red-699439762.jpg",
"thumbnailUrl": "https://thumb9.shutterstock.com/display_pic_with_logo/3841061/699439762/stock-photo-natural-background-of-wooden-plugs-in-different-shades-and-colors-top-view-of-bottle-caps-with-red-699439762.jpg"
},
{
"albumId": 3,
"id": 128,
"title": "Seagulls in the pond",
"url": "https://image.shutterstock.com/z/stock-photo-gulls-on-the-repetitive-posts-in-the-japanese-pond-1169878093.jpg",
"thumbnailUrl": "https://image.shutterstock.com/z/stock-photo-gulls-on-the-repetitive-posts-in-the-japanese-pond-1169878093.jpg"
},
  {
"albumId": 2,
"id": 66,
"title": "Pink Petals",
"url": "https://image.shutterstock.com/z/stock-photo-delicate-petals-of-a-pink-round-flower-close-up-natural-texture-and-rhythm-773410429.jpg",
"thumbnailUrl": "https://thumb1.shutterstock.com/display_pic_with_logo/166915884/773410429/stock-photo-delicate-petals-of-a-pink-round-flower-close-up-natural-texture-and-rhythm-773410429.jpg"
},
{
"albumId": 3,
"id": 32,
"title": "Stonework",
"url": "https://image.shutterstock.com/z/stock-photo-spacious-dark-blue-repetitive-texture-of-granite-stonework-whimsical-pattern-stone-masonry-1164385492.jpg",
"thumbnailUrl": "https://thumb9.shutterstock.com/display_pic_with_logo/1219193/1164385492/stock-photo-spacious-dark-blue-repetitive-texture-of-granite-stonework-whimsical-pattern-stone-masonry-1164385492.jpg"
}
];

// Display picures

myPicturesArray.forEach(function(currentImage) {
   let image = document.createElement("img");
   image.src = currentImage.thumbnailUrl;
   image.alt = currentImage.title;
   image.width = 150;
   image.height = 150;
   document.querySelector("#leftColumn").append(image);
   image.addEventListener('click', function(evt){showpic(evt,currentImage)});
   });

//Add event listener
function showpic(evt, selectedImg) {
  let bigPic = document.createElement("img");
  bigPic.src = selectedImg.url;
  bigPic.alt = selectedImg.alt;
  bigPic.width = 650;
  bigPic.height = 480;
  document.querySelector("#enlargedPic").innerHTML = "";
  document.querySelector("#enlargedPic").append(bigPic)
};
                                   

<html lang="en">
  <head>
    <title>Project: Interactive Picture Album</title>
    
  </head>
  
  <body>
    <h1>Interactive Picture Album</h1>
    <p> Just click on any of the thumbnail below and you will see the larger picture.  Enjoy!</p>
    
    <div class = "Container">
    
    <div id ="leftColumn" class = "imgwrapper">
      
      </div>
    </div>
    <div id = "rightColumn"> 
      <div id="enlargedPic"> </div>
          </div>
    <br>
    
      
      
      
      
      
  </body>
</html>