moved counter animation code to custom.js (#536)

sugarlabs · Nov 7, 2024 · 87a8eec · 87a8eec
1 parent 5836557
commit 87a8eec
Show file tree

Hide file tree

Showing 2 changed files with 51 additions and 51 deletions.
diff --git a/js/custom.js b/js/custom.js
@@ -12,4 +12,54 @@ function toggleAnswer(answerId, element) {
             indicator.innerHTML = '-';
         }
     }
-}
+}
+
+// Counter Animation of the home page 
+document.addEventListener('DOMContentLoaded', () => {
+    const counters = document.querySelectorAll('.count');
+
+    // Function to animate the counter
+    function animateCounter(counter) {
+        const target = +counter.getAttribute('data-target');
+        const speed = 200; 
+
+        const updateCount = () => {
+            const current = +counter.innerText;
+            const increment = target / speed;
+
+            if (current < target) {
+                counter.innerText = Math.ceil(current + increment);
+                setTimeout(updateCount, 10); // Repeat every 10ms
+            } else {
+
+                if (target === 170) {
+                    counter.innerText = `${target}`; 
+                } else {
+                    counter.innerText = `${target}+`;
+                }
+
+            }
+        };
+
+        updateCount();
+    }
+
+    // Use IntersectionObserver to detect when the element comes into view
+    const observerOptions = {
+        root: null, 
+        threshold: 0.3 
+    };
+
+    const observer = new IntersectionObserver((entries, observer) => {
+        entries.forEach(entry => {
+            if (entry.isIntersecting) {
+                animateCounter(entry.target); // Start animation
+                observer.unobserve(entry.target); // Stop observing after animation starts
+            }
+        });
+    }, observerOptions);
+
+    counters.forEach(counter => {
+        observer.observe(counter); // Observe each counter
+    });
+});
diff --git a/js/main.js b/js/main.js
@@ -122,53 +122,3 @@ $(document).ready(function(){
     	});
     };
 });
-
-// Counter Animation of the home page 
-document.addEventListener('DOMContentLoaded', () => {
-    const counters = document.querySelectorAll('.count');
-
-    // Function to animate the counter
-    function animateCounter(counter) {
-        const target = +counter.getAttribute('data-target');
-        const speed = 200; 
-
-        const updateCount = () => {
-            const current = +counter.innerText;
-            const increment = target / speed;
-
-            if (current < target) {
-                counter.innerText = Math.ceil(current + increment);
-                setTimeout(updateCount, 10); // Repeat every 10ms
-            } else {
-
-                if (target === 170) {
-                    counter.innerText = `${target}`; 
-                } else {
-                    counter.innerText = `${target}+`;
-                }
-
-            }
-        };
-
-        updateCount();
-    }
-
-    // Use IntersectionObserver to detect when the element comes into view
-    const observerOptions = {
-        root: null, 
-        threshold: 0.3 
-    };
-
-    const observer = new IntersectionObserver((entries, observer) => {
-        entries.forEach(entry => {
-            if (entry.isIntersecting) {
-                animateCounter(entry.target); // Start animation
-                observer.unobserve(entry.target); // Stop observing after animation starts
-            }
-        });
-    }, observerOptions);
-
-    counters.forEach(counter => {
-        observer.observe(counter); // Observe each counter
-    });
-});