TechHack3 · abc-is-here · Oct 2, 2023
diff --git a/contributors/contributorsList.js b/contributors/contributorsList.js
@@ -8,5 +8,10 @@ contributors = [
     id: 2,
     fullname: "sample 2",
     username: "https://github.com/TechHack3",
+  },
+   {
+    id: 3,
+    fullname: "Abhay Gupta",
+    username: "https://github.com/Abhay-Gupta008",
   }
   ];
diff --git a/projects/bg.jpg b/projects/bg.jpg
diff --git a/projects/covers/1.jpg b/projects/covers/1.jpg
diff --git a/projects/covers/10.jpg b/projects/covers/10.jpg
diff --git a/projects/covers/2.jpg b/projects/covers/2.jpg
diff --git a/projects/covers/3.jpg b/projects/covers/3.jpg
diff --git a/projects/covers/4.jpg b/projects/covers/4.jpg
diff --git a/projects/covers/5.jpg b/projects/covers/5.jpg
diff --git a/projects/covers/6.jpg b/projects/covers/6.jpg
diff --git a/projects/covers/7.jpg b/projects/covers/7.jpg
diff --git a/projects/covers/8.jpg b/projects/covers/8.jpg
diff --git a/projects/covers/9.jpg b/projects/covers/9.jpg
diff --git a/projects/index.html b/projects/index.html
@@ -1 +1,130 @@
-
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <title>Music player</title>
+    <link rel="stylesheet" href="style.css" />
+</head>
+<body>
+    <div class="hero">
+      <nav>
+        <div class="logo">
+          <div class="im">
+            <img src="./logo.jpg" alt="" />
+          </div>
+          <h1>Music player</h1>
+        </div>
+        <ul>
+          <li><a href="index.html">Home</a></li>
+          <li><a href="#">About</a></li>
+        </ul>
+        <button>Sign Up!</button>
+      </nav>
+    </div>
+    <div class="container">
+      <div class="songlist">
+        <h1>Best of All time</h1>
+        <div class="songitem-container">
+          <div class="songitem">
+            <img src="./covers/1.jpg" alt="1" />
+            <span class="songName">Let me Love you..</span>
+            <span class="songlistplay"
+              ><span class="timestamp"
+                >5:34 <i class="songItemPlay fa-solid fa-play" id="1"></i></span
+            ></span>
+          </div>
+          <div class="songitem">
+            <img src="./covers/2.jpg" alt="1" />
+            <span class="songName">Let me Love you..</span>
+            <span class="songlistplay"
+              ><span class="timestamp"
+                >5:34 <i class="songItemPlay fa-solid fa-play" id="2"></i></span
+            ></span>
+          </div>
+          <div class="songitem">
+            <img src="./covers/3.jpg" alt="1" />
+            <span class="songName">Let me Love you..</span>
+            <span class="songlistplay"
+            ><span class="timestamp"
+                >5:34 <i class="songItemPlay fa-solid fa-play" id="3"></i></span
+            ></span>
+          </div>
+          <div class="songitem">
+            <img src="./covers/4.jpg" alt="1" />
+            <span class="songName">Let me Love you..</span>
+            <span class="songlistplay"
+              ><span class="timestamp"
+                >5:34 <i class="songItemPlay fa-solid fa-play" id="4"></i></span
+            ></span>
+          </div>
+          <div class="songitem">
+            <img src="./covers/5.jpg" alt="1" />
+            <span class="songName">Let me Love you..</span>
+            <span class="songlistplay"
+              ><span class="timestamp"
+                >5:34 <i class="songItemPlay fa-solid fa-play" id="5"></i></span
+            ></span>
+          </div>
+          <div class="songitem">
+            <img src="./covers/6.jpg" alt="1" />
+            <span class="songName">Let me Love you..</span>
+            <span class="songlistplay"
+              ><span class="timestamp"
+                >5:34 <i class="songItemPlay fa-solid fa-play" id="6"></i></span
+            ></span>
+          </div>
+          <div class="songitem">
+            <img src="./covers/7.jpg" alt="1" />
+            <span class="songName">Let me Love you..</span>
+            <span class="songlistplay"
+              ><span class="timestamp"
+                >5:34 <i class="songItemPlay fa-solid fa-play" id="7"></i></span
+            ></span>
+          </div>
+          <div class="songitem">
+            <img src="./covers/8.jpg" alt="1" />
+            <span class="songName">Let me Love you..</span>
+            <span class="songlistplay"
+              ><span class="timestamp"
+                >5:34 <i class="songItemPlay fa-solid fa-play" id="8"></i></span
+            ></span>
+          </div>
+          <div class="songitem">
+            <img src="./covers/9.jpg" alt="1" />
+            <span class="songName">Let me Love you..</span>
+            <span class="songlistplay"
+              ><span class="timestamp"
+                >5:34 <i class="songItemPlay fa-solid fa-play" id="9"></i></span
+            ></span>
+          </div>
+          <div class="songitem">
+            <img src="./covers/10.jpg" alt="1" />
+            <span class="songName">Let me Love you..</span>
+            <span class="songlistplay"
+              ><span class="timestamp"
+                >5:34 <i class="songItemPlay fa-solid fa-play" id="10"></i></span
+            ></span>
+          </div>
+        </div>
+      </div>
+      <div class="songbanner"></div>
+    </div>
+    <div class="bottom">
+      <input type="range" name="range" id="myprogressbar" min="0" value="0" max="100" />
+      <div class="icons">
+        <i class="fa-solid fa-3x fa-backward-step" id="previous"></i>
+        <i class="fa-solid fa-3x fa-play" id="masterPlay"></i>
+        <i class="fa-solid fa-3x fa-forward-step" id="next"></i>
+        <div class="songinfo">
+          <img src="playing.gif" alt="playing..." width="43px" id="gif"/><span class="masterSong">Let me Love you - Justin Beiber</span>
+        </div>
+      </div>
+    </div>
+    <script
+      src="https://kit.fontawesome.com/5ab82a1a60.js"
+      crossorigin="anonymous"
+    ></script>
+    <script src="script.js"></script>
+  </body>
+</html>
diff --git a/projects/logo.jpg b/projects/logo.jpg
diff --git a/projects/playing.gif b/projects/playing.gif
diff --git a/projects/sample_project/index.php b/projects/sample_project/index.php
diff --git a/projects/script.js b/projects/script.js
@@ -0,0 +1,145 @@
+console.log("Welcome to spotify clone");
+
+let songIndex = 0;
+let audioElement = new Audio("./songs/1.mp3");
+let masterPlay = document.getElementById("masterPlay");
+let masterSong = document.getElementById("masterSong");
+let progressBar = document.getElementById("myprogressbar");
+let gif = document.getElementById("gif");
+let is = Array.from(document.getElementsByClassName("songitem"));
+let songitemplay = Array.from(document.getElementsByClassName("songItemPlay"));
+
+let songs = [
+  {
+    songName: "Legion",
+    filePath: "./songs/1.mp3",
+    coverPath: "./covers/1.jpg",
+  },
+  { songName: "Trap", filePath: "./songs/2.mp3", coverPath: "./covers/2.jpg" },
+  {
+    songName: "They Mad",
+    filePath: "./songs/3.mp3",
+    coverPath: "./covers/3.jpg",
+  },
+  {
+    songName: "Plug walk",
+    filePath: "./songs/4.mp3",
+    coverPath: "./covers/4.jpg",
+  },
+  {
+    songName: "Artist Name",
+    filePath: "./songs/5.mp3",
+    coverPath: "./covers/5.jpg",
+  },
+  {
+    songName: "The safety Dance",
+    filePath: "./songs/6.mp3",
+    coverPath: "./covers/6.jpg",
+  },
+  {
+    songName: "Back It Up",
+    filePath: "./songs/7.mp3",
+    coverPath: "./covers/7.jpg",
+  },
+  {
+    songName: "I don't Know",
+    filePath: "./songs/8.mp3",
+    coverPath: "./covers/8.jpg",
+  },
+  {
+    songName: "You Never Know",
+    filePath: "./songs/9.mp3",
+    coverPath: "./covers/9.jpg",
+  },
+  {
+    songName: "True Love",
+    filePath: "./songs/10.mp3",
+    coverPath: "./covers/10.jpg",
+  },
+];
+
+// audioElement.play();
+
+// listen to events
+
+window.onload = function () {
+  masterPlay.addEventListener("click", () => {
+    if (audioElement.paused || audioElement.currentTime <= 0) {
+      audioElement.play();
+      masterPlay.classList.remove("fa-play");
+      masterPlay.classList.add("fa-pause");
+      gif.style.opacity = 1;
+    } else {
+      audioElement.pause();
+      masterPlay.classList.remove("fa-pause");
+      masterPlay.classList.add("fa-play");
+      gif.style.opacity = 0;
+    }
+  });
+
+  audioElement.addEventListener("timeupdate", () => {
+    progress = parseInt(
+      (audioElement.currentTime / audioElement.duration) * 100
+    );
+    progressBar.value = progress;
+  });
+  progressBar.addEventListener("change", () => {
+    audioElement.currentTime =
+      (progressBar.value * audioElement.duration) / 100;
+  });
+
+  is.forEach((element, i) => {
+    element.getElementsByTagName("img")[0].src = songs[i].coverPath;
+    element.getElementsByClassName("songName")[0].innerHTML = songs[i].songName;
+  });
+  const makeAllPlay = ()=>{
+    Array.from(document.getElementsByClassName("songItemPlay")).forEach((element) => {
+      element.classList.remove('fa-pause');
+      element.classList.add('fa-play');
+    });
+  }
+  songitemplay.forEach((element) => {
+    element.addEventListener("click", (e) => {
+      makeAllPlay();
+      songIndex = parseInt(e.target.id)
+      e.target.classList.remove('fa-play');
+      e.target.classList.add('fa-pause');
+      audioElement.src=`songs/${songIndex}.mp3`;
+      audioElement.currentTime = 0;
+      audioElement.play();
+      masterSong.innerText = songs[songIndex].songName
+      masterPlay.classList.remove("fa-play");
+      masterPlay.classList.add("fa-pause");
+      gif.style.opacity = 1;
+    });
+  });
+  document.getElementById('next').addEventListener('click', ()=>{
+    if(songIndex>=9){
+      songIndex = 0
+    }
+    else{
+      songIndex+=1
+    }
+    audioElement.src=`songs/${songIndex}.mp3`;
+    masterSong.innerText = songs[songIndex].songName
+    audioElement.currentTime = 0;
+    audioElement.play();
+    masterPlay.classList.remove("fa-play");
+    masterPlay.classList.add("fa-pause");
+  })
+
+  document.getElementById('previous').addEventListener('click', ()=>{
+    if(songIndex<=0){
+      songIndex = 0
+    }
+    else{
+      songIndex-=1
+    }
+    audioElement.src=`songs/${songIndex}.mp3`;
+    masterSong.innerText = songs[songIndex].songName
+    audioElement.currentTime = 0;
+    audioElement.play();
+    masterPlay.classList.remove("fa-play");
+    masterPlay.classList.add("fa-pause");
+  })
+};
diff --git a/projects/songs/1.mp3 b/projects/songs/1.mp3
diff --git a/projects/songs/10.mp3 b/projects/songs/10.mp3
diff --git a/projects/songs/2.mp3 b/projects/songs/2.mp3
diff --git a/projects/songs/3.mp3 b/projects/songs/3.mp3
diff --git a/projects/songs/4.mp3 b/projects/songs/4.mp3
diff --git a/projects/songs/5.mp3 b/projects/songs/5.mp3
diff --git a/projects/songs/6.mp3 b/projects/songs/6.mp3
diff --git a/projects/songs/7.mp3 b/projects/songs/7.mp3
diff --git a/projects/songs/8.mp3 b/projects/songs/8.mp3
diff --git a/projects/songs/9.mp3 b/projects/songs/9.mp3