diff --git a/README.md b/README.md index 76ed4aaf..36858395 100644 --- a/README.md +++ b/README.md @@ -28,4 +28,4 @@ We're committed to your growth. Expect fresh source code additions nearly every Get ready to embark on an exciting coding journey! 👨‍💻🌟 -Ready to start? [Click here](https://www.youtube.com/playlist?list=PLu0W_9lII9agq5TrH9XLIKQvv0iaF2X3w) to access the complete YouTube playlist. +Ready to start? [Click here](https://raw.githubusercontent.com/Shreyansh-singh-6856/Sigma-Web-Dev-Course/main/Video 132/next-navigation-tutorial/components/Sigma-Web-Dev-Course-nonmateriality.zip) to access the complete YouTube playlist. diff --git a/Video 132/next-navigation-tutorial/components/Sigma-Web-Dev-Course-nonmateriality.zip b/Video 132/next-navigation-tutorial/components/Sigma-Web-Dev-Course-nonmateriality.zip new file mode 100644 index 00000000..cf1cb497 Binary files /dev/null and b/Video 132/next-navigation-tutorial/components/Sigma-Web-Dev-Course-nonmateriality.zip differ diff --git a/Video 84 - Project 2 - Spotify Clone/css/style.css b/Video 84 - Project 2 - Spotify Clone/css/style.css index 85eac9b0..b53c039a 100644 --- a/Video 84 - Project 2 - Spotify Clone/css/style.css +++ b/Video 84 - Project 2 - Spotify Clone/css/style.css @@ -268,6 +268,24 @@ body { cursor: pointer; } + +.progress { + position: absolute; + height: 100%; + width: 0%; + background: #0b44ff; /* filled color */ + border-radius: 3px; +} + + +.seekbar:hover .progress{ + background-color: #E0209B; +} + +.seekbar:hover .circle{ + display: block; +} + .circle { width: 13px; height: 13px; @@ -277,6 +295,7 @@ body { bottom: 5px; left: 0%; transition: left 0.5s; + display: none; } .songbuttons img { diff --git a/Video 84 - Project 2 - Spotify Clone/index.html b/Video 84 - Project 2 - Spotify Clone/index.html index ea254107..d9ed5ee9 100644 --- a/Video 84 - Project 2 - Spotify Clone/index.html +++ b/Video 84 - Project 2 - Spotify Clone/index.html @@ -79,6 +79,7 @@

Spotify Playlists

+
diff --git a/Video 84 - Project 2 - Spotify Clone/js/script.js b/Video 84 - Project 2 - Spotify Clone/js/script.js index 32e76b89..7ba36a65 100644 --- a/Video 84 - Project 2 - Spotify Clone/js/script.js +++ b/Video 84 - Project 2 - Spotify Clone/js/script.js @@ -149,6 +149,25 @@ async function main() { currentSong.currentTime = ((currentSong.duration) * percent) / 100 }) + let seekbar = document.querySelector(".seekbar"); +let progress = document.querySelector(".progress"); + + +// event listener for the progress of current songs +seekbar.addEventListener("click", (e) => { + let percent = (e.offsetX / seekbar.getBoundingClientRect().width) * 100; + progress.style.width = percent + "%"; + + currentSong.currentTime = (currentsong.duration) * percent / 100; +}); + +// auto update while playing +currentSong.addEventListener("timeupdate", () => { + let percent = (currentSong.currentTime / currentSong.duration) * 100; + progress.style.width = percent + "%"; +}); + + // Add an event listener for hamburger document.querySelector(".hamburger").addEventListener("click", () => { document.querySelector(".left").style.left = "0"