From 0a55fc3564e589a1f18409bf2a6cae5d786a6670 Mon Sep 17 00:00:00 2001
From: Daridjcm <daricorreamedina@gmail.com>
Date: Mon, 15 Jan 2024 22:30:17 -0500
Subject: [PATCH 1/4] Add modal for create notes

---
 index.html | 38 ++++++++++++++++++++++++++++++++++++--
 modal.js   | 33 +++++++++++++++++++++++++++++++++
 2 files changed, 69 insertions(+), 2 deletions(-)
 create mode 100644 modal.js
diff --git a/index.html b/index.html
index f17d46b..05a345d 100644
--- a/index.html
+++ b/index.html
@@ -12,7 +12,7 @@
   <body class="px-4">
     <header class="flex justify-between items-end mt-10">
       <h1 class="text-4xl tracking-tighter">Your Notes</h1>
-      <button class="px-3 py-1 border border-black text-2xl rounded">+</button>
+      <button id="openDialogButton" class="px-3 py-1 border border-black text-2xl rounded">+</button>
     </header>
 
     <!-- Slider main container -->
@@ -70,7 +70,7 @@ <h1 class="text-4xl tracking-tighter">Your Notes</h1>
           </div>
         </div>
       </section>
-
+  
       <section id="cards mb-3">
         <div class="container mx-auto m-3">
           <div class="lg:grid grid-cols-3 grid-rows-1 min:grid-cols-1 gap-5 py-3">
@@ -130,6 +130,39 @@ <h3 class="font-bold mb-2">Título</h3>
       </section>
     </main>
 
+    <!-- Simple pop-up dialog box, containing a form -->
+    <div class="dialog p-8 w-full md:w-3/4 lg:w-1/2 xl:w-2/3">
+      <dialog id="editDialog" class="bg-white p-10 border border-neutral-800 rounded-2xl shadow-lg">
+        <form method="dialog" onsubmit="editElement(); return false;">
+          <section class="mb-8">
+            <label for="title" class="block text-md font-semibold text-neutral-900 mb-2">Title:</label>
+            <input class="w-full text-white p-2 border border-black rounded" type="text" id="title" required>
+          </section>
+          <section class="mb-8">
+            <label for="dateNow" class="block text-md font-semibold text-neutral-900 mb-2">Current date:</label>
+            <input type="datetime-local" id="dateNow" class="w-full p-4 border border-black rounded">
+          </section>
+          <section class="mb-8">
+            <label for="description" class="block text-md font-semibold text-neutral-900 mb-2">Description:</label>
+            <textarea id="description" class="w-full p-12 border border-black rounded" required></textarea>
+          </section>
+          <menu class="flex justify-evenly">
+            <button id="cancel" type="reset" onclick="closeDialog()" class="mr-4 bg-red-500 text-white py-2 px-6 rounded">
+              <svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 24 24">
+                <path fill="#ffffff" d="M7 21q-.825 0-1.412-.587T5 19V6q-.425 0-.712-.288T4 5q0-.425.288-.712T5 4h4q0-.425.288-.712T10 3h4q.425 0 .713.288T15 4h4q.425 0 .713.288T20 5q0 .425-.288.713T19 6v13q0 .825-.587 1.413T17 21zM17 6H7v13h10zM7 6v13zm5 7.9l1.9 1.9q.275.275.7.275t.7-.275q.275-.275.275-.7t-.275-.7l-1.9-1.9l1.9-1.9q.275-.275.275-.7t-.275-.7q-.275-.275-.7-.275t-.7.275L12 11.1l-1.9-1.9q-.275-.275-.7-.275t-.7.275q-.275.275-.275.7t.275.7l1.9 1.9l-1.9 1.9q-.275.275-.275.7t.275.7q.275.275.7.275t.7-.275z"/>
+              </svg>
+            </button>
+            <button type="submit" class="bg-green-500 text-white py-2 px-6 rounded">
+              <svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 24 24">
+              <g fill="none" stroke="#ffffff" stroke-linecap="round" stroke-linejoin="round" stroke-width="2">
+                <path d="M20 19V5a1 1 0 0 0-1-1H5a1 1 0 0 0-1 1v14a1 1 0 0 0 1 1h14a1 1 0 0 0 1-1Z"/><path stroke-dasharray="14" stroke-dashoffset="14" d="M8 12L11 15L16 10"><animate fill="freeze" attributeName="stroke-dashoffset" dur="0.2s" values="14;0"/></path></g>
+              </svg>
+            </button>
+          </menu>
+        </form>
+      </dialog>
+    </div>
+
     <footer class="mb-4">
       <div class="bg-slate-200 p-3 shadow-md hover:shadow-xl rounded">
         <p class="text-center">
