CSS change, List of last played tracks

css/msgbox.css

@@ -8,7 +8,7 @@
     right: 20px;
     text-align: center;
     border-radius: 10px;
-    background-color: rgba(0, 0, 0, 0.7);
+    background-color: rgba(60, 60, 60, 0.9);
 }
 #jGrowl{
     margin: 0 12px 0 12px;

css/style.css

@@ -12,15 +12,15 @@ body {
   display: flex;
   align-items: center;
   align-content: center;
-  justify-content: center;
+  justify-content: left;
   overflow: auto;
 }
 
 #RadioBox{
   width: 450px;
-  height: 490px;
-  background-color: rgba(0, 0, 0, 0.7);
-  border-radius: 10px;
+  height: 100%;
+  background-color: rgba(60, 60, 60, 0.9);
+  /* border-radius: 10px; */
   padding: 0 5px;
   color: #fff;
 }
@@ -52,7 +52,7 @@ body {
 
 .tagB {
   width: 100%;
-	//height: 20px;
+	/* height: 20px; */
 	border-radius: 0 0 5px 5px;
 	border: #f54e4e;
 	background-color: #fff;
@@ -136,12 +136,56 @@ h1 {
 	//margin: auto;
 }
 
+.mute_btn:hover {
+  color: #000;
+	background-color: #fff;
+}
+
 .volume-wrap {
   align-items: center;
   justify-content: center;
 	display: flex;
 }
 
+.tcon {
+  width: 100%;
+  border-radius: 5px 5px 0 0;
+  border: #f54e4e;
+  background-color: #000;
+  color: #fff;
+  transition: 0.5s ease all;
+  outline: none;
+  text-align: center;
+  margin-left: auto;
+  margin-right: auto;
+}
+
+.tlist {
+  width: 100%;
+  height: 35%;
+  border-radius: 0 0 5px 5px;
+  border: #f54e4e;
+  background-color: #fff;
+  color: #000;
+  transition: 0.5s ease all;
+  outline: none;
+  text-align: center;
+  margin-left: auto;
+  margin-right: auto;
+  overflow: auto;
+}
+
+.list_el {
+  border-bottom: 2px double #000;
+  background-color: #d3d3d3;
+  color: #000;
+}
+
+.list_el:nth-child(odd) {
+  border-bottom: 2px double #000;
+  background-color: #fff;
+  color: #000;
+}
 
 DIV {
   text-align: center

index.html

@@ -74,6 +74,14 @@
 			<input id="volume" type="range" class="slider muteEl" min="0" max="10" value="1" step="0.1" />
 		</div>
 
+		<br>
+
+		<div class=tcon>
+			Last played tracks
+		</div>
+		<div id="track_list" class=tlist>
+		</div>
+
 		<div id="jGrowl"></div>
 
 	</div>

js/audio.js

@@ -49,11 +49,11 @@ copyClipBoard.addEventListener('click', function () {
       .toggleClass('fas fa-volume-up')
       .toggleClass('fas fa-volume-mute');
       if (audio.muted === false) {
-        var   MsgText    = $('<div id="message-success"><p>Mute Sound</p></div>');
+        var   MsgText    = $('<div id="message-success"><p>Mute sound</p></div>');
         PopUpMsg(MsgText);
         audio.muted = true;
       } else {
-        var   MsgText    = $('<div id="message-success"><p>unmute Sound</p></div>');
+        var   MsgText    = $('<div id="message-success"><p>Unmute sound</p></div>');
         PopUpMsg(MsgText);
         audio.muted = false;
       }

js/radio.js

@@ -33,10 +33,12 @@ function show()
         getArtistURL(MPDartist);
         $("#trackname span").text(MPDartist+" - "+MPDsong);
         getYouTubeRequest(MPDfile);
+        addText(MPDfile);
       } else if (MPDCurr != MPDfile) {
           getArtistURL(MPDartist);
           $("#trackname span").text(MPDartist+" - "+MPDsong);
           getYouTubeRequest(MPDfile);
+          addText(MPDfile);
         }
       MPDCurr = MPDfile;
     });
@@ -88,3 +90,10 @@ function showResults(results) {
   document.querySelector('a[name="YouTubeURL"]').setAttribute('href', "https://www.youtube.com/watch?v="+YouURL);
   console.log("https://www.youtube.com/watch?v="+YouURL);
 }
+
+function addText(MPDfile) {
+  let last_track = document.createElement('div');
+  last_track.className = "list_el";
+  last_track.innerHTML = MPDfile;
+  track_list.prepend(last_track);
+}