add comments, increased readability

moroii69 · Feb 23, 2024 · d40af3e · d40af3e
1 parent d7c0bd1
commit d40af3e
Show file tree

Hide file tree

Showing 2 changed files with 49 additions and 38 deletions.
diff --git a/index.html b/index.html
@@ -63,41 +63,52 @@ <h1 class="data-hub-title-index">Data<span>Hub.</span></h1>
         <div class="row">
             <!-- TWO CARD BLOCK -->
             <div class="block-1-2 block-m-1-2 block-tab-full">
-
-                <!-- FIRST SEMESTER CARD -->
+                <!-- first semester card -->
                 <div class="col-block entry">
                     <div class="entry__thumb">
+                        <!-- link to first semester page -->
                         <a href="index-firstsem.html" title="SEM - 1">
-                            <img src="images/demo/sem1.png" srcset="images/demo/sem1.png 1x, images/demo/[email protected] 2x" alt="">
+                            <!-- image for first semester -->
+                            <img src="images/demo/sem1.png" srcset="images/demo/sem1.png 1x, images/demo/[email protected] 2x" alt="first semester">
                         </a>
                     </div>
                     <div class="entry__title">
-                        <a href="index-firstsem.html">SEMESTER - 01</a>
+                        <!-- link title for first semester -->
+                        <a href="index-firstsem.html">semester - 01</a>
                     </div>
                 </div>
-                
-                <!-- SECOND SEMESTER CARD -->
+
+                <!-- second semester card -->
                 <div class="col-block entry">
                     <div class="entry__thumb">
+                        <!-- link to second semester page -->
                         <a href="index-secondsem.html" title="SEM - 2">
-                            <img src="images/demo/sem2.png" srcset="images/demo/sem2.png 1x, images/demo/[email protected] 2x" alt="">
+                            <!-- image for second semester -->
+                            <img src="images/demo/sem2.png" srcset="images/demo/sem2.png 1x, images/demo/[email protected] 2x" alt="second semester">
                         </a>
                     </div>
                     <div class="entry__title">
-                        <a href="index-secondsem.html">SEMESTER - 02</a>
-
+                        <!-- link title for second semester -->
+                        <a href="index-secondsem.html">semester - 02</a>
                     </div>
                 </div>
             </div>
         </div>
         <header>
         </header>
-        <div class="wa-community-desc" style="padding: 10px; margin: 10px; display: inline-block;">
-            <p>Join the Whatsapp Community to stay updated on the latest updates!</p>
-            <a href="https://chat.whatsapp.com/E83ti5QRmmFDI5153G5lM1" class="btn btn--whatsapp" style="cursor: pointer; color: green; text-decoration: none;">
-                <span style="transition: text-shadow 0.2s ease-in-out;">Join Community</span>
-            </a>
-        </div>                     
+            <!-- container for WhatsApp community description -->
+            <div class="wa-community-desc" style="padding: 10px; margin: 10px; display: inline-block;">
+
+                <!-- description of the WhatsApp community -->
+                <p>Join the Whatsapp Community to stay updated on the latest updates!</p>
+
+                <!-- button to join the WhatsApp community -->
+                <a href="https://chat.whatsapp.com/E83ti5QRmmFDI5153G5lM1" class="btn btn--whatsapp" style="cursor: pointer; color: green; text-decoration: none;">
+
+                    <!-- text inside the button -->
+                    <span style="transition: text-shadow 0.2s ease-in-out;">Join Community</span>
+                </a>
+            </div>
         <br>
         <div class="home-copyright-index" style="opacity: 0.6; margin: 10px; padding: 5px; display: inline-block;">
             <p>&copy; DataHub LIET 2024</p>

diff --git a/js/main.js b/js/main.js
@@ -84,31 +84,31 @@
         $('input, textarea, select').placeholder();
     };
 
-
-   /* final countdown
-    * ------------------------------------------------------ */
-    var ssFinalCountdown = function() {
-
-        var finalDate =  new Date("March 30, 2024 12:37:25").getTime();
-
-        $('.home-content__clock').countdown(finalDate)
+// function for initializing the final countdown
+var initializeFinalCountdown = function() {
+    // target final date for the countdown
+    var finalDate = new Date("March 30, 2024 12:37:25").getTime();
+
+    // initialize countdown timer on elements with class 'home-content__clock'
+    $('.home-content__clock').countdown(finalDate)
+        // event listeners for countdown updates and finish
         .on('update.countdown finish.countdown', function(event) {
-
-            var str = '<div class=\"top\"><div class=\"time days\">' +
-                      '%D <span>day%!D</span>' + 
-                      '</div></div>' +
-                      '<div class=\"time hours\">' +
-                      '%H <span>H</span></div>' +
-                      '<div class=\"time minutes\">' +
-                      '%M <span>M</span></div>' +
-                      '<div class=\"time seconds\">' +
-                      '%S <span>S</span></div>';
-
-            $(this)
-            .html(event.strftime(str));
-
+            // HTML template for displaying countdown elements
+            var template = '<div class=\"top\"><div class=\"time days\">' +
+                '%D <span>day%!D</span>' +
+                '</div></div>' +
+                '<div class=\"time hours\">' +
+                '%H <span>H</span></div>' +
+                '<div class=\"time minutes\">' +
+                '%M <span>M</span></div>' +
+                '<div class=\"time seconds\">' +
+                '%S <span>S</span></div>';
+
+            // update the countdown display with formatted time
+            $(this).html(event.strftime(template));
         });
-    };
+};
+