search_bar been added

BookandMovieDB.py

@@ -67,6 +67,29 @@ def add_media():
     conn.close()
     return redirect(url_for('index'))
 
+@app.route('/delete/<int:media_id>',methods=['POST'])
+def delete_media(media_id):
+    conn = sqlite3.connect(DB_NAME)
+    cursor = conn.cursor()
+
+    cursor.execute("SELECT image_path FROM media WHERE id = ?",(media_id,))
+    row = cursor.fetchone()
+    if row and row[0] != 'default.jpg':
+        image_path = os.path.join(UPLOAD_FOLDER, row[0])
+        if os.path.exists(image_path):
+            os.remove(image_path)
+
+    cursor.execute("DELETE from media WHERE id = ?",(media_id,))
+    cursor.execute("DELETE from books WHERE book_id = ?",(media_id,))
+    cursor.execute("DELETE from shows WHERE show_id = ?",(media_id,))
+    cursor.execute("DELETE from media_genres WHERE media_id = ?",(media_id,))
+    conn.commit()
+    cursor.close()
+    conn.close()
+    return redirect(url_for('index'))
+
+
+
 if __name__ == '__main__':
     init_db()
     app.run(debug=True)

static/css/style.css

@@ -42,7 +42,8 @@
   width:80vw;
   padding:20px;
 }
-#addLog_button{
+/*button*/
+#button{
   display:flex;
   align-items:center;
   gap:8px;
@@ -58,6 +59,22 @@
   transition: all 0.2s;
 }
 
-#navagtor{
-  
+/*search_bar*/
+#search_bar{
+  margin-top: 20px;
+  width: 100%;
+}
+
+#mediaSearch {
+  width:100%;
+  padding: 15px;
+  font-size:1rem;
+  border: 2px solid #eee;
+  border-radius: 10px;
+    outline: none;
+    transition: border-color 0.3s;
+    box-sizing: border-box; /* Ensures padding doesn't break width */
+}
+#mediaSearch:focus {
+    border-color: var(--show-color); /* Changes color when you click it */
 }

static/js/main.js

@@ -17,4 +17,29 @@ document.addEventListener("DOMContentLoaded", function() {
             modal.close();
         });
     }
-});
+});
+
+document.addEventListener('DOMContentLoaded',() => {
+ const searchBar = document.getElementById('mediaSearch');
+  
+  if(searchBar){
+    searchBar.addEventListener('keyup', ()=>{
+      const input = searchBar.value.toLowerCase();
+      const cards = document.getElementsByClassName('card');
+
+      for (let i = 0; i < cards.length; i++) {
+        // We search all text inside the card (Title, Author, Genre)
+        const cardText = cards[i].innerText.toLowerCase();
+                
+        if (cardText.includes(input)) {
+          cards[i].style.display = "";
+        } 
+        else {
+          cards[i].style.display = "none";
+        }
+      }
+    });
+  }
+    
+});
+

templates/card.html

@@ -11,6 +11,9 @@
         
         <div style="display: flex; justify-content: space-between; align-items: center; margin-top: 10px;">
             <small>Released: {{ item.release_year }}</small>
+            <form action="{{ url_for('delete_media', media_id = item.id)}}" method = "POST" onsubmit = "return confirm('Are you sure?');">
+              <button type = "submit" class = "delete_button" id = "button" >🗑️</button>
+            </form>
             </div>
     </div>
 </div>

templates/main.html

@@ -48,9 +48,9 @@
             Good evening
           </h1>
           <div id = "seach_bar">
-
+            <input type = "text" id = "mediaSearch" onkeyup = "filterMedia()" placeholder ="🔍 Search by title, author, network, or genre...">
             </div>
-          <div id="openFormBtn1" class="open-form-btn">
+          <div id="button" class="open-form-btn">
             + log a book/show
           </div>
         </div>
@@ -80,7 +80,7 @@
               <h1>📚 My Library</h1>
               
               {# button #}
-              <button id="openFormBtn2" class="open-form-btn">Add New Entry</button>
+              <button id="button" class="open-form-btn">Add New Entry</button>
               
               {# this is the form #}
               <dialog id="formModal">