change how the form work

static/css/card.css

@@ -43,3 +43,21 @@
   font-size: 0.8rem; 
   margin: 5px 0; 
 }
+
+dialog{
+  border:none;
+  border-radius: 8px;
+  padding: 20px;
+  width: 300px;
+  box-shadow: 0 4px 10px rgba(0,0,0,0.2);
+}
+
+dialog::backdrop {
+  background: rgba(0,0,0,0.5);
+}
+
+form  {
+  display: flex;
+  flex-direction: column;
+  gap: 10px;
+}

static/js/main.js

@@ -0,0 +1,12 @@
+// open log button
+const modal = document.getElementById("#formModal");
+const openbtn = document.getElementById("#openForm");
+const closebtn = document.getElementsByClassName("#closeForm");
+
+openbtn.addEventListener("click", function() {
+    modal.showModal();
+});
+
+closebtn.addEventListener("click", function() {
+    modal.close();
+}) ;

templates/main.html

@@ -50,7 +50,7 @@
           <div id = "seach_bar">
 
             </div>
-          <div id = "addLog_button">
+          <div id = "openForm">
             + log a book/show
           </div>
         </div>
@@ -78,23 +78,32 @@
           <div class ="container">
             <div class = "header-secton">
               <h1>📚 My Library</h1>
+              
+              {% comment %} button {% endcomment %}
+              <button id= "openForm">Add New Entry</button>
+              
+              {% comment %} this is the form {% endcomment %}
+              <dialog id="formModal">
+
+                <form action ="/add" method ="dialog" enctype="multipart/form-data">
+                  <input type="text" name="title" placeholder="Title" required>
+                  <select name="type">
+                    <option value="Book">Book</option>
+                    <option value="Show">Show</option>
+                  </select>
+                  <input type="number" name="year" placeholder="Year">
+                  <input type="text" name="extra_info" placeholder="Author/Network">
+                  <select name="genre_id">
+                    {% for g in genres %}
+                      <option value="{{ g.id }}">{{ g.name }}</option>
+                    {% endfor %}
+                  </select>
+                  <input type="file" name="cover_image">
+                  <button type="submit">Add Entry</button>
+                </form>
+
+              </dialog>
 
-              <form action ="/add" method ="POST" enctype="multipart/form-data">
-                <input type="text" name="title" placeholder="Title" required>
-                <select name="type">
-                  <option value="Book">Book</option>
-                  <option value="Show">Show</option>
-                </select>
-                <input type="number" name="year" placeholder="Year">
-                <input type="text" name="extra_info" placeholder="Author/Network">
-                <select name="genre_id">
-                  {% for g in genres %}
-                    <option value="{{ g.id }}">{{ g.name }}</option>
-                  {% endfor %}
-                </select>
-                <input type="file" name="cover_image">
-                <button type="submit">Add Entry</button>
-              </form>
             </div>
 
             <!--the card area-->