From a8f29b740f45f7d25b0e86a2aa06b2194b6cbd8e Mon Sep 17 00:00:00 2001
From: Harrison Deng <yunyangdeng@gmail.com>
Date: Tue, 19 Apr 2022 23:47:15 -0500
Subject: [PATCH] MusicPlayer tutorial style improvements.

---
 tutorials/MusicPlayer.html    | 31 ++++++++++++-------------------
 tutorials/assets/css/main.css |  2 ++
 2 files changed, 14 insertions(+), 19 deletions(-)

diff --git a/tutorials/MusicPlayer.html b/tutorials/MusicPlayer.html
index bd5f541..f128747 100644
--- a/tutorials/MusicPlayer.html
+++ b/tutorials/MusicPlayer.html
@@ -14,12 +14,6 @@
         const playlist = previousPlaylist; // We are assuming you have a playlist ready.
         const player = new ask.player.MusicPlayer(playlist) // Creates a new music player with the playlist.
     </code></pre>
-
-    <p>We'll also show the playlist display so you can see how it updates corresponding to the music currently selected.</p>
-    <div class="result">
-        <div id="playlist-display">
-        </div>
-    </div>
 </div>
 <div class="part">
     <h2>Display a Play Button</h2>
@@ -41,20 +35,18 @@
     <p>We can also traverse the playlist by the player via a previous and next button. These buttons can be generated as well as programmed.</p>
     <pre><code class="language-js">
         // Still using the same context from the instantiation example...
-        const nextElement = player.generateNextElement();
-        document.getElementById("musicplayer-nextbtn-demo").appendChild(nextElement);
-
+        const nextElem = player.generateNextElement();
+        document.getElementById("musicplayer-nav-demo").appendChild(nextElem);
+    
         const prevElem = player.generatePreviousElement();
-        document.getElementById("musicplayer-prevbtn-demo").appendChild(prevElem);    
+        document.getElementById("musicplayer-nav-demo").appendChild(prevElem);   
     </code></pre>
-    <h3>The next button</h3>
+    <h3>Produces</h3>
+    <p>Feel free to try the buttons and see what happens! We'll show the playlist display demonstrated in the [MusicPlaylist tutorial]{@tutorial MusicPlaylist}.</p>
     <div class="result">
-        <div id="musicplayer-nextbtn-demo">
+        <div id="musicplayer-playlist-display">
         </div>
-    </div>
-    <h3>The previous button</h3>
-    <div class="result">
-        <div id="musicplayer-prevbtn-demo">
+        <div id="musicplayer-nav-demo">
         </div>
     </div>
 </div>
@@ -65,16 +57,17 @@
     playlist.add("./assets/audio/moments.mp3", "Moments", "Lost Identities x Robbie Rosen");
     playlist.add("./assets/audio/XXI.mp3", "XXI", "QR");
 
+
     const playlistDispElement = playlist.generatePlaylistElement();
-    document.getElementById("playlist-display").append(playlistDispElement);
+    document.getElementById("musicplayer-playlist-display").append(playlistDispElement);
 
     const player = new ask.player.MusicPlayer(playlist);
     const playElem = player.generatePlayElement();
     document.getElementById("musicplayer-playbtn-demo").appendChild(playElem);
 
     const nextElem = player.generateNextElement();
-    document.getElementById("musicplayer-nextbtn-demo").appendChild(nextElem);
+    document.getElementById("musicplayer-nav-demo").appendChild(nextElem);
 
     const prevElem = player.generatePreviousElement();
-    document.getElementById("musicplayer-prevbtn-demo").appendChild(prevElem);
+    document.getElementById("musicplayer-nav-demo").appendChild(prevElem);
 </script>
\ No newline at end of file
diff --git a/tutorials/assets/css/main.css b/tutorials/assets/css/main.css
index 9d7cbe4..2a3838a 100644
--- a/tutorials/assets/css/main.css
+++ b/tutorials/assets/css/main.css
@@ -9,6 +9,8 @@
     justify-content: center;
     align-items: center;
     box-shadow: inset 0 0 10px rgb(133, 133, 133);
+    margin-bottom: 1rem;
+    margin-top: 1rem;
 }
 
 .part {