div(class="container")
  p
    button(id="add") Add photo
  div(id="portfolio")

html{
  background: #222;
}

.container {
  overflow: hidden;
}

button {
  font-size: 20px;
  color: white;
  background: #00d0ff;
  border: 1px solid white;
  padding: 5px 20px;
  &:hover {
    cursor: pointer; 
    background: #33d9ff;
  }
  &:active {
    background: #0da8cc;
  }
}

#portfolio {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 100px 0;
  height: 200px;
}

.portfolio-item {
  width: 200px;
  height: 200px;
  float:left;
  margin: -50px;
  box-shadow: -5px 0 10px rgba(0,0,0,0.8);
  transform: perspective(400px) rotateY(45deg);
  transition: all .5s ease-in-out;
  position: relative;
  z-index: 1;
  overflow: hidden;
  
  &:hover,
  &:focus {
    box-shadow: 0 20px 20px rgba(0,0,0,0.8);
    transform: perspective(400px) rotateY(0deg);
    z-index: 2;
    margin:0;
    transform: scale(1.1);

    .portfolio-img {
      transform: scale(1.3);
    }
  }
}

.portfolio-img {
  background-repeat: no-repeat;
  background-size: cover;
  background-position: center center;
  width: 100%;
  height: 100%;
  transition: all .2s ease-in-out;
}

/* generates div elements and inserts unique images from unsplash's API as the background-image via inline style. div and inline style used for transform:scale effect */ 

document.querySelector('#add').onclick = () => {
  
  const newDiv = document.createElement('div');
  newDiv.classList.add('portfolio-item'); 
  const randomImg = Math.floor(Math.random() * Math.floor(99));
  const divChild = document.createElement("div");
  const newImg = fetch(`https://source.unsplash.com/random/6${randomImg}`);
  
  newImg.then(response => {
    return response.url;
  }).then(url => {
        const srcUrl = 'background-image: url("' + url + '")';
        divChild.setAttribute('style', srcUrl);
  });

  divChild.classList.add('portfolio-img'); 
  newDiv.appendChild(divChild);  
  const portfolio = document.querySelector( '#portfolio' );
  portfolio.appendChild(newDiv); 
  
}