wrote comments for some of HTML & JS codes

credits/index.html

@@ -21,7 +21,7 @@ <h3> Sung in Baby It's Cold Outside </h3>
        <h2>Project Contributors (People that helped make this website a success :)</h2>
        <p class="thank-you"> Thanks to all our project contributors, your work and help is really appreciated. </h3>
        <p class="be-a-contributor"> Want to be a contributor and be on this list too? Check out the <a href="https://github.com/KendallDoesCoding/mogul-christmas/issues">Issues section of this project repo</a> on GitHub and see if you can help out with anything.</p>
-<center>      
+<center>
           <!-- ALL-CONTRIBUTORS-LIST:START - Do not remove or modify this section -->
 <!-- prettier-ignore-start -->
 <!-- markdownlint-disable -->
@@ -60,7 +60,7 @@ <h2>Project Contributors (People that helped make this website a success :)</h2>
 <!-- markdownlint-restore -->
 <!-- prettier-ignore-end -->
 
-<!-- ALL-CONTRIBUTORS-LIST:END -->     
+<!-- ALL-CONTRIBUTORS-LIST:END -->
  </center>
           <a href="https://github.com/KendallDoesCoding"><h1>KendallDoesCoding</h1></a>
         <h3> Project Founder, Owner </h3>

credits/styles.css

@@ -1,66 +1,78 @@
 /* Fonts */
+/* Importing Google Fonts */
 @import url("https://fonts.googleapis.com/css2?family=Redressed&display=swap");
 @import url("https://fonts.googleapis.com/css2?family=Roboto:ital,wght@0,300;1,100;1,300&display=swap");
 @import url("https://fonts.googleapis.com/css2?family=Handlee&display=swap");
 @import url("https://fonts.googleapis.com/css2?family=ZCOOL+QingKe+HuangYou&display=swap");
 @import url("https://fonts.googleapis.com/css2?family=Beau+Rivage&display=swap");
 
+/* Set center alignment and text alignment for all HTML and body elements */
 html,
 body {
   align-items: center;
   text-align: center;
 }
 
-
+/* Set color of visited links to blue */
 a:visited {
   color: blue;
 }
 
+/* Set color to purple and font family to "Handlee" for all h3 elements */
 h3 {
   color: purple;
   font-family: "Handlee", cursive;
 }
 
+/* Set color to green for all h2 elements */
 h2 {
   color: green;
 }
 
+/* Set color to #1abc9c, center alignment, text alignment and font family to "Redressed" for elements with class "heading" */
 .heading {
   color: #1abc9c;
   align-items: center;
   text-align: center;
   font-family: "Redressed", cursive;
 }
 
+/* Set color to red, center alignment, text alignment and font family to "Roboto" for elements with class "subtext" */
 .subtext {
   color: red;
   align-items: center;
   text-align: center;
   font-family: "Roboto", sans-serif;
 }
 
+/* Set center alignment for elements with class "contributors" containing an embed element */
 .contributors embed {
   align-items: center;
 }
 
+/* Set font size to small for elements with class "techstudent10-work" */
 .techstudent10-work {
   font-size: small;
 }
 
+/* Set color to red and font family to "ZCOOL QingKe HuangYou" for elements with class "be-a-contributor" */
 .be-a-contributor {
   color: red;
   font-family: "ZCOOL QingKe HuangYou", cursive;
 }
 
+/* Set color to red and font family to "ZCOOL QingKe HuangYou" for elements with class "commits" */
 .commits {
   color: red;
   font-family: "ZCOOL QingKe HuangYou", cursive;
 }
 
+/* Set color to red for all links inside elements with class "commits" */
 .commits a {
   color: red;
 }
 
+/* Set color to purple, font family to "Beau Rivage" and font size to 9mm for elements with class "thank-you" */
 .thank-you {
   color: purple;
   font-family: "Beau Rivage", cursive;

index.js

@@ -279,52 +279,72 @@ function toggleLoop() {
     loopButton.classList.add("active");
   }
 }
