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;
+ }
+}