mobile responsive hocche

mdsiaofficial · Mar 20, 2024 · 3ccbfb3 · 3ccbfb3
1 parent 7adb47e
commit 3ccbfb3
Show file tree

Hide file tree

Showing 5 changed files with 394 additions and 133 deletions.
diff --git a/img/bgimg1.jpg b/img/bgimg1.jpg
diff --git a/img/bgimg2.jpg b/img/bgimg2.jpg
diff --git a/index.html b/index.html
@@ -1,46 +1,56 @@
 <!DOCTYPE html>
 <html lang="en">
+
 <head>
     <meta charset="UTF-8">
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
     <link rel="stylesheet" href="style.css">
+
     <title>Kanban</title>
 </head>
+
 <body>
 
-    <h1 class="title">Kanban Board</h1>
-    <div class="board">
-        <div class="todoContainer">
-
-            <div class="status">
-                <h1>Todo List</h1>
-                <button id="addBtn">Add +</button>
-
-                <div class="todo" draggable="true">
-                    Buy a pizza
-                    <!-- <p>Buy a pizza</p> -->
-                    <span class="close">&times;</span>
-                </div>
-            </div>
-
-            <div class="status">
-                <h1>In Progress</h1>
-            </div>
-
-            <div class="status">
-                <h1>Paused</h1>
-            </div>
-
-            <div class="status">
-                <h1>Completed</h1>
+    <div class="appTitle">
+        Kanban Board</div>
+    <!-- modal -->
+    <div class="modal" id="todo_form">
+        <div class="header">
+            <div class="title">Add Todo</div>
+            <button class="btn close-modal">&times;</button>
+        </div>
+        <div class="body">
+            <input type="text" id="todo_input" />
+            <input type="submit" value="Add Todo" id="todo_submit" />
+        </div>
+    </div>
+
+
+    <!-- todo -->
+    <div class="todo-container">
+        <div class="status">
+            <h1>Paused</h1>
+        </div>
+        <div class="status" id="no_status">
+            <h1>No Status</h1>
+            <button id="add_btn" data-target-modal="#todo_form">Add Todo</button>
+            <div class="todo" draggable="true">
+                Buy a Pizza
+                <span class="close">&times;</span>
             </div>
-
-
         </div>
 
+        <div class="status">
+            <h1>In Progress</h1>
+        </div>
+        <div class="status">
+            <h1>Completed</h1>
+        </div>
     </div>
-
+
+    <div id="overlay"></div>
 
     <script src="script.js"></script>
 </body>
+
 </html>
diff --git a/script.js b/script.js
@@ -1,47 +1,125 @@
 const todos = document.querySelectorAll(".todo");
-const allStatus = document.querySelectorAll(".status");
+const all_status = document.querySelectorAll(".status");
 let draggableTodo = null;
 
-
-todos.forEach((td)=>{
-    td.addEventListener("dragstart", StartMove);
-    td.addEventListener("dragend", StopMove);
+todos.forEach((todo) => {
+    todo.addEventListener("dragstart", dragStart);
+    todo.addEventListener("dragend", dragEnd);
 });
 
-function StartMove(){
+function dragStart() {
     draggableTodo = this;
-    // console.log("drag start");
-
+    setTimeout(() => {
+        this.style.display = "none";
+    }, 0);
+    console.log("dragStart");
 }
-function StopMove(){
+
+function dragEnd() {
     draggableTodo = null;
-    // console.log("drag stop");
-
+    setTimeout(() => {
+        this.style.display = "block";
+    }, 0);
+    console.log("dragEnd");
 }
 
-allStatus.forEach((stat)=>{
-    stat.addEventListener("dragover", MoveOver);
-    stat.addEventListener("dragenter", MoveEnter);
-    stat.addEventListener("dragleave", MoveLeave);
-    stat.addEventListener("drop", Dropped);
+all_status.forEach((status) => {
+    status.addEventListener("dragover", dragOver);
+    status.addEventListener("dragenter", dragEnter);
+    status.addEventListener("dragleave", dragLeave);
+    status.addEventListener("drop", dragDrop);
 });
 
-function MoveOver(e){
+function dragOver(e) {
     e.preventDefault();
-    // console.log("drag over");
-
+    //   console.log("dragOver");
 }
-function MoveEnter(){
-    this.style.border = "2px dashed #ccc";
-    console.log("drag enter");
-
+
+function dragEnter() {
+    this.style.border = "1px dashed #ccc";
+    console.log("dragEnter");
 }
-function MoveLeave(){
-    console.log("drag leave");
-
+
+function dragLeave() {
+    this.style.border = "none";
+    console.log("dragLeave");
 }
-function Dropped(){
+
+function dragDrop() {
+    this.style.border = "none";
     this.appendChild(draggableTodo);
     console.log("dropped");
-
-}
+}
+
+/* modal */
+const btns = document.querySelectorAll("[data-target-modal]");
+const close_modals = document.querySelectorAll(".close-modal");
+const overlay = document.getElementById("overlay");
+
+btns.forEach((btn) => {
+    btn.addEventListener("click", () => {
+        document.querySelector(btn.dataset.targetModal).classList.add("active");
+        overlay.classList.add("active");
+    });
+});
+
+close_modals.forEach((btn) => {
+    btn.addEventListener("click", () => {
+        const modal = btn.closest(".modal");
+        modal.classList.remove("active");
+        overlay.classList.remove("active");
+    });
+});
+
+window.onclick = (event) => {
+    if (event.target == overlay) {
+        const modals = document.querySelectorAll(".modal");
+        modals.forEach((modal) => modal.classList.remove("active"));
+        overlay.classList.remove("active");
+    }
+};
+
+/* create todo  */
+const todo_submit = document.getElementById("todo_submit");
+
+todo_submit.addEventListener("click", createTodo);
+
+function createTodo() {
+    const todo_div = document.createElement("div");
+    const input_val = document.getElementById("todo_input").value;
+    const txt = document.createTextNode(input_val);
+
+    todo_div.appendChild(txt);
+    todo_div.classList.add("todo");
+    todo_div.setAttribute("draggable", "true");
+
+    /* create span */
+    const span = document.createElement("span");
+    const span_txt = document.createTextNode("\u00D7");
+    span.classList.add("close");
+    span.appendChild(span_txt);
+
+    todo_div.appendChild(span);
+
+    no_status.appendChild(todo_div);
+
+    span.addEventListener("click", () => {
+        span.parentElement.style.display = "none";
+    });
+    //   console.log(todo_div);
+
+    todo_div.addEventListener("dragstart", dragStart);
+    todo_div.addEventListener("dragend", dragEnd);
+
+    document.getElementById("todo_input").value = "";
+    todo_form.classList.remove("active");
+    overlay.classList.remove("active");
+}
+
+const close_btns = document.querySelectorAll(".close");
+
+close_btns.forEach((btn) => {
+    btn.addEventListener("click", () => {
+        btn.parentElement.style.display = "none";
+    });
+});