Merge branch 'main' of https://github.com/KendallDoesCoding/mogul-chr…

…istmas

.all-contributorsrc

@@ -162,6 +162,24 @@
       "contributions": [
         "doc"
       ]
+    },
+    {
+      "login": "CipherKill",
+      "name": "Alan Raju",
+      "avatar_url": "https://avatars.githubusercontent.com/u/37742577?v=4",
+      "profile": "https://github.com/CipherKill",
+      "contributions": [
+        "doc"
+      ]
+    },
+    {
+      "login": "mukul314",
+      "name": "Mukul Ojha",
+      "avatar_url": "https://avatars.githubusercontent.com/u/76463001?v=4",
+      "profile": "https://github.com/mukul314",
+      "contributions": [
+        "doc"
+      ]
     }
   ],
   "projectName": "mogul-christmas",

README.md

@@ -16,7 +16,7 @@
 
 # Introduction
 
-This is a project where you can play all the songs by a click of a button which you can already do from his timestamps but what makes it unique is that it has lyrics of the songs and a bunch of other features like a photo gallery.
+This is a project where you can play all the songs by a click of a button which you can already do from the timestamps but what makes it unique is that it has lyrics of the songs and a bunch of other features like a photo gallery.
 
 On the 18th of December 2021, I was bored, so I created this basic HTML Project. I felt like continuing with this fun project, so I enlisted the help of a few contributors.
 

credits/index.html

@@ -26,29 +26,33 @@ <h2>Project Contributors (People that helped make this website a success :)</h2>
 <!-- prettier-ignore-start -->
 <!-- markdownlint-disable -->
 <table>