@@ -149,5 +182,6 @@ <h3 class="font-bold mb-2">Título</h3>
     <script src="https://cdn.jsdelivr.net/npm/swiper@11/swiper-bundle.min.js"></script>
     <script src="/main.js"></script>
     <script src="/swiper.js"></script>
+    <script src="/modal.js"></script>
   </body>
 </html>
diff --git a/modal.js b/modal.js
new file mode 100644
index 0000000..fc2d30d
--- /dev/null
+++ b/modal.js
@@ -0,0 +1,33 @@
+document.getElementById('openDialogButton').addEventListener('click', openDialog);
+document.getElementById('cancel').addEventListener('click', closeDialog);
+let editDialog = document.getElementById('editDialog');
+
+function openDialog() {
+  editDialog.showModal();
+  
+  // Obtener la fecha actual y mostrarla en el campo datetime-local
+  var dateNow = new Date();
+  var dateFormat = dateNow.toISOString().slice(0, 16);
+  document.getElementById('dateNow').value = dateFormat;
+}
+
+function closeDialog() {
+  editDialog.close();  
+}
+
+
+function editElement() {
+  var title = document.getElementById('title').value;
+  var description = document.getElementById('description').value;
+  var dateNow = document.getElementById('dateNow').value;
+
+  if (title, description, dateNow || value) {
+    console.log('Title: ' + title);
+    console.log('Description: ' + description);
+    console.log('Current date: ' + dateNow);
+  } else {
+    alert("Please, fill outs all fields.");
+  }
+  // Cerrar el diálogo después de la edición
+  cerrarDialog();
+}

From 004c45d146b0efdfb87d11e57486d6f9c9897ed3 Mon Sep 17 00:00:00 2001
From: Daridjcm <daricorreamedina@gmail.com>
Date: Mon, 15 Jan 2024 22:43:52 -0500
Subject: [PATCH 2/4] Format documents with Prettier

---
 index.html | 19 +++++++++++++------
 modal.js   |  9 ++++-----
 2 files changed, 17 insertions(+), 11 deletions(-)

diff --git a/index.html b/index.html
index 05a345d..88ddeae 100644
--- a/index.html
+++ b/index.html
@@ -70,7 +70,7 @@ <h1 class="text-4xl tracking-tighter">Your Notes</h1>
           </div>
         </div>
       </section>
-  
+
       <section id="cards mb-3">
         <div class="container mx-auto m-3">
           <div class="lg:grid grid-cols-3 grid-rows-1 min:grid-cols-1 gap-5 py-3">
@@ -136,11 +136,11 @@ <h3 class="font-bold mb-2">Título</h3>
         <form method="dialog" onsubmit="editElement(); return false;">
           <section class="mb-8">
             <label for="title" class="block text-md font-semibold text-neutral-900 mb-2">Title:</label>
-            <input class="w-full text-white p-2 border border-black rounded" type="text" id="title" required>
+            <input class="w-full text-white p-2 border border-black rounded" type="text" id="title" required />
           </section>
           <section class="mb-8">
             <label for="dateNow" class="block text-md font-semibold text-neutral-900 mb-2">Current date:</label>
-            <input type="datetime-local" id="dateNow" class="w-full p-4 border border-black rounded">
+            <input type="datetime-local" id="dateNow" class="w-full p-4 border border-black rounded" />
           </section>
           <section class="mb-8">
             <label for="description" class="block text-md font-semibold text-neutral-900 mb-2">Description:</label>
@@ -149,13 +149,20 @@ <h3 class="font-bold mb-2">Título</h3>
           <menu class="flex justify-evenly">
             <button id="cancel" type="reset" onclick="closeDialog()" class="mr-4 bg-red-500 text-white py-2 px-6 rounded">
               <svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 24 24">
