diff --git a/contributors/contributorsList.js b/contributors/contributorsList.js index 2146cd3..e8fde7d 100644 --- 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 new file mode 100644 index 0000000..384316f Binary files /dev/null and b/projects/bg.jpg differ diff --git a/projects/covers/1.jpg b/projects/covers/1.jpg new file mode 100644 index 0000000..554db42 Binary files /dev/null and b/projects/covers/1.jpg differ diff --git a/projects/covers/10.jpg b/projects/covers/10.jpg new file mode 100644 index 0000000..eae50e6 Binary files /dev/null and b/projects/covers/10.jpg differ diff --git a/projects/covers/2.jpg b/projects/covers/2.jpg new file mode 100644 index 0000000..ac31314 Binary files /dev/null and b/projects/covers/2.jpg differ diff --git a/projects/covers/3.jpg b/projects/covers/3.jpg new file mode 100644 index 0000000..69509e2 Binary files /dev/null and b/projects/covers/3.jpg differ diff --git a/projects/covers/4.jpg b/projects/covers/4.jpg new file mode 100644 index 0000000..69c633c Binary files /dev/null and b/projects/covers/4.jpg differ diff --git a/projects/covers/5.jpg b/projects/covers/5.jpg new file mode 100644 index 0000000..7e1416f Binary files /dev/null and b/projects/covers/5.jpg differ diff --git a/projects/covers/6.jpg b/projects/covers/6.jpg new file mode 100644 index 0000000..05cfc0d Binary files /dev/null and b/projects/covers/6.jpg differ diff --git a/projects/covers/7.jpg b/projects/covers/7.jpg new file mode 100644 index 0000000..bd80c63 Binary files /dev/null and b/projects/covers/7.jpg differ diff --git a/projects/covers/8.jpg b/projects/covers/8.jpg new file mode 100644 index 0000000..a4d91d7 Binary files /dev/null and b/projects/covers/8.jpg differ diff --git a/projects/covers/9.jpg b/projects/covers/9.jpg new file mode 100644 index 0000000..bcd6e2b Binary files /dev/null and b/projects/covers/9.jpg differ diff --git a/projects/index.html b/projects/index.html index 8b13789..5324b94 100644 --- a/projects/index.html +++ b/projects/index.html @@ -1 +1,130 @@ - + + + + + + Music player + + + +
+ +
+
+
+

Best of All time

