SI16/sticker.js

const informations = document.getElementById("information-list");
const stickerContainer = document.getElementById("sticker-container");

infoList = Array.from(informations.children);
loopIndex = 0;

let windowWidth;
let windowHeight;

let palette = ["#9EDAE2", "#9FD3A8", "#F7D8E8", "#F9F5B0", "#FFC496"];

window.addEventListener("load", () => {
	getSize();
	let color = palette[(palette.length * Math.random()) | 0];
	document.documentElement.style.setProperty("--background", color);
});

window.addEventListener("resize", (e) => {
	getSize();
});

function getSize() {
	windowWidth = stickerContainer.clientWidth;
	windowHeight = stickerContainer.clientHeight;
}

function percentagePosition(e, target) {
	let targetRect = target.getBoundingClientRect();
	let x = e.clientX - targetRect.left;
	let y = e.clientY - targetRect.top;
	return { x: ((x / windowWidth) * 100).toFixed(2), y: ((y / windowHeight) * 100).toFixed(2) };
}

window.addEventListener("click", (e) => {
	placeSticker(percentagePosition(e, stickerContainer), infoList[loopIndex]);

	// Cringe sorry
	if (loopIndex < infoList.length - 1) {
		loopIndex++;
	} else {
		loopIndex = 0;
	}
});

function placeSticker(position, element) {
	let sticker = element.cloneNode(true);
	sticker.classList.add("sticker");
	sticker.style.left = position.x + "%";
	sticker.style.top = position.y + "%";

	sticker.style.transform = `
    translate(-50%, -50%)
    rotate(${Math.random() * 40 - 20}deg)
    `;

	stickerContainer.appendChild(sticker);
}