-                <path fill="#ffffff" d="M7 21q-.825 0-1.412-.587T5 19V6q-.425 0-.712-.288T4 5q0-.425.288-.712T5 4h4q0-.425.288-.712T10 3h4q.425 0 .713.288T15 4h4q.425 0 .713.288T20 5q0 .425-.288.713T19 6v13q0 .825-.587 1.413T17 21zM17 6H7v13h10zM7 6v13zm5 7.9l1.9 1.9q.275.275.7.275t.7-.275q.275-.275.275-.7t-.275-.7l-1.9-1.9l1.9-1.9q.275-.275.275-.7t-.275-.7q-.275-.275-.7-.275t-.7.275L12 11.1l-1.9-1.9q-.275-.275-.7-.275t-.7.275q-.275.275-.275.7t.275.7l1.9 1.9l-1.9 1.9q-.275.275-.275.7t.275.7q.275.275.7.275t.7-.275z"/>
+                <path
+                  fill="#ffffff"
+                  d="M7 21q-.825 0-1.412-.587T5 19V6q-.425 0-.712-.288T4 5q0-.425.288-.712T5 4h4q0-.425.288-.712T10 3h4q.425 0 .713.288T15 4h4q.425 0 .713.288T20 5q0 .425-.288.713T19 6v13q0 .825-.587 1.413T17 21zM17 6H7v13h10zM7 6v13zm5 7.9l1.9 1.9q.275.275.7.275t.7-.275q.275-.275.275-.7t-.275-.7l-1.9-1.9l1.9-1.9q.275-.275.275-.7t-.275-.7q-.275-.275-.7-.275t-.7.275L12 11.1l-1.9-1.9q-.275-.275-.7-.275t-.7.275q-.275.275-.275.7t.275.7l1.9 1.9l-1.9 1.9q-.275.275-.275.7t.275.7q.275.275.7.275t.7-.275z"
+                />
               </svg>
             </button>
             <button type="submit" class="bg-green-500 text-white py-2 px-6 rounded">
               <svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 24 24">
-              <g fill="none" stroke="#ffffff" stroke-linecap="round" stroke-linejoin="round" stroke-width="2">
-                <path d="M20 19V5a1 1 0 0 0-1-1H5a1 1 0 0 0-1 1v14a1 1 0 0 0 1 1h14a1 1 0 0 0 1-1Z"/><path stroke-dasharray="14" stroke-dashoffset="14" d="M8 12L11 15L16 10"><animate fill="freeze" attributeName="stroke-dashoffset" dur="0.2s" values="14;0"/></path></g>
+                <g fill="none" stroke="#ffffff" stroke-linecap="round" stroke-linejoin="round" stroke-width="2">
+                  <path d="M20 19V5a1 1 0 0 0-1-1H5a1 1 0 0 0-1 1v14a1 1 0 0 0 1 1h14a1 1 0 0 0 1-1Z" />
+                  <path stroke-dasharray="14" stroke-dashoffset="14" d="M8 12L11 15L16 10">
+                    <animate fill="freeze" attributeName="stroke-dashoffset" dur="0.2s" values="14;0" />
+                  </path>
+                </g>
               </svg>
             </button>
           </menu>
