stacked divs by image click, one div fixed-CodePudding

I have got the following code (by the user tacoshy), that works fine so far. There is just one think I would like to add:

Once the page is loaded I want one image to be displayed already, that is not shown in the selector down below. So you will only see it on page load, but can't select it to see it again once an item of the selector was chosen.

I tried by just giving it a lower z-index than the other images, but the then the scaling is off. So is there any way to add the element with the mentioned attributes to the list of pictures in the div "container"? If so, please let me know how.

State one
State two

var preview = document.querySelector('.preview'),
counter = '1';
picture = ''

function addRed() {
  picture = 'red';
  addPicture();
}

function addGreen() {
  picture = 'green';
  addPicture();
}

function addBlue() {
  picture = 'blue';
  addPicture();
}

function addYellow() {
  picture = 'yellow';
  addPicture();
}

function addPicture() {
  var img = document.createElement('img'),
      rotation = Math.round(Math.random() * 40 - 20);
  switch (picture) {
    case 'red':
      img.src = 'https://via.placeholder.com/350.jpg/FF0000';
      break;
    case 'green':
      img.src = 'https://via.placeholder.com/350.jpg/00FF00';
      break;
    case 'blue':
      img.src = 'https://via.placeholder.com/350.jpg/0000FF';
      break;
    case 'yellow':
      img.src = 'https://via.placeholder.com/350.jpg/FFFF00';
      break;
  }
  img.style.position = 'absolute';
  img.style.top = '50%';
  img.style.left = '50%';
  img.style.transform = 'translate(-50%, -50%) rotate('   rotation   'deg)';
  img.style.zIndex = counter;  
  preview.appendChild(img);
  
  var counter = counter   1;
}


 <div >
  <div ></div>
  <div ><img src="https://via.placeholder.com/100.jpg/FF0000" onclick="addRed()"></div>
  <div ><img src="https://via.placeholder.com/100.jpg/00FF00" onclick="addGreen()"></div>
  <div ><img src="https://via.placeholder.com/100.jpg/0000FF" onclick="addBlue()"></div>
  <div ><img src="https://via.placeholder.com/100.jpg/FFFF00" onclick="addYellow()"></div>
</div>

.container {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  grid-gap: 10px;
}

.preview {
  grid-column: 1 / -1;
  aspect-ratio: 1 / 1;
  position: relative;
}

.selector {
  padding: 10px;
}

.selector > img {
  display: block;
  object-fit: contain;
  width: 100%;
}

CodePudding user response：

I assume that the goal is rendering a default image and not showing it anymore after you start clicking to any items in selector. You can call your function in onload and then you can remove it after first item clicked by checking counter value. You should add a default option also for your switch cases.

window.onload = (event) => {
  addPicture();
};

If you do not want to remove default image then you should cancel this line from my answer

if(counter == 1) {
    preview.removeChild(preview.firstElementChild)
}

Stop rotation on first image:

if(counter == 1) {
    img.style.transform = 'translate(-50%, -50%)';
  }

var preview = document.querySelector('.preview'),
counter = 0;
picture = ''

function addRed() {
  picture = 'red';
  addPicture();
}

function addGreen() {
  picture = 'green';
  addPicture();
}

function addBlue() {
  picture = 'blue';
  addPicture();
}

function addYellow() {
  picture = 'yellow';
  addPicture();
}

function addPicture() {
  var img = document.createElement('img'),
      rotation = Math.round(Math.random() * 40 - 20);
  switch (picture) {
    case 'red':
      img.src = 'https://via.placeholder.com/350.jpg/FF0000';
      break;
    case 'green':
      img.src = 'https://via.placeholder.com/350.jpg/00FF00';
      break;
    case 'blue':
      img.src = 'https://via.placeholder.com/350.jpg/0000FF';
      break;
    case 'yellow':
      img.src = 'https://via.placeholder.com/350.jpg/FFFF00';
      break;
    default:
      img.src = 'https://via.placeholder.com/350.jpg/00000';
      break;
  }
  img.style.position = 'absolute';
  img.style.top = '50%';
  img.style.left = '50%';
  img.style.transform = 'translate(-50%, -50%) rotate('   rotation   'deg)';
  img.style.zIndex = counter;  
  if(counter == 1) {
    preview.removeChild(preview.firstElementChild)
  }
  if(counter == 0) {
    img.style.transform = 'translate(-50%, -50%)';
  }
  preview.appendChild(img);
  
  counter = counter   1;
}

window.onload = (event) => {
  addPicture();
};

.container {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  grid-gap: 10px;
}

.preview {
  grid-column: 1 / -1;
  aspect-ratio: 1 / 1;
  position: relative;
}

.selector {
  padding: 10px;
}

.selector > img {
  display: block;
  object-fit: contain;
  width: 100%;
}

<div >
  <div ></div>
  <div ><img src="https://via.placeholder.com/100.jpg/FF0000" onclick="addRed()"></div>
  <div ><img src="https://via.placeholder.com/100.jpg/00FF00" onclick="addGreen()"></div>
  <div ><img src="https://via.placeholder.com/100.jpg/0000FF" onclick="addBlue()"></div>
  <div ><img src="https://via.placeholder.com/100.jpg/FFFF00" onclick="addYellow()"></div>
</div>