48 lines
1.2 KiB
JavaScript
Executable File
48 lines
1.2 KiB
JavaScript
Executable File
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)));
|
|
})();
|