diff --git a/modal.js b/modal.js
index fc2d30d..55eb11f 100644
--- a/modal.js
+++ b/modal.js
@@ -4,7 +4,7 @@ let editDialog = document.getElementById('editDialog');
 
 function openDialog() {
   editDialog.showModal();
-  
+
   // Obtener la fecha actual y mostrarla en el campo datetime-local
   var dateNow = new Date();
   var dateFormat = dateNow.toISOString().slice(0, 16);
@@ -12,21 +12,20 @@ function openDialog() {
 }
 
 function closeDialog() {
-  editDialog.close();  
+  editDialog.close();
 }
 
-
 function editElement() {
   var title = document.getElementById('title').value;
   var description = document.getElementById('description').value;
   var dateNow = document.getElementById('dateNow').value;
 
-  if (title, description, dateNow || value) {
+  if ((title, description, dateNow || value)) {
     console.log('Title: ' + title);
     console.log('Description: ' + description);
     console.log('Current date: ' + dateNow);
   } else {
-    alert("Please, fill outs all fields.");
+    alert('Please, fill outs all fields.');
   }
   // Cerrar el diálogo después de la edición
   cerrarDialog();

From f032a41c48b41ebadd59fd048a17dd66694ae3e0 Mon Sep 17 00:00:00 2001
From: Michael Liendo <michael.m.liendo.r@gmail.com>
Date: Tue, 16 Jan 2024 22:35:09 -0400
Subject: [PATCH 3/4] arreglando algunos cmabios

---
 index.html | 10 +++-------
 main.js    |  2 ++
 modal.js   | 11 ++---------
 3 files changed, 7 insertions(+), 16 deletions(-)

diff --git a/index.html b/index.html
index 88ddeae..7b0dd5c 100644
--- a/index.html
+++ b/index.html
@@ -131,20 +131,16 @@ <h3 class="font-bold mb-2">Título</h3>
     </main>
 
     <!-- Simple pop-up dialog box, containing a form -->
-    <div class="dialog p-8 w-full md:w-3/4 lg:w-1/2 xl:w-2/3">
+    <div class="dialog p-8 w-full md:w-2/3 lg:w-1/2 xl:w-2/3">
       <dialog id="editDialog" class="bg-white p-10 border border-neutral-800 rounded-2xl shadow-lg">
         <form method="dialog" onsubmit="editElement(); return false;">
           <section class="mb-8">
             <label for="title" class="block text-md font-semibold text-neutral-900 mb-2">Title:</label>
-            <input class="w-full text-white p-2 border border-black rounded" type="text" id="title" required />
-          </section>
-          <section class="mb-8">
-            <label for="dateNow" class="block text-md font-semibold text-neutral-900 mb-2">Current date:</label>
-            <input type="datetime-local" id="dateNow" class="w-full p-4 border border-black rounded" />
+            <input class="w-full text-black p-2 border border-black rounded" type="text" id="title" required />
           </section>
           <section class="mb-8">
             <label for="description" class="block text-md font-semibold text-neutral-900 mb-2">Description:</label>
-            <textarea id="description" class="w-full p-12 border border-black rounded" required></textarea>
+            <textarea rows="8" id="description" class="w-full border border-black rounded" required></textarea>
           </section>
           <menu class="flex justify-evenly">
             <button id="cancel" type="reset" onclick="closeDialog()" class="mr-4 bg-red-500 text-white py-2 px-6 rounded">
diff --git a/main.js b/main.js
index 60fe7d7..7a8d6a0 100644
--- a/main.js
+++ b/main.js
@@ -28,3 +28,5 @@ function obtenerNotas() {
 
   return notas;
 }
+
+createNote();
diff --git a/modal.js b/modal.js
index 55eb11f..be68ec9 100644
--- a/modal.js
+++ b/modal.js
@@ -4,11 +4,6 @@ let editDialog = document.getElementById('editDialog');
 
 function openDialog() {
   editDialog.showModal();
-
-  // Obtener la fecha actual y mostrarla en el campo datetime-local
-  var dateNow = new Date();
-  var dateFormat = dateNow.toISOString().slice(0, 16);
-  document.getElementById('dateNow').value = dateFormat;
 }
 
 function closeDialog() {
@@ -18,15 +13,13 @@ function closeDialog() {
 function editElement() {
   var title = document.getElementById('title').value;
   var description = document.getElementById('description').value;
-  var dateNow = document.getElementById('dateNow').value;
 
-  if ((title, description, dateNow || value)) {
+  if ((title, description)) {
     console.log('Title: ' + title);
     console.log('Description: ' + description);
-    console.log('Current date: ' + dateNow);
   } else {
     alert('Please, fill outs all fields.');
   }
   // Cerrar el diálogo después de la edición
-  cerrarDialog();
+  closeDialog();
 }

From e775147b3a4d44fd49468b11b15227fc93def8f6 Mon Sep 17 00:00:00 2001
From: Michael Liendo <michael.m.liendo.r@gmail.com>
Date: Tue, 16 Jan 2024 22:36:30 -0400
Subject: [PATCH 4/4] usando funcionalidad de agregar notas

---
 modal.js | 3 +--
 1 file changed, 1 insertion(+), 2 deletions(-)

diff --git a/modal.js b/modal.js
index be68ec9..5cf4702 100644
--- a/modal.js
+++ b/modal.js
@@ -15,8 +15,7 @@ function editElement() {
   var description = document.getElementById('description').value;
 
   if ((title, description)) {
-    console.log('Title: ' + title);
-    console.log('Description: ' + description);
+    createNote(title, description, new Date());
   } else {
     alert('Please, fill outs all fields.');
   }
