"Refactor index.html, script.js, and styles.css: remove unnecessary l…

…ine, reformat code, and adjust CSS styles"
cortega26 · Oct 15, 2024 · 6559cef · 6559cef
1 parent d579b9d
commit 6559cef
Show file tree

Hide file tree

Showing 3 changed files with 47 additions and 56 deletions.
diff --git a/index.html b/index.html
@@ -32,7 +32,6 @@
   gtag('config', 'G-6VHH01PXKS');
 </script>
 
-
 </head>
 <body>
     <nav class="navbar navbar-expand-lg navbar-dark bg-primary">

diff --git a/script.js b/script.js
@@ -9,55 +9,55 @@ const CNEMonitor = (() => {
      * @param {Date} targetDate - The target date to count from.
      */
     function updateCounter(elementId, targetDate) {
-        console.log(`Updating counter: ${elementId}`);
-        const counter = document.getElementById(elementId);
-        if (!counter) {
-            console.error(`Counter element with id ${elementId} not found`);
-            return;
-        }
-
-        // Create spans for each time unit
-        const spans = ['days', 'hours', 'minutes', 'seconds'].map(unit => {
-            const span = document.createElement('span');
-            span.className = unit;
-            counter.appendChild(span);
-            return span;
-        });
-
-        function update() {
-            const now = new Date();
-            const differenceInMs = now - targetDate;
-
-            const days = Math.floor(differenceInMs / (1000 * 60 * 60 * 24));
-            const hours = Math.floor((differenceInMs % (1000 * 60 * 60 * 24)) / (1000 * 60 * 60));
-            const minutes = Math.floor((differenceInMs % (1000 * 60 * 60)) / (1000 * 60));
-            const seconds = Math.floor((differenceInMs % (1000 * 60)) / 1000);
-
-            const units = [
-                { value: days, singular: 'día', plural: 'días' },
-                { value: hours, singular: 'hora', plural: 'horas' },
-                { value: minutes, singular: 'minuto', plural: 'minutos' },
-                { value: seconds, singular: 'segundo', plural: 'segundos' }
-            ];
-
-            units.forEach(({ value, singular, plural }, index) => {
-                const span = spans[index];
-                const newText = `<span class="number">${value}</span> ${value === 1 ? singular : plural}`;
-                if (span.innerHTML !== newText) {
-                    span.innerHTML = newText;
-                }
-            });
-
-            // Add pulsing effect to seconds
-            spans[3].classList.add('pulse');
-            setTimeout(() => spans[3].classList.remove('pulse'), 500);
+    console.log(`Updating counter: ${elementId}`);
+    const counter = document.getElementById(elementId);
+    if (!counter) {
+        console.error(`Counter element with id ${elementId} not found`);
+        return;
+    }
 
-            requestAnimationFrame(update);
-        }
+    // Create spans for each time unit
+    const spans = ['days', 'hours', 'minutes', 'seconds'].map(unit => {
+        const span = document.createElement('span');
+        span.className = unit;
+        counter.appendChild(span);
+        return span;
+    });
+
+    function update() {
+        const now = new Date();
+        const differenceInMs = now - targetDate;
+
+        const days = Math.floor(differenceInMs / (1000 * 60 * 60 * 24));
+        const hours = Math.floor((differenceInMs % (1000 * 60 * 60 * 24)) / (1000 * 60 * 60));
+        const minutes = Math.floor((differenceInMs % (1000 * 60 * 60)) / (1000 * 60));
+        const seconds = Math.floor((differenceInMs % (1000 * 60)) / 1000);
 
-        update();
-        console.log(`Counter ${elementId} update started`);
+        const units = [
+            { value: days, singular: 'día', plural: 'días' },
+            { value: hours, singular: 'hora', plural: 'horas' },
+            { value: minutes, singular: 'minuto', plural: 'minutos' },
+            { value: seconds, singular: 'segundo', plural: 'segundos' }
+        ];
+
+        units.forEach(({ value, singular, plural }, index) => {
+            const span = spans[index];
+            const newText = `<span class="number">${value}</span> ${value === 1 ? singular : plural}`;
+            if (span.innerHTML !== newText) {
+                span.innerHTML = newText;
+            }
+        });
+
+        // Add pulsing effect to seconds
+        spans[3].classList.add('pulse');
+        setTimeout(() => spans[3].classList.remove('pulse'), 500);
+
+        requestAnimationFrame(update);
     }
+
+    update();
+    console.log(`Counter ${elementId} update started`);
+}
 
     // Target dates (Venezuela time, GMT-4)
     const targetDate1 = new Date('2024-07-30T22:00:00Z');

diff --git a/styles.css b/styles.css
@@ -107,15 +107,7 @@ main {
 
 .counter span {
     display: inline-block;
-    min-width: 80px; /* Adjust this value as needed */
-    text-align: center;
-    /* margin: 0 0.5rem; */
-}
-
-.counter .number {
-    font-family: 'Roboto Mono', monospace; /* Use a monospace font for numbers */
-    font-feature-settings: "tnum";
-    font-variant-numeric: tabular-nums;
+    margin: 0 0.5rem;
 }
 
 .legal-reference {
-Original file line number
+Diff line change
@@ Expand Up / @@ -32,7 +32,6 @@ @@
       gtag('config', 'G-6VHH01PXKS');
     </script>
     </head>
     <body>
         <nav class="navbar navbar-expand-lg navbar-dark bg-primary">
@@ Expand Down @@