First commit

Lab 5/flex.js

@@ -0,0 +1,47 @@
+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)));
+})();