➕ feat: add modal

linder3hs · Mar 22, 2024 · 76a99ad · 76a99ad
1 parent 306e69d
commit 76a99ad
Show file tree

Hide file tree

Showing 2 changed files with 67 additions and 1 deletion.
diff --git a/semana-8/index.html b/semana-8/index.html
@@ -22,5 +22,54 @@
       <span id="error" class="text-xs text-red-500 mt-1"></span>
       <section id="container-tasks" class="mt-10"></section>
     </main>
+    <div id="modal" class="relative z-50 w-full">
+      <div class="fixed inset-0 bg-black/30"></div>
+      <div
+        class="fixed inset-0 w-full p-6 flex justify-center items-center rounded-md"
+      >
+        <div class="bg-white p-5 mx-auto w-full max-w-md border rounded-md">
+          <div id="modal-title" class="mb-5">
+            <h2 class="text-2xl font-semibold">Editar tarea</h2>
+          </div>
+          <div id="modal-content">
+            <form action="">
+              <input
+                id="input-edit-task"
+                type="text"
+                placeholder="Editar tarea"
+                class="w-full border py-2 px-4 rounded-md outline-none"
+              />
+              <div class="mt-5">
+                <div class="flex flex-col gap-5 mt-4">
+                  <div>
+                    <input id="input-edit-create" type="radio" name="status" />
+                    Creado
+                  </div>
+                  <div>
+                    <input id="input-edit-done" type="radio" name="status" />
+                    Terminado
+                  </div>
+                </div>
+              </div>
+              <div class="mt-5 flex justify-end gap-5">
+                <button
+                  onclick="closeModal()"
+                  type="button"
+                  class="py-2 px-4 border border-red-400 rounded-md"
+                >
+                  Cerrar
+                </button>
+                <button
+                  type="submit"
+                  class="bg-green-400 py-2 px-4 rounded-md text-white"
+                >
+                  Actualizar
+                </button>
+              </div>
+            </form>
+          </div>
+        </div>
+      </div>
+    </div>
   </body>
 </html>
diff --git a/semana-8/js/app.js b/semana-8/js/app.js
@@ -3,6 +3,11 @@ const form = document.querySelector("#form");
 const inputTask = document.querySelector("#input-task");
 const error = document.querySelector("#error");
 const containerTasks = document.querySelector("#container-tasks");
+const modal = document.querySelector("#modal");
+const inputEditTask = document.querySelector("#input-edit-task");
+
+// cuando iniciemos vamos a colocar la clase hidden
+modal.classList.add("hidden");
 
 // Si quiero obtener algo de localStorage y eso no existe este retorna null
 // Pasa que esta variable puede un string o un null
@@ -29,7 +34,7 @@ function renderInnerTask(task) {
     <p>${task.text}</p>
     <div class="flex gap-5">
       <button onclick="checkTask(${task.id})">✅</button>
-      <button onclick="editTask(${task.id})">✏️</button>
+      <button onclick="editTaskWithModal(${task.id})">✏️</button>
       <button onclick="deleteTask(${task.id})">🗑️</button>
     </div>
   `;
@@ -104,6 +109,10 @@ function cancelEdit(id) {
   taskContainer.innerHTML = renderInnerTask(task);
 }
 
+function closeModal() {
+  modal.classList.add("hidden");
+}
+
 function updateTask(id) {
   const updatedInputTask = document.querySelector(`#input-task-${id}`);
   if (updatedInputTask.value === "") {
@@ -120,6 +129,14 @@ function updateTask(id) {
   cancelEdit(id);
 }
 
+function editTaskWithModal(id) {
+  modal.classList.remove("hidden");
+  // buscar a la tarea
+  const task = tasks.find((item) => item.id === id);
+  inputEditTask.value = task.text;
+  inputEditTask.focus();
+}
+
 function editTask(id) {
   const taskContainer = document.querySelector(`#task-${id}`);
   taskContainer.innerHTML = "";