-  <tr>
-    <td align="center"><a href="https://github.com/KendallDoesCoding"><img src="https://avatars.githubusercontent.com/u/84712013?v=4" width="100px;" alt=""/><br /><sub><b>Kendall Pinto</b></sub></a></td>
-    <td align="center"><a href="https://www.youtube.com/channel/UCzb9_b2UY29xuY-S8BsmpOg"><img src="https://avatars.githubusercontent.com/u/76978184?v=4" width="100px;" alt=""/><br /><sub><b>TechStudent10</b></sub></a></td>
-    <td align="center"><a href="https://github.com/aliraza944"><img src="https://avatars.githubusercontent.com/u/50791045?v=4" width="100px;" alt=""/><br /><sub><b>Ali Raza</b></sub></a></td>
-    <td align="center"><a href="https://github.com/JeffBucherDev"><img src="https://avatars.githubusercontent.com/u/71293215?v=4" width="100px;" alt=""/><br /><sub><b>Jeff Bucher</b></sub></a></td>
-    <td align="center"><a href="https://github.com/Bibhavshah"><img src="https://avatars.githubusercontent.com/u/78656387?v=4" width="100px;" alt=""/><br /><sub><b>Bibhavshah</b></sub></a></td>
-    <td align="center"><a href="https://kiradev.co"><img src="https://avatars.githubusercontent.com/u/90365542?v=4" width="100px;" alt=""/><br /><sub><b>Kira</b></sub></a></td>
-    <td align="center"><a href="https://linktr.ee/divyakelaskar"><img src="https://avatars.githubusercontent.com/u/56636487?v=4" width="100px;" alt=""/><br /><sub><b>Divya Kelaskar</b></sub></a></td>
-  </tr>
-  <tr>
-    <td align="center"><a href="https://github.com/samyberkane04"><img src="https://avatars.githubusercontent.com/u/101561292?v=4" width="100px;" alt=""/><br /><sub><b>samyberkane04</b></sub></a></td>
-    <td align="center"><a href="http://moaconcept.xyz"><img src="https://avatars.githubusercontent.com/u/70345027?v=4" width="100px;" alt=""/><br /><sub><b>Michael Obubelebra Amachree</b></sub></a></td>
-    <td align="center"><a href="https://github.com/Weave-Trix"><img src="https://avatars.githubusercontent.com/u/88459877?v=4" width="100px;" alt=""/><br /><sub><b>Weave-Trix</b></sub></a></td>
-    <td align="center"><a href="https://github.com/fk00750"><img src="https://avatars.githubusercontent.com/u/94318094?v=4" width="100px;" alt=""/><br /><sub><b>F.K</b></sub></a></td>
-    <td align="center"><a href="https://github.com/ArhyaSaha"><img src="https://avatars.githubusercontent.com/u/111699634?v=4" width="100px;" alt=""/><br /><sub><b>ArhyaSaha</b></sub></a></td>
-    <td align="center"><a href="https://frazier-se.netlify.app/"><img src="https://avatars.githubusercontent.com/u/14346677?v=4" width="100px;" alt=""/><br /><sub><b>Frazier Odhiambo</b></sub></a></td>
-    <td align="center"><a href="https://github.com/eduarecnam"><img src="https://avatars.githubusercontent.com/u/26501943?v=4" width="100px;" alt=""/><br /><sub><b>Eduar Mancera</b></sub></a></td>
-  </tr>
-  <tr>
-    <td align="center"><a href="https://github.com/wyenelle"><img src="https://avatars.githubusercontent.com/u/45835081?v=4" width="100px;" alt=""/><br /><sub><b>Favour  Timothy </b></sub></a></td>
-    <td align="center"><a href="https://github.com/lazyturd"><img src="https://avatars.githubusercontent.com/u/86523250?v=4" width="100px;" alt=""/><br /><sub><b>Shittu Ayomide</b></sub></a></td>
-    <td align="center"><a href="https://github.com/sharmavivek223"><img src="https://avatars.githubusercontent.com/u/36125286?v=4" width="100px;" alt=""/><br /><sub><b>Vivek Sharma</b></sub></a></td>
-  </tr>
+  <tbody>
+    <tr>
+      <td align="center"><a href="https://github.com/KendallDoesCoding"><img src="https://avatars.githubusercontent.com/u/84712013?v=4" width="100px;" alt=""/><br /><sub><b>Kendall Pinto</b></sub></a></td>
+      <td align="center"><a href="https://www.youtube.com/channel/UCzb9_b2UY29xuY-S8BsmpOg"><img src="https://avatars.githubusercontent.com/u/76978184?v=4" width="100px;" alt=""/><br /><sub><b>TechStudent10</b></sub></a></td>
+      <td align="center"><a href="https://github.com/aliraza944"><img src="https://avatars.githubusercontent.com/u/50791045?v=4" width="100px;" alt=""/><br /><sub><b>Ali Raza</b></sub></a></td>
+      <td align="center"><a href="https://github.com/JeffBucherDev"><img src="https://avatars.githubusercontent.com/u/71293215?v=4" width="100px;" alt=""/><br /><sub><b>Jeff Bucher</b></sub></a></td>
+      <td align="center"><a href="https://github.com/Bibhavshah"><img src="https://avatars.githubusercontent.com/u/78656387?v=4" width="100px;" alt=""/><br /><sub><b>Bibhavshah</b></sub></a></td>
+      <td align="center"><a href="https://kiradev.co"><img src="https://avatars.githubusercontent.com/u/90365542?v=4" width="100px;" alt=""/><br /><sub><b>Kira</b></sub></a></td>
+      <td align="center"><a href="https://linktr.ee/divyakelaskar"><img src="https://avatars.githubusercontent.com/u/56636487?v=4" width="100px;" alt=""/><br /><sub><b>Divya Kelaskar</b></sub></a></td>
+    </tr>
+    <tr>
+      <td align="center"><a href="https://github.com/samyberkane04"><img src="https://avatars.githubusercontent.com/u/101561292?v=4" width="100px;" alt=""/><br /><sub><b>samyberkane04</b></sub></a></td>
+      <td align="center"><a href="http://moaconcept.xyz"><img src="https://avatars.githubusercontent.com/u/70345027?v=4" width="100px;" alt=""/><br /><sub><b>Michael Obubelebra Amachree</b></sub></a></td>
+      <td align="center"><a href="https://github.com/Weave-Trix"><img src="https://avatars.githubusercontent.com/u/88459877?v=4" width="100px;" alt=""/><br /><sub><b>Weave-Trix</b></sub></a></td>
+      <td align="center"><a href="https://github.com/fk00750"><img src="https://avatars.githubusercontent.com/u/94318094?v=4" width="100px;" alt=""/><br /><sub><b>F.K</b></sub></a></td>
+      <td align="center"><a href="https://github.com/ArhyaSaha"><img src="https://avatars.githubusercontent.com/u/111699634?v=4" width="100px;" alt=""/><br /><sub><b>ArhyaSaha</b></sub></a></td>
+      <td align="center"><a href="https://frazier-se.netlify.app/"><img src="https://avatars.githubusercontent.com/u/14346677?v=4" width="100px;" alt=""/><br /><sub><b>Frazier Odhiambo</b></sub></a></td>
+      <td align="center"><a href="https://github.com/eduarecnam"><img src="https://avatars.githubusercontent.com/u/26501943?v=4" width="100px;" alt=""/><br /><sub><b>Eduar Mancera</b></sub></a></td>
+    </tr>
+    <tr>
+      <td align="center"><a href="https://github.com/wyenelle"><img src="https://avatars.githubusercontent.com/u/45835081?v=4" width="100px;" alt=""/><br /><sub><b>Favour  Timothy </b></sub></a></td>
+      <td align="center"><a href="https://github.com/lazyturd"><img src="https://avatars.githubusercontent.com/u/86523250?v=4" width="100px;" alt=""/><br /><sub><b>Shittu Ayomide</b></sub></a></td>
+      <td align="center"><a href="https://github.com/sharmavivek223"><img src="https://avatars.githubusercontent.com/u/36125286?v=4" width="100px;" alt=""/><br /><sub><b>Vivek Sharma</b></sub></a></td>
+      <td align="center"><a href="https://github.com/CipherKill"><img src="https://avatars.githubusercontent.com/u/37742577?v=4" width="100px;" alt=""/><br /><sub><b>Alan Raju</b></sub></a></td>
+      <td align="center"><a href="https://github.com/mukul314"><img src="https://avatars.githubusercontent.com/u/76463001?v=4" width="100px;" alt=""/><br /><sub><b>Mukul Ojha</b></sub></a></td>
+    </tr>
+  </tbody>
 </table>
 
 <!-- markdownlint-restore -->

