first commit

bibinthomas123 · Apr 24, 2022 · 8f7f7e2 · 8f7f7e2
1 parent f42765e
commit 8f7f7e2
Show file tree

Hide file tree

Showing 9 changed files with 89 additions and 43 deletions.
diff --git a/1.jpeg b/1.jpeg
diff --git a/2.jpeg b/2.jpeg
diff --git a/3.jpeg b/3.jpeg
diff --git a/4.jpeg b/4.jpeg
diff --git a/5.jpeg b/5.jpeg
diff --git a/6.jpeg b/6.jpeg
diff --git a/index.css b/index.css
@@ -1,9 +1,11 @@
 @import url('https://fonts.googleapis.com/css2?family=Ubuntu&display=swap');
+@import url('https://fonts.googleapis.com/css2?family=Varela+Round&display=swap');
 
 * {
     padding: 0;
     margin: 0;
     box-sizing: border-box;
+     text-transform: capitalize;
 }
 
 .body::-webkit-scrollbar-thumb {
@@ -14,7 +16,7 @@
 }
 
 body {
-    background-image: url('https://i.gifer.com/Ocko.gif') ;
+    background-image: url('https://i.gifer.com/Ocko.gif');
     background-size: contain;
     height: 100vh;
     width: 100%;
@@ -61,7 +63,7 @@ nav ul li {
     width: 70%;
     border-radius: 12px;
     padding: 34px;
-    background-image: url('https://cutewallpaper.org/21/black-music-wallpaper/1600x1200-px-background-black-guitars-red-High-Quality-.jpg');
+    background-image: url('https://images.unsplash.com/photo-1501612780327-45045538702b?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=1170&q=80');
     background-size: cover;
     background-repeat: no-repeat;
     /* position: absolute; */
@@ -107,9 +109,9 @@ nav ul li {
     justify-content: space-between;
     align-items: center;
     border-radius: 34px;
-    top: 67px;
+    top: 17%;
     position: relative;
-    left: -500px;
+    left: -125%;
 
 }
 
@@ -130,4 +132,12 @@ nav ul li {
 
 .songitemcontainer {
     margin-top: -20px;
+}
+
+.songinfo {
+    position: absolute;
+    left: 11vw;
+    top: 2.5rem;
+    font-family: 'Varela Round', sans-serif;
+
 }
diff --git a/index.html b/index.html
@@ -6,7 +6,7 @@
     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
     <title>spotify</title>
     <link rel="stylesheet" href="index.css" />
-    <link type="image/png" sizes="32x32" rel="icon" href=".../icons8-spotify-for-artists-32.png">
+    <link type="image/png" sizes="32x32" rel="icon" href="icons8-spotify-for-artists-32.png">
     <script
     src="https://kit.fontawesome.com/0663546654.js"
       crossorigin="anonymous"
@@ -72,9 +72,12 @@ <h1>Best of NCS - no Copy write sounds</h1>
       <input type="range" name="range" id="progressBar" value="0" min="0" max="100" />
       <div class="icons">
         <!-- fontawesome icons -->
-        <i class="fas fa-2x fa-step-backward"></i>
+        <i class="fas fa-2x fa-step-backward" id="previous"></i>
         <i class="far fa-2x fa-play-circle" id="masterplay"></i>
-        <i class="fas fa-2x fa-step-forward"></i>
+        <i class="fas fa-2x fa-step-forward" id="next"></i>
+        <div class="songinfo">Now playing :
+           <span id="mastersongname" >Kadhaippoma</span>
+        </div>
       </div>
     </div>
     <script src="index.js"></script>

diff --git a/index.js b/index.js
@@ -4,48 +4,49 @@
 let songIndex = 0;
 let masterplayer = document.getElementById("masterplay");
 let myprogressbar = document.getElementById("progressBar");
-let audioElement = new Audio("letmeloveu.mp3");
-let songitem =Array.from(document.getElementsByClassName('songsItem'));
+let audioElement = new Audio("1.mp3");
+let mastersongname = document.getElementById("mastersongname");
+let songitem = Array.from(document.getElementsByClassName("songsItem"));
 //music is added here
 let songs = [
   {
     songname: "Kadhaippoma",
     filepath: "1.mp3",
-    coverpath: "location to cover page goes here ",
+    coverpath: "1.jpeg",
   },
   {
     songname: "Inayae",
     filepath: "2.mp3",
-    coverpath: "location to cover page goes here ",
+    coverpath: "2.jpeg",
   },
   {
     songname: "Let me love you",
     filepath: "3.mp3",
-    coverpath: "location to cover page goes here ",
+    coverpath: "3.jpeg",
   },
   {
     songname: "Okey oka lokam",
     filepath: "4.mp3",
-    coverpath: "location to cover page goes here ",
+    coverpath: "4.jpeg",
   },
   {
     songname: "Agar Tum Saath ",
     filepath: "5.mp3",
-    coverpath: "location to cover page goes here ",
+    coverpath: "5.jpeg",
   },
   {
     songname: "sometimes all i think about is you",
     filepath: "6.mp3",
-    coverpath: "location to cover page goes here ",
+    coverpath: "6.jpeg",
   },
 ];
 
-songitem.forEach((Element,i)=>{
-    // console.log(Element,i)
- Element.getElementsByTagName("img")[0].src= songs[i].coverpath;
- Element.getElementsByClassName("songname")[0].innerHTML=songs[i].songname;
-//  Element.getElementsByClassName("timestamp")[0].innerHTML=
-})
+songitem.forEach((Element, i) => {
+  // console.log(Element,i)
+  Element.getElementsByTagName("img")[0].src = songs[i].coverpath;
+  Element.getElementsByClassName("songname")[0].innerHTML = songs[i].songname;
+  //  Element.getElementsByClassName("timestamp")[0].innerHTML=
+});
 
 // handle play pause clicks
 masterplayer.addEventListener("click", () => {
@@ -62,36 +63,68 @@ masterplayer.addEventListener("click", () => {
 //listen to events
 
 audioElement.addEventListener("timeupdate", () => {
-  console.log("time update");
+  //   console.log("time update");
   //seek bar update
   progress = parseInt((audioElement.currentTime / audioElement.duration) * 100);
-  console.log(progress);
+  //   console.log(progress);
   myprogressbar.value = progress;
 });
 myprogressbar.addEventListener("change", () => {
   audioElement.currentTime =
     (myprogressbar.value * audioElement.duration) / 100;
 });
 
-const makeAllplays=()=>{
-     Array.from(document.getElementsByClassName('songitemplay')).forEach((Element)=>{
-         Element.classList.remove('fa-pause-circle')
-         Element.classList.add('fa-play-circle')
-     })
-}
+const makeAllplays = () => {
+  Array.from(document.getElementsByClassName("songitemplay")).forEach(
+    (Element) => {
+      Element.classList.remove("fa-pause-circle");
+      Element.classList.add("fa-play-circle");
+    }
+  );
+};
 
-Array.from(document.getElementsByClassName("songitemplay")).forEach((Element)=>{
-      Element.addEventListener("click",(e)=>{
-           console.log(e.target);
-           makeAllplays();
-           index=parseInt(e.target.id)
-           e.target.classList.remove('fa-play-circle') 
-           e.target.classList.add('fa-pause-circle') 
-           audioElement.src=`${index}.mp3`
-           audioElement.currentTime=0;
-           audioElement.play();
-           masterplayer.classList.remove("fa-play-circle")
-           masterplayer.classList.add("fa-pause-circle")
+Array.from(document.getElementsByClassName("songitemplay")).forEach(
+  (Element) => {
+    Element.addEventListener("click", (e) => {
+      console.log(e.target);
+      makeAllplays();
+      songIndex = parseInt(e.target.id);
+      e.target.classList.remove("fa-play-circle");
+      e.target.classList.add("fa-pause-circle");
+      audioElement.src = `${songIndex}.mp3`;
+      audioElement.currentTime = 0;
+      audioElement.play();
+      masterplayer.classList.remove("fa-play-circle");
+      masterplayer.classList.add("fa-pause-circle");
+        mastersongname.innerHTML = songs[songIndex-1].songname;
+    });
+  }
+);
 
-      })
-})
+document.getElementById("next").addEventListener("click", () => {
+  if (songIndex > 5) {
+    songIndex = 1;
+  } else {
+    songIndex += 1;
+  }
+  audioElement.src = `${songIndex}.mp3`;
+  mastersongname.innerHTML = songs[songIndex].songname;
+  audioElement.currentTime = 0;
+  audioElement.play();
+  masterplayer.classList.remove("fa-play-circle");
+  masterplayer.classList.add("fa-pause-circle");
+});
+
+document.getElementById("previous").addEventListener("click", () => {
+  if (songIndex < 0) {
+    songIndex = 6;
+  } else {
+    songIndex -= 1;
+  }
+  audioElement.src = `${songIndex}.mp3`;
+  mastersongname.innerHTML = songs[songIndex].songname;
+  audioElement.currentTime = 0;
+  audioElement.play();
+  masterplayer.classList.remove("fa-play-circle");
+  masterplayer.classList.add("fa-pause-circle");
+});