Split

script.js

@@ -0,0 +1,51 @@
+function handleImage(file, element) {
+  if (file && file.type.startsWith("image/")) {
+    const reader = new FileReader();
+    reader.onload = (event) => {
+      if (event.target) {
+        element.src = event.target.result;
+      }
+    };
+    reader.readAsDataURL(file);
+  } else {
+    alert("Please drop an image file.");
+  }
+}
+
+function handleUpload(event) {
+  event.preventDefault();
+  const element = event.target.parentElement.querySelector("img");
+  handleImage(event.target.files[0], element);
+}
+
+const handleDrop = (e) => {
+  e.preventDefault();
+  const element = e.currentTarget;
+  const file = e.dataTransfer.files[0];
+  handleImage(file, element);
+};
+
+const handleDragOver = (e) => {
+  e.stopPropagation();
+  e.preventDefault();
+};
+
+const handleAdd = () => {
+  const laput = document.querySelector(".laput");
+  const template = document.querySelector("#lappu-template");
+  const lisalappuButton = document.querySelector(".lisalappu");
+  const clone = template.content.cloneNode(true);
+  laput.insertBefore(clone, lisalappuButton);
+};
+
+const handleYeet = (event) => {
+  const lappu = event.target;
+  if (lappu.classList.contains("lappu")) {
+    lappu.parentNode.removeChild(lappu);
+    event.preventDefault();
+  }
+};
+
+const handleBoot = () => {
+  handleAdd();
+};