JS landing page [closed]

I have a simple landing page. I contains three positions for showing an image on each position.

Then I have an array of images (more than three – eg 5 or 9).

How would you go about showing image 1,2,3 on position 1,2,3 in the first “screen” – and then one position (chosen randomly) at a time change to an image that is not there? – the change in the positions should not be in the order 1,2,3 – but randomly chosen.

The replacement could be:

set image 4 on position 3: 124
set image 3 on position 1: 324
set image 1 on position 1: 124

And so on. I need advice on how to approach this challenge.

It’s written i javascript.

Thank you.

Answer

Here you go with something to start with, before this thread is closed. I’m using colors instead of images, but that’s easy to replace. I think the code is self-explanatory.

Click to change color on a random box.

I didn’t add code to check if the color is already shown. I would use an array for that. Probably use a while loop or recursive code to randomize a new color until it’s not a color that is already shown.

var colorArr = ['red', 'blue', 'green', 'pink', 'purple', 'black', 'yellow'];
var numberOfBoxes = document.querySelectorAll('.flex-container > div').length;

function randomize(max, min) {
  min = min || 0;
  
  return Math.floor( Math.random() * max + min);
}

document.addEventListener('click', () => {
  let randomBoxId = `box${randomize(numberOfBoxes, 1)}`;
  let randomColor = colorArr[ randomize(colorArr.length) ];
  let style = `background-color: ${randomColor}`;
  let boxElement = document.getElementById(randomBoxId);

  console.log(randomBoxId, randomColor, style)

  boxElement.style = style;
});
.flex-container {
  display: flex;
}

.flex-container > div {
  width: 100px;
  height: 100px;
}
<div class="flex-container">
  <div id="box1" style="background-color: red"></div>
  <div id="box2" style="background-color: blue"></div>
  <div id="box3" style="background-color: green"></div>
</div>