added comments for lab7

achievements.html

@@ -5,9 +5,11 @@
     <title>Achievements</title>
     <link rel="stylesheet" href="CSS/style.css">
     <script src="JS/timeToLoad.js"></script>
+        <!-- Meta viewport for responsive design -->
     <meta name="viewport" content="width=device-width, initial-scale=1, minimum-scale=1, maximum-scale=1" />
+        <!-- Link to external stylesheet for Swiper carousel -->
     <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/swiper@11/swiper-bundle.min.css" />
-
+        <!-- Internal styles for the document -->
     <style>
       html,
       body {
@@ -53,8 +55,10 @@ <h1 class="header__title">Achievements</h1>
       <nav class="header__nav"><a href="index.html">General</a> <a href="scoreboard.html">PRScoreboard</a> <a href="achievements.html" class="active">Achievements</a> <a href="resources.html">Resources</a> <a href="profile.html">Profile</a> <a href="todo.html">ToDoList</a></nav>
   </header>
     <main class="body">
+      <!-- Swiper carousel container -->
       <div class="swiper mySwiper">
         <div class="swiper-wrapper">
+          <!-- Swiper slides with images and corresponding text -->
           <div class="swiper-slide">
             <img src="IMG/Levels/Noob.png" />
             <p>Noob</p>
@@ -95,24 +99,26 @@ <h1 class="header__title">Achievements</h1>
             <img src="IMG/Levels/extra.png" />
             <p>Shredded</p>
           </div>
+          <!-- Last swiper slide has an id, to add some additional logic to it -->
           <div class="swiper-slide" id="lastSlide">
             <img src="IMG/Levels/heheheha.png" />
             <p><strong>ABSOLUTE UNIT</strong></p>
           </div>
         </div>
+        <!-- Swiper navigation buttons and pagination -->
         <div class="swiper-button-next"></div>
         <div class="swiper-button-prev"></div>
         <div class="swiper-pagination"></div>
       </div>
-
+      <!-- Audio element for playing prerecorded audio in a random manner -->
       <audio id="randomAudio" controls style="display: none;">
         <source src="" type="audio/mp3">
         Your browser does not support the audio element.
       </audio>
 
-
+      <!-- Swiper JavaScript library -->
       <script src="https://cdn.jsdelivr.net/npm/swiper@11/swiper-bundle.min.js"></script>
-
+      <!-- Custom script for Swiper configuration and audio -->
       <script>
         var swiper = new Swiper(".mySwiper", {
           effect: "flip",
@@ -125,6 +131,8 @@ <h1 class="header__title">Achievements</h1>
             prevEl: ".swiper-button-prev",
           },
         });
+
+        // Get last slide and set up random audio functionality
         var lastSlide = document.getElementById("lastSlide");
         var audioElement = document.getElementById("randomAudio");
         var audioSources = [
@@ -140,6 +148,7 @@ <h1 class="header__title">Achievements</h1>
           // Add more audio sources as needed
         ];
 
+        // Event listener for clicking on the last slide
         lastSlide.addEventListener("click", function () {
           // Get a random audio source
           var randomIndex = Math.floor(Math.random() * audioSources.length);
@@ -158,7 +167,6 @@ <h1 class="header__title">Achievements</h1>
         Inspired by:
         <a href="https://github.com/RomanKosovets" target="_blank" class="footer__link">Roma</a>
       </section>
-
     </footer>
   </body>
 </html>