+
 function updateLoop() {
+  // Check the current state of the loop
   if (loopState === false) {
+    // If it's off, remove the 'active' class from the loop button
     loopButton.classList.remove("active");
   } else if (loopState === true) {
+    // If it's on, add the 'active' class to the loop button
     loopButton.classList.add("active");
   }
 }
 
+// Function to toggle the shuffle mode
 function toggleShuffle() {
-  shuffleState = !shuffleState;
-  localStorage.setItem("shuffle", shuffleState);
+  shuffleState = !shuffleState; // Toggle the shuffle state
+  localStorage.setItem("shuffle", shuffleState); // Save the state to local storage
+  // If shuffle mode is turned off, remove the active class from the shuffle button
   if (shuffleState === false) {
     shuffleButton.classList.remove("active");
+    // If shuffle mode is turned on, add the active class to the shuffle button and shuffle the songs list
   } else if (shuffleState === true) {
     shuffleButton.classList.add("active");
     shuffleSongsList();
   }
 }
+
+// Function to update the shuffle mode
 function updateShuffle() {
+  // If shuffle mode is turned off, remove the active class from the shuffle button
   if (shuffleState === false) {
     shuffleButton.classList.remove("active");
+
+    // If shuffle mode is turned on, add the active class to the shuffle button and shuffle the songs list
   } else if (shuffleState === true) {
     shuffleButton.classList.add("active");
     shuffleSongsList();
   }
 }
+
+// Function to update the volume
 function updateVolume() {
   let volumeState = parseInt(localStorage.getItem("volume") ?? 50);
+  // Set the volume of the player to the volume state
   player?.setVolume?.(volumeState);
+  // Set the value of the volume bar to the volume state
   volumeBar.value = volumeState;
 }
 
+// Function to clear the time left interval and remove the active class from the time left elements
 function clearTimeLeft() {
-  clearInterval(intervalId);
+  clearInterval(intervalId); // Clear the interval
   const a = document.getElementsByClassName("time-left");
   for (let i = 0; i < a.length; i++) {
-    a[i].classList.remove("active");
+    a[i].classList.remove("active"); // Remove the active class from each element
   }
 }
 
+// Function to display the menu
 function displayMenu(){
   document.getElementById('menu-display').style.display = 'flex'
   document.getElementById('menu-display').style.animationName = 'appear'
   document.getElementById('closed-menu-icon').style.display = 'none'
   document.getElementById('open-menu-icon').style.display = 'block'
 }
