Merge pull request #297 from Weave-Trix/trix/main_random_song

issue#276 random song btn mainpage

index.html

@@ -57,6 +57,14 @@ <h1 class="heading">A very Mogul Christmas</h1>
          </p>
          <p> PS: listen to Christmas Music throughout the year, not only during Christmas time. </p>
       </div>
+      <div class="main-random-div">
+            <div class="random-song-container">
+               <i id="random-btn-meta" class="fa fa-random fa-2x"></i>
+               <div id="random-text-container">
+                  <button class="random" id="random-btn-text" onClick="shuffleSongs();">Play Random Song</button>
+               </div>  
+            </div>
+      </div>
       <iframe id="embed" src="https://www.youtube.com/embed/TtY9eRayseg" title="YouTube video player" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>
       <!-- songs container, the contents of the div are called upon in the js file, thus this is div is empty. -->
       <div class="songs">

index.js

@@ -74,6 +74,16 @@ Object.keys(songs).map((song_title) => {
   songsDOM.appendChild(outerElem);
 });
 
+// randomly shuffle a song from main page's songs
+function shuffleSongs() {
+  var properties = Object.getOwnPropertyNames(songs);
+  var ranNum = Math.floor(Math.random() * (properties.length - 1));
+  var songName = properties[ranNum];
+  var song = songs[songName];
+  console.log(songs[songName]);
+  embed.src = `https://www.youtube.com/embed/TtY9eRayseg?start=${song.start}&autoplay=1&end=${song.end}`;
+}
+
 // Open GitHub repo in a new window if user clicks GitHub icon on project website
 newTabGithub.addEventListener("click", () => {
   window.open(

styles.css

@@ -361,6 +361,40 @@ a:active {
   cursor: pointer;
 }
 
+.main-random-div {
+  width: 100%;
+  display: flex;
+  margin-top: 0.8rem;
+  justify-content: center;
+}
+
+.random-song-container {
+  padding-right: 2.1rem;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  height: fit-content;
+  width: fit-content;
+}
+
+#random-text-container {
+  height: fit-content;
+  width: fit-content;
+  padding-bottom: 0.8rem;
+  margin-left: 0.5rem;
+}
+
+.random {
+  background-color: white;
+  position: relative;
+  align-self: center;
+}
+
+#random-btn-text {
+  vertical-align: middle;
+}
+
+
 #header {
   position: relative;
   display: flex;

you-may-like/index.html

@@ -31,7 +31,7 @@ <h1 class="heading"> You May Also Like</h1>
                <span><button class="random" id="random-button" onClick="openStuff();">Play Random Song</button></span>
             </a>
          </p>
-   </div>
+      </div>
    <div class="suggest-song">
       <p>
             <i id="suggest" class="fa fa-plus fa-2x"></i>

you-may-like/styles.css

@@ -58,3 +58,4 @@ main .list .item:hover {
   background-color: #44eeaa;
   box-shadow: inset 0px 0px 4px rgba(0, 0, 0, 0.2);
 }
+