Display next upcoming songs (#15)

index.html

@@ -77,6 +77,13 @@ <h3 class="tagline">enjoy your day...</h3>
     </div>
 
     <div class="music-container" id="music-container">
+        <!-- Previous Song -->
+      <div class="prev-song">
+              <p class="song-label">Previous Song</p>
+              <img src="images/previous.jpg" alt="Previous Song" class="song-image" />
+              <p class="song-name">Previous Song</p>
+      </div>
+
       <div class="music-info">
         <h4 id="title"></h4>
         <span id="currTime"></span> / <span id="durTime"></span>
@@ -110,6 +117,14 @@ <h4 id="title"></h4>
           oninput="setVolume(this.value)"
         />
       </div>
+
+      <!-- Next Song -->
+      <div class="next-song">
+        <p class="song-label">Next Song</p>
+        <img src="images/next.jpg" alt="Next Song" class="song-image" />
+        <p class="song-name">Next Song</p>
+      </div>
+
     </div>
 
     <!--Theme Change (Dark/Light)-->

script.js

@@ -38,6 +38,7 @@ function loadSong(song) {
   title.innerText = song;
   audio.src = `music/${song}.mp3`;
   cover.src = `images/${song}.jpg`;
+  updatePrevNextSongs();
 }
 
 // Save current song to localStorage
@@ -101,6 +102,38 @@ function nextSong() {
   playSong();
 }
 
+function handlePrevSongClick() {
+  prevSong();
+}
+function handleNextSongClick() {
+  nextSong();
+}
+
+// Click event listeners to the previous and next song elements
+const prevSongElement = document.querySelector('.prev-song');
+const nextSongElement = document.querySelector('.next-song');
+
+prevSongElement.addEventListener('click', handlePrevSongClick);
+nextSongElement.addEventListener('click', handleNextSongClick);
+
+// Update previous and next songs
+function updatePrevNextSongs() {
+  const prevSongIndex = songIndex === 0 ? songs.length - 1 : songIndex - 1;
+  const nextSongIndex = songIndex === songs.length - 1 ? 0 : songIndex + 1;
+
+  const prevSongImage = document.querySelector('.prev-song .song-image');
+  const nextSongImage = document.querySelector('.next-song .song-image');
+
+  prevSongImage.src = `images/${songs[prevSongIndex]}.jpg`;
+  nextSongImage.src = `images/${songs[nextSongIndex]}.jpg`;
+
+  const prevSongName = document.querySelector('.prev-song .song-name');
+  const nextSongName = document.querySelector('.next-song .song-name');
+
+  prevSongName.innerText = songs[prevSongIndex];
+  nextSongName.innerText = songs[nextSongIndex];
+}
+
 // Update progress bar
 function updateProgress(e) {
   const { duration, currentTime } = e.srcElement;

style.css

@@ -298,6 +298,69 @@ header .user {
   transform: rotate(-30deg);
 }
 
+/* Added CSS for previous and next song */
+.prev-song {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  cursor: pointer;
+  opacity: 0.5; /* Initial opacity */
+  transition: opacity 0.3s;
+  margin-right: 40px;
+}
+
+.next-song{
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  cursor: pointer;
+  opacity: 0.5; /* Initial opacity */
+  transition: opacity 0.3s;
+  margin-left: 40px;
+}
+
+.next-song:hover,
+.prev-song:hover {
+  opacity: 1; /* Full opacity on hover */
+}
+
+.next-song img,
+.prev-song img {
+  border-radius: 50%;
+  object-fit: cover;
+  height: 80px;
+  width: 80px;
+}
+
+.next-song p,
+.prev-song p {
+  margin: 5px;
+  font-size: 1rem;
+  font-weight: 500;
+  color: #333;
+}
+
+.dark-mode .next-song p{
+  color: #ffffff;
+}
+
+.dark-mode  .prev-song p{
+  color: #ffffff;
+}
+
+.prev-song .song-label,
+.next-song .song-label {
+  text-align: center;
+  font-size: 1rem; 
+  margin-bottom: 10px;
+  color: #333; 
+}
+
+.dark-mode .prev-song .song-label,
+.dark-mode .next-song .song-label {
+  color: #ffffff;
+}
+
 footer {
   position: absolute;
   bottom: 0;