+
+// Function to close the menu
 function closeMenu(){
   document.getElementById('menu-display').style.animationName = 'desappear'
   document.getElementById('closed-menu-icon').style.display = 'block'

ludsocials/index.html

@@ -11,18 +11,23 @@
    </head>
    <body class="lyrics">
       <header>
+         <!-- Link to the index.html page -->
          <a href="../index.html">
+         <!-- SVG arrow icon for navigation -->
          <svg width="40" height="40" viewBox="0 0 20 15" fill="none" xmlns="http://www.w3.org/2000/svg">
            <path class='arrow' d="M0.792893 6.79289C0.402369 7.18342 0.402369 7.81658 0.792893 8.20711L7.15685 14.5711C7.54738 14.9616 8.18054 14.9616 8.57107 14.5711C8.96159 14.1805 8.96159 13.5474 8.57107 13.1569L2.91421 7.5L8.57107 1.84315C8.96159 1.45262 8.96159 0.819456 8.57107 0.428932C8.18054 0.0384079 7.54738 0.0384079 7.15685 0.428932L0.792893 6.79289ZM18.5 8.5C19.0523 8.5 19.5 8.05228 19.5 7.5C19.5 6.94772 19.0523 6.5 18.5 6.5V8.5ZM1.5 8.5H18.5V6.5H1.5V8.5Z" fill="#496C42"/>
            </svg>
-         </a> 
+         </a>
+         <!-- Main header title -->
          <h1 class="h1">Ludwig's Socials</h1>
-               
+
                <!-- Toggler Outside Menu -->
                <div id="header">
                  <div id="switch">
+                  <!-- Toggle button for the menu -->
                     <label role='switch' class="switch">
                       <input class="switch-input" type="checkbox" />
+                     <!-- Slider for the toggle button -->
                      <span class="switch slider round" id="round"></span>
                    </label>
                  </div>

ludsocials/podcasts/index.html

@@ -20,9 +20,9 @@ <h1 class="logo">
          <img class="logo-icon" src="images/theyard.jfif" />
       </div>
       <div class="modal-header">
-         <h1 class="logo"> 
+         <h1 class="logo">
             Ludwig's Podcast
-            Socials 
+            Socials
          </h1>
       </div>
       <div class="modal-content">

lyrics/alliwantforchristmas/index.js

@@ -1,7 +1,13 @@
+// Find the lyrics for the song "all i want for christmas" in the "lyrics" array.
 const song = lyrics.find((x) => x.name === "all i want for christmas").lyrics;
 
+// Select the lyrics container from the HTML document
 const lyrics__container = document.getElementsByClassName("lyrics")[0];
+
+// Select the slider for the song "all i want for christmas"
 const slider_all_I_want_for_christmas = document.querySelector(".slider");
+
+// Create a new paragraph element for each line of the song, and append it to the lyrics container
 song.map((item) => {
   const p = document.createElement("p");
   const textNode = document.createTextNode(item);
@@ -12,8 +18,11 @@ song.map((item) => {
   return lyrics__container.appendChild(p);
 });
 
+// Select the toggle button for switching between light and dark modes
 const toggle_all_I_want_for_christmas = document.querySelector(".round");
 toggle_all_I_want_for_christmas.addEventListener("click", modeSwitch);
+
+// Set the initial mode to "light"
 let isLight_all_I_want_for_christmas = true;
 function modeSwitch() {
   isLight_all_I_want_for_christmas = !isLight_all_I_want_for_christmas;

lyrics/babyitscoldoutside/index.js

@@ -1,10 +1,13 @@
+// Find the lyrics of the song "Baby, It's Cold Outside" from the lyrics array
 const its_cold_outside = lyrics.find(
   (x) => x.name === "baby its cold outside"
 ).lyrics;
 
+// Select the HTML element with the class "lyrics" to contain the lyrics of the song
 const its_cold_outside__container =
   document.getElementsByClassName("lyrics")[0];
 
+// Create HTML paragraph elements for each line of the lyrics and append them to the lyrics container
 its_cold_outside.map((item) => {
   const p = document.createElement("p");
   const textNode = document.createTextNode(item);
@@ -15,12 +18,19 @@ its_cold_outside.map((item) => {
   return its_cold_outside__container.appendChild(p);
 });
 
+// Select the slider element for the song "Baby, It's Cold Outside"
 const slider_baby_its_cold_outside = document.querySelector(".slider");
 
+// Select the toggle button for the dark mode of the song "Baby, It's Cold Outside"
 const toggle_on_baby_its_cold_outside = document.querySelector(".round");
+
+// Add an event listener to the toggle button for the dark mode of the song "Baby, It's Cold Outside"
 toggle_on_baby_its_cold_outside.addEventListener("click", modeSwitch);
 
+// Set the initial state of the dark mode to light
 let isLight_baby_its_cold_outside = true;
+
+// Define the function to switch between light and dark modes
 function modeSwitch() {
   isLight_baby_its_cold_outside = !isLight_baby_its_cold_outside;
 
@@ -29,6 +39,8 @@ function modeSwitch() {
         "url('../../images/day.png')")
     : (slider_baby_its_cold_outside.style.backgroundImage =
         "url('../../images/night.png')");
+
+  // Toggle the "darkMode" class of the body element to switch the color scheme of the page
   const rootElement = document.body;
   rootElement.classList.toggle("darkMode");
 }

lyrics/christmassong/index.html

@@ -342,9 +342,9 @@
          <svg width="40" height="40" viewBox="0 0 20 15" fill="none" xmlns="http://www.w3.org/2000/svg">
            <path class='arrow' d="M0.792893 6.79289C0.402369 7.18342 0.402369 7.81658 0.792893 8.20711L7.15685 14.5711C7.54738 14.9616 8.18054 14.9616 8.57107 14.5711C8.96159 14.1805 8.96159 13.5474 8.57107 13.1569L2.91421 7.5L8.57107 1.84315C8.96159 1.45262 8.96159 0.819456 8.57107 0.428932C8.18054 0.0384079 7.54738 0.0384079 7.15685 0.428932L0.792893 6.79289ZM18.5 8.5C19.0523 8.5 19.5 8.05228 19.5 7.5C19.5 6.94772 19.0523 6.5 18.5 6.5V8.5ZM1.5 8.5H18.5V6.5H1.5V8.5Z" fill="#496C42"/>
            </svg>
-         </a>   
+         </a>
          <h1 id="h1" class="h1">Christmas Song Lyrics</h1>
-               
+
                <!-- Toggler Outside Menu -->
                <div id="header">
                  <div id="switch">
@@ -357,7 +357,7 @@ <h1 id="h1" class="h1">Christmas Song Lyrics</h1>
          </header>
          <main class="lyrics-main">
             <p class="lyrics-lud">Song from <a href="https://youtube.com/MrAndersLA" >Ludwig</a>'s Album!</p>
-      <iframe class="lyric-video" width="100%" height="auto" src="https://www.youtube.com/embed/TtY9eRayseg?autoplay=1&end=211;" title="YouTube video player" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>    
+      <iframe class="lyric-video" width="100%" height="auto" src="https://www.youtube.com/embed/TtY9eRayseg?autoplay=1&end=211;" title="YouTube video player" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>
       <div class="lyrics">
       </div>
       <a href="https://kendalldoescoding.gq/thechristmassong" id="originalsong-btn" class="btn">Original Song</a>

lyrics/christmassong/index.js

@@ -1,7 +1,10 @@
+// Find the lyrics of the song "christmas song" from the "lyrics" array of objects
 const christmas_song = lyrics.find((x) => x.name === "christmas song").lyrics;
 
+// Get the first element with class "lyrics" from the HTML document
 const christmas_song__container = document.getElementsByClassName("lyrics")[0];
 
+// Loop through each item of the lyrics and append it as a <p> element to the container
 christmas_song.map((item) => {
   const p = document.createElement("p");
   const textNode = document.createTextNode(item);
@@ -12,21 +15,28 @@ christmas_song.map((item) => {
   return christmas_song__container.appendChild(p);
 });
 
+// Get the slider and toggle elements from the HTML document
 const slider_christmas_song = document.querySelector(".slider");
 
 const toggle_christmas_song = document.querySelector(".round");
+
+// Add an event listener to the toggle element to switch between light and dark modes when clicked
 toggle_christmas_song.addEventListener("click", modeSwitch);
 
+// Initialize a boolean variable to track the current mode (light or dark) of the lyrics section
 let isLight_christmas_song = true;
 
+// Define the function to switch between light and dark modes
 function modeSwitch() {
   isLight_christmas_song = !isLight_christmas_song;
 
+  // Change the background image of the slider based on the current mode
   isLight_christmas_song
     ? (slider_christmas_song.style.backgroundImage =
         "url('../../images/day.png')")
     : (slider_christmas_song.style.backgroundImage =
         "url('../../images/night.png')");
+  // Toggle the "darkMode" class on the root element of the document to switch between light and dark mode
   const rootElement = document.body;
   rootElement.classList.toggle("darkMode");
 }

lyrics/darkmode.js

@@ -1,11 +1,19 @@
 // Darkmode/Lightmode
+// Select the slider element from the DOM
 const slider = document.querySelector(".slider");
+// Select the toggle element from the DOM
 const toggle_lyrics_page = document.querySelector(".round");
+// Add an event listener to the toggle element, listening for a click event
 toggle_lyrics_page.addEventListener("click", modeSwitch);
+// Initialize a boolean variable to track whether the page is currently in light mode or dark mode
 let isLight = true;
 
+// Define a function to switch between light mode and dark mode
 function modeSwitch() {
+  // Invert the value of the boolean variable
   isLight = !isLight;
+  // Select the root element from the DOM (i.e. the <body> element)
   const rootElement = document.body;
+  // Toggle the "darkMode" class on the root element
   rootElement.classList.toggle("darkMode");
 }