From e1aa61bddf31d0b1a36e0401018339337273331d Mon Sep 17 00:00:00 2001
From: Pranav J <pjjdev2003@gmail.com>
Date: Mon, 16 Oct 2023 18:38:59 +0530
Subject: [PATCH] Display next upcoming songs (#15)

---
 index.html | 15 +++++++++++++
 script.js  | 33 ++++++++++++++++++++++++++++
 style.css  | 63 ++++++++++++++++++++++++++++++++++++++++++++++++++++++
 3 files changed, 111 insertions(+)

diff --git a/index.html b/index.html
index b5c7439..4fdb3e0 100644
--- a/index.html
+++ b/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)-->
diff --git a/script.js b/script.js
index 94a0d6e..bd5d04d 100644
--- a/script.js
+++ b/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;
diff --git a/style.css b/style.css
index 7e4c606..a32314a 100644
--- a/style.css
+++ b/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;