const picsumBase = "https://picsum.photos/200";

let mainElement;

let addButton;
let spreadButton;
let rotateButton;

function spacing() {
  spreadButton.classList.toggle("active");
  mainElement.classList.toggle("spread");
}

function rotate() {
  rotateButton.classList.toggle("active");
  mainElement.classList.toggle("vert");
}

function addImg() {
  const randomNumber = document.getElementsByTagName("img").length + 1;

  const newImg = document.createElement("img");
  newImg.src = `${picsumBase}?random=${randomNumber}`;
  newImg.alt = "random square image";
  newImg.addEventListener("click", removeImg.bind(null, newImg));
  mainElement.appendChild(newImg);
}

function removeImg(element) {
  element.remove();
}

(function () {
  mainElement = document.querySelector("main");

  addButton = document.querySelector("#add");
  spreadButton = document.querySelector("#spread");
  rotateButton = document.querySelector("#rotate");

  addButton.addEventListener("click", addImg);
  spreadButton.addEventListener("click", spacing);
  rotateButton.addEventListener("click", rotate);

  document
    .querySelectorAll("img")
    .forEach((img) => img.addEventListener("click", removeImg.bind(null, img)));
})();