From eafca9af7d310c58539bfaa8c69505327078affa Mon Sep 17 00:00:00 2001 From: couldntfindabetterusername Date: Mon, 7 Mar 2022 10:47:29 +0530 Subject: [PATCH] day 21 completed --- my code/21-drag-n-drop/index.html | 27 +++++++++++++++++++ my code/21-drag-n-drop/script.js | 39 ++++++++++++++++++++++++++++ my code/21-drag-n-drop/style.css | 43 +++++++++++++++++++++++++++++++ 3 files changed, 109 insertions(+) create mode 100644 my code/21-drag-n-drop/index.html create mode 100644 my code/21-drag-n-drop/script.js create mode 100644 my code/21-drag-n-drop/style.css diff --git a/my code/21-drag-n-drop/index.html b/my code/21-drag-n-drop/index.html new file mode 100644 index 0000000..cd91f28 --- /dev/null +++ b/my code/21-drag-n-drop/index.html @@ -0,0 +1,27 @@ + + + + + + + + 21 drag n drop + + + + + + +
+
+
+
+
+
+
+ + + + + + \ No newline at end of file diff --git a/my code/21-drag-n-drop/script.js b/my code/21-drag-n-drop/script.js new file mode 100644 index 0000000..a8142a7 --- /dev/null +++ b/my code/21-drag-n-drop/script.js @@ -0,0 +1,39 @@ +const fill = document.querySelector(".fill"); +const empties = document.querySelectorAll(".empty"); + +fill.addEventListener("dragstart", dragStart); +fill.addEventListener("dragend", dragEnd); + +for (const empty of empties) { + empty.addEventListener("dragover", dragOver); + empty.addEventListener("dragenter", dragEnter); + empty.addEventListener("dragleave", dragLeave); + empty.addEventListener("drop", dragDrop); +} + +function dragStart() { + this.className += " hold"; + setTimeout(() => (this.className = "invisible"), 0); +} + +function dragEnd() { + this.className = "fill"; +} + +function dragOver(e) { + e.preventDefault(); +} + +function dragEnter(e) { + e.preventDefault(); + this.className += " hovered"; +} + +function dragLeave() { + this.className = "empty"; +} + +function dragDrop() { + this.className = "empty"; + this.append(fill); +} diff --git a/my code/21-drag-n-drop/style.css b/my code/21-drag-n-drop/style.css new file mode 100644 index 0000000..9d50f36 --- /dev/null +++ b/my code/21-drag-n-drop/style.css @@ -0,0 +1,43 @@ +* { + margin: 0; + padding: 0; +} + +body { + height: 100vh; + background-color: deepskyblue; + display: flex; + justify-content: center; + align-items: center; +} + +.empty { + height: 150px; + width: 150px; + border: 3px solid black; + background-color: #fff; + margin: 10px; +} + +.fill { + background-image: url("https://source.unsplash.com/random/150x150"); + width: 150px; + height: 150px; + cursor: pointer; +} + +.hold { + border: 5px solid #ccc; +} + +.hovered { + background: #333; + border-color: white; + border-style: dashed; +} + +@media screen and (max-width: 800px) { + body { + flex-direction: column; + } +}