From 67d89a141961ee5d56d541a95dbc74b13d4f4d11 Mon Sep 17 00:00:00 2001
From: Tanisha <ytanisha217@gmail.com>
Date: Sun, 7 Sep 2025 13:59:18 +0530
Subject: [PATCH] Enhanced UI and added search functionality to MusicAPI.html

---
 MusicAPI.html | 95 +++++++++++++++++++++++++++++++++++++++++++++------
 1 file changed, 85 insertions(+), 10 deletions(-)
diff --git a/MusicAPI.html b/MusicAPI.html
index a70ccce..2e083df 100644
--- a/MusicAPI.html
+++ b/MusicAPI.html
@@ -69,6 +69,9 @@
       border-left: 5px solid #6c63ff;
       border-radius: 8px;
       box-shadow: 0 2px 8px rgba(0,0,0,0.05);
+      display: flex;
+      justify-content: space-between;
+      align-items: center;
     }
 
     h2 {
@@ -90,11 +93,43 @@
     .error {
       color: red;
     }
+
+    /* Search Box */
+    #searchContainer {
+      max-width: 600px;
+      margin: 20px auto;
+      display: flex;
+      gap: 10px;
+    }
+
+    #searchInput {
+      flex: 1;
+      padding: 10px;
+      border: 1px solid #ccc;
+      border-radius: 8px;
+      font-size: 16px;
+    }
+
+    #searchBtn, #resetBtn {
+      padding: 10px 20px;
+      background-color: #4a4e69;
+      border: none;
+      border-radius: 8px;
+      color: white;
+      font-weight: 600;
+      cursor: pointer;
+      transition: background 0.3s;
+    }
+
+    #searchBtn:hover, #resetBtn:hover {
+      background-color: #2f2e41;
+    }
   </style>
 </head>
 <body>
   <h1>🎵 Music Tracker</h1>
 
+  <!-- Add Song Form -->
   <form id="songForm">
     <input type="text" id="title" placeholder="🎼 Song Title" required>
     <input type="text" id="artist" placeholder="🎤 Artist Name" required>
@@ -103,25 +138,29 @@ <h1>🎵 Music Tracker</h1>
     <div id="message" class="message"></div>
   </form>
 
+  <!-- Search Songs -->
+  <div id="searchContainer">
+    <input type="text" id="searchInput" placeholder="🔍 Search by title, artist, or genre">
+    <button id="searchBtn">Search</button>
+    <button id="resetBtn">Reset</button>
+  </div>
+
   <h2>🎧 All Songs</h2>
   <ul id="songList"></ul>
 
   <script>
+    const API_URL = 'http://localhost:5000/api/songs';
+    let allSongs = []; // keep a copy of all songs for search
+
     function loadSongs() {
-      fetch('http://localhost:5000/api/songs') 
+      fetch(API_URL) 
         .then(response => {
           if (!response.ok) throw new Error('Failed to fetch songs');
           return response.json();
         })
         .then(data => {
-          const songList = document.getElementById('songList');
-          songList.innerHTML = '';
-
-          data.forEach(song => {
-            const li = document.createElement('li');
-            li.textContent = `${song.title} by ${song.artist} (${song.genre})`;
-            songList.appendChild(li);
-          });
+          allSongs = data; // store songs
+          displaySongs(allSongs);
         })
         .catch(err => {
           console.error('Error fetching songs:', err);
@@ -129,6 +168,25 @@ <h2>🎧 All Songs</h2>
         });
     }
 
+    function displaySongs(songs) {
+      const songList = document.getElementById('songList');
+      songList.innerHTML = '';
+
+      if (songs.length === 0) {
+        const li = document.createElement('li');
+        li.textContent = 'No songs found.';
+        songList.appendChild(li);
+        return;
+      }
+
+      songs.forEach(song => {
+        const li = document.createElement('li');
+        li.innerHTML = `<span>${song.title} by ${song.artist} (${song.genre})</span>
+                        <button onclick="alert('🎵 Playing ${song.title}!')">▶ Play</button>`;
+        songList.appendChild(li);
+      });
+    }
+
     function showMessage(text, type) {
       const message = document.getElementById('message');
       message.textContent = text;
@@ -143,7 +201,7 @@ <h2>🎧 All Songs</h2>
       const artist = document.getElementById('artist').value;
       const genre = document.getElementById('genre').value;
 
-      fetch('http://localhost:5000/api/songs', {
+      fetch(API_URL, {
         method: 'POST',
         headers: { 'Content-Type': 'application/json' },
         body: JSON.stringify({ title, artist, genre })
@@ -163,6 +221,23 @@ <h2>🎧 All Songs</h2>
       });
     });
 
+    // Search functionality
+    document.getElementById('searchBtn').addEventListener('click', () => {
+      const query = document.getElementById('searchInput').value.toLowerCase();
+      const filtered = allSongs.filter(song =>
+        song.title.toLowerCase().includes(query) ||
+        song.artist.toLowerCase().includes(query) ||
+        song.genre.toLowerCase().includes(query)
+      );
+      displaySongs(filtered);
+    });
+
+    // Reset button
+    document.getElementById('resetBtn').addEventListener('click', () => {
+      document.getElementById('searchInput').value = '';
+      displaySongs(allSongs);
+    });
+
     window.onload = loadSongs;
   </script>
 </body>
