fix: adjust progress-bar work, change opacity of buttons' blik

MariyaShusharina · Sep 22, 2024 · 2780fd8 · 2780fd8
1 parent 1825d2b
commit 2780fd8
Show file tree

Hide file tree

Showing 3 changed files with 8 additions and 4 deletions.
diff --git a/index.html b/index.html
@@ -35,7 +35,7 @@ <h1>Audio Player</h1>
 				</div>
 
 				<div class="song-length-div">
-					<input type="range" class="song-length" min="0" max="" value="0" onchange="songTimeChange(this.value)">
+					<input type="range" class="song-length" min="0" max="100" value="0" onchange="songTimeChange(this.value)">
 				</div>
 
 				<div class="audio-div">

diff --git a/scripts.js b/scripts.js
@@ -180,8 +180,12 @@ function timeUpdate() {
 	timeConverter();
 
 	currTimeDiv.textContent = songTime;
+
+	progressBar.value = Math.round((songTime / songMaxTime) * 100);
 }
 
+
+
 window.onload = function() {
 
 	songMaxTime = Math.round(audio.duration);

diff --git a/style.css b/style.css
@@ -182,7 +182,7 @@ input[type="range"]::-webkit-slider-thumb {
 	background-repeat: no-repeat;
 	background-position: top;
 	background-size: contain;
-	opacity:  0.4;
+	opacity:  0.3;
 	z-index: 10;
 }
 
@@ -218,7 +218,7 @@ input[type="range"]::-webkit-slider-thumb {
 	background-repeat: no-repeat;
 	background-position: top;
 	background-size: contain;
-	opacity:  0.4;
+	opacity:  0.3;
 	z-index: 10;
 }
 
@@ -233,7 +233,7 @@ input[type="range"]::-webkit-slider-thumb {
 	background-repeat: no-repeat;
 	background-position: top;
 	background-size: contain;
-	opacity:  0.4;
+	opacity:  0.3;
 	z-index: 10;
 }