onclick button change playing status, replace main block

5 years ago · dcf3626d6b
parent de8c6598d7
commit dcf3626d6b
2 changed files with 20 additions and 6 deletions
--- a/css/style1.css
+++ b/css/style1.css
@ -6,11 +6,22 @@ body {
  background-size: cover;
 }

+.parent {
+    width: 100%;
+    height: 100%;
+    position: fixed;
+    top: 0;
+    left: 0;
+    display: flex;
+    align-items: center;
+    align-content: center; 
+    justify-content: center; 
+    overflow: auto;   
+}
+
 #song{
  width: 400px;
-  height: 300px;
-  margin: auto;
-  justify-content : center;
+  height: 340px;
  background-color: rgba(0, 0, 0, 0.7);
  border-radius: 10px;
  color: #fff;
--- a/index.php
+++ b/index.php
@ -16,13 +16,12 @@

 <body>

+<div class="parent">
 	<div id="song">

 		<h1>Just Radio</h1>

-		now playing:
-
-		<br>
+		<div id="myPlay">-</div>

 		<div id="title">title</div>

@ -53,15 +52,19 @@
 		<div id="listeners">title</div>

 	</div>
+</div>
+

 <script language="JavaScript">
 	var audio = new Audio('http://stream.santic-zombie.ru');
 	var play = document.getElementById('play');
 	play.addEventListener('click', function() {
+		$("#myPlay").text("Now playing:");
 		audio.play();
 	}, false);
 	var pause = document.getElementById('pause');
 	pause.addEventListener('click', function() {
+		 $("#myPlay").text("Paused");
 	     audio.pause();
 	}, false);
 	var volume = document.getElementById('volume');