index.html

@@ -63,11 +63,16 @@ <h1 class="heading">A very Mogul Christmas</h1>
                <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>
+               <!-- Stop button -->
+               <div id="random-text-container">
+                  <button class="stop-btn-style" id="stop-btn" onClick="stopVideo()">Stop</button>
+               </div>
+               <!-- stop button end -->
             </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. -->
+      <!-- songs container, the contents of the div are called upon in the js file, thus this div is empty. -->
       <div class="songs">
       </div>
       <div class="container">

index.js

@@ -33,8 +33,11 @@ const embed = document.getElementById("embed");
 const newTabGithub = document.querySelector(".social");
 const toggle = document.querySelector(".round");
 const slider = document.querySelector(".slider");
+
+
 toggle.addEventListener("click", modeSwitch);
 
+
 // Darkmode/Lightmode + Making songs play when clicked
 
 let isLight = true;
@@ -58,11 +61,15 @@ Object.keys(songs).map((song_title) => {
   const startTime = songs[song_title].start;
   const endTime = songs[song_title].end;
   const outerElem = document.createElement("p");
+
+  //stop button for individual songs
+  outerElem.onclick=()=>revealStopButton();
+
   const link = document.createElement("a");
   link.innerHTML = song_title;
   link.style = "cursor: pointer";
   link.onclick = () => {
-    embed.src = `https://www.youtube.com/embed/TtY9eRayseg?start=${startTime}&autoplay=1&end=${endTime}`;
+    embed.src = `https://www.youtube.com/embed/TtY9eRayseg?start=${startTime}&autoplay=1&end=${endTime}&enablejsapi=1`;
     console.log(
       "If you don't know this song, we suggest you go to the lyrics page. You can play the song from that page too :)"
     );
@@ -76,12 +83,13 @@ Object.keys(songs).map((song_title) => {
 
 // randomly shuffle a song from main page's songs
 function shuffleSongs() {
+  revealStopButton();
   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}`;
+  embed.src = `https://www.youtube.com/embed/TtY9eRayseg?start=${song.start}&autoplay=1&end=${song.end}&enablejsapi=1`;
 }
 
 // Open GitHub repo in a new window if user clicks GitHub icon on project website
@@ -92,3 +100,17 @@ newTabGithub.addEventListener("click", () => {
     "resizable=yes, scroll=yes, location=1, titlebar=yes, width=800, height=900, top=10, left=10"
   );
 });
+
+//stop-button-feature
+const stopButton=document.querySelector("#stop-btn"); //stop button
+
+//make the stop button visible when "play random song button is clicked"
+function revealStopButton(){
+  stopButton.style.display='block';
+}
+
+//stop button function
+function stopVideo(){
+  embed.contentWindow.postMessage('{"event":"command","func":"stopVideo","args":""}','*');
+  stopButton.style.display='none';
+}

photo-gallery/index.html

@@ -30,7 +30,7 @@ <h2>PLEASE ADD YOUR PHOTO <a href="https://github.com/KendallDoesCoding/mogul-ch
         </div>
         <div class="column">
           <img src="../images/photo-gallery-imgs/9.jpg" />
-          <!--<img src="/images/photo-gallery-imgs/10.jpg" /> -->
+          <img src="/images/photo-gallery-imgs/10.jpg" />
         </div>
       </div>
     </div>

styles.css

@@ -48,7 +48,7 @@
 
 /* Body */
 
-/* Needs editting, the christmastree images need to be called in a div not in the BODY */
+/* Needs editing, the christmastree images need to be called in a div not in the BODY */
 
 body {
   user-select: none;
@@ -99,7 +99,7 @@ body {
   color: var(--font-color-sub-heading);
 }
 
-/* Icon on top of the website */
+/* Icons on top of the website */
 #spotify {
   color: #1db954;
 }
@@ -197,6 +197,25 @@ a:active {
   margin-top: 1rem;
 }
 
+.stop-btn-style{
+  display:none;
+  background-image: radial-gradient(
+    circle farthest-corner at 92.3% 71.5%,
+    rgb(255, 85, 0) 0%,
+    rgb(173, 0, 0) 90%
+  );
+  color: white;
+  outline: none;
+  border: none;
+  font-family: "Handlee", cursive;
+  font-size: 1.5rem;
+  cursor: pointer;
+  padding: 0.5rem 1rem;
+  border-radius: 5px;
+  transition: all 0.2s ease-in-out;
+  margin-top: 1rem;
+}
+
 .suggest {
   background-color: #f4d03f;
   background-image: linear-gradient(132deg, #f4d03f 0%, #16a085 100%);