+
+
+ 1 + Let me Love you.. + 5:34 +
+
+ 1 + Let me Love you.. + 5:34 +
+
+ 1 + Let me Love you.. + 5:34 +
+
+ 1 + Let me Love you.. + 5:34 +
+
+ 1 + Let me Love you.. + 5:34 +
+
+ 1 + Let me Love you.. + 5:34 +
+
+ 1 + Let me Love you.. + 5:34 +
+
+ 1 + Let me Love you.. + 5:34 +
+
+ 1 + Let me Love you.. + 5:34 +
+
+ 1 + Let me Love you.. + 5:34 +
+
+
+
+
+
+ +
+ + + +
+ playing...Let me Love you - Justin Beiber +
+
+
+ + + + diff --git a/projects/logo.jpg b/projects/logo.jpg new file mode 100644 index 0000000..408188d Binary files /dev/null and b/projects/logo.jpg differ diff --git a/projects/playing.gif b/projects/playing.gif new file mode 100644 index 0000000..e77bdb4 Binary files /dev/null and b/projects/playing.gif differ diff --git a/projects/sample_project/index.php b/projects/sample_project/index.php deleted file mode 100644 index e403e22..0000000 --- a/projects/sample_project/index.php +++ /dev/null @@ -1 +0,0 @@ - diff --git a/projects/script.js b/projects/script.js new file mode 100644 index 0000000..dbce064 --- /dev/null +++ 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 new file mode 100644 index 0000000..3b95e28 Binary files /dev/null and b/projects/songs/1.mp3 differ diff --git a/projects/songs/10.mp3 b/projects/songs/10.mp3 new file mode 100644 index 0000000..2da6005 Binary files /dev/null and b/projects/songs/10.mp3 differ diff --git a/projects/songs/2.mp3 b/projects/songs/2.mp3 new file mode 100644 index 0000000..a5ffea4 Binary files /dev/null and b/projects/songs/2.mp3 differ diff --git a/projects/songs/3.mp3 b/projects/songs/3.mp3 new file mode 100644 index 0000000..ebdbae4 Binary files /dev/null and b/projects/songs/3.mp3 differ diff --git a/projects/songs/4.mp3 b/projects/songs/4.mp3 new file mode 100644 index 0000000..2da6005 Binary files /dev/null and b/projects/songs/4.mp3 differ diff --git a/projects/songs/5.mp3 b/projects/songs/5.mp3 new file mode 100644 index 0000000..ff63552 Binary files /dev/null and b/projects/songs/5.mp3 differ diff --git a/projects/songs/6.mp3 b/projects/songs/6.mp3 new file mode 100644 index 0000000..ff63552 Binary files /dev/null and b/projects/songs/6.mp3 differ diff --git a/projects/songs/7.mp3 b/projects/songs/7.mp3 new file mode 100644 index 0000000..ebdbae4 Binary files /dev/null and b/projects/songs/7.mp3 differ diff --git a/projects/songs/8.mp3 b/projects/songs/8.mp3 new file mode 100644 index 0000000..3b95e28 Binary files /dev/null and b/projects/songs/8.mp3 differ diff --git a/projects/songs/9.mp3 b/projects/songs/9.mp3 new file mode 100644 index 0000000..ff63552 Binary files /dev/null and b/projects/songs/9.mp3 differ diff --git a/projects/style.css b/projects/style.css new file mode 100644 index 0000000..290c0ca --- /dev/null +++ b/projects/style.css @@ -0,0 +1,156 @@ +* { + margin: 0; + padding: 0; + box-sizing: border-box; + font-family: "Segoe UI", Tahoma, Geneva, Verdana, sans-serif; +} + +body { + background: rgb(0, 13, 48); +} + +.hero { + width: 100%; +} + +nav { + display: flex; + justify-content: space-between; + align-items: center; + padding-top: 40px; + padding-right: 10%; + padding-left: 10%; +} + +nav ul li { + list-style: none; + display: inline; + margin-right: 40px; +} + +nav ul li a { + color: aliceblue; + font-size: 19px; + text-decoration: none; + font-weight: 700; +} + +nav h1 { + color: aliceblue; + font-size: 30px; + font-weight: 900; +} + +nav button { + border: none; + outline: none; + padding: 7px; + background: #ea1538; + color: aliceblue; + cursor: pointer; + border-radius: 10px; +} + +nav button:hover { + transform: scale(1.2); + transition: 0.5s; +} + +nav ul li a:hover { + color: #ea1538; + transition: 0.4s; +} + +.im { + width: 10%; +} + +.logo { + display: flex; + width: 40%; +} + +.im img { + width: 100%; +} + +.container { + min-height: 72vh; + background: black; + color: aliceblue; + display: flex; + width: 80%; + margin: 23px auto; + border-radius: 12px; + padding: 34px; + background-image: url("bg.jpg"); + background-position: center; + background-size: cover; +} + +.bottom { + position: sticky; + height: 130px; + background-color: black; + bottom: 0; + display: flex; + justify-content: center; + align-items: center; + flex-direction: column; +} + +#myprogressbar { + width: 80vw; + cursor: pointer; +} + +.icons { + color: aliceblue; + margin-top: 15px; +} + +.icons i { + cursor: pointer; + margin-right: 20px; +} + +.songitem { + height: 50px; + display: flex; + background-color: aliceblue; + width: 100%; + color: black; + margin: 12px 0; + justify-content: space-between; + align-items: center; + border-radius: 34px; +} + +.songitem img { + width: 43px; + margin: 0 23px; + border-radius: 34px; +} + +.timestamp { + margin: 0 23px; +} + +.timestamp i { + cursor: pointer; + margin: 0 23px; +} + +.songitem-container { + margin-top: 70px; +} + +.songinfo { + position: absolute; + left: 10vw; +} + +#gif { + opacity: 0; + transition: 0.6s ease-in; +} \ No newline at end of file