Add animation, refactor

script.js

@@ -1,25 +1,27 @@
 function init() {
     const cards = document.getElementsByClassName('card-wrapper');
 
-    console.log(cards[0]); // Logs the first card-wrapper elementű
     for (let i = 0; i < cards.length; i++) {
-        cards[i].addEventListener('click', function() {
-            for (let j = 0; j < cards.length; j++) {
-                if (j === i) {
-                    cards[j].classList.remove('hidden');
-                    cards[j].classList.add('active');
-                    cards[j].getElementsByClassName('content-wrapper')[0].classList.add('visible');
-                    continue;
-                }
-                cards[j].getElementsByClassName('content-wrapper')[0].classList.remove('visible');
-                cards[j].classList.add('hidden');
-                cards[j].classList.remove('active');
-            }
-        });
+        const cardListener = cards[i].getElementsByClassName('card-listener')[0];
+        cardListener.addEventListener('click', () => openCard(cards, i));
     }
 
 }
 
+function openCard(cards, i) {
+    for (let j = 0; j < cards.length; j++) {
+        if (j === i) {
+            cards[j].classList.remove('hidden');
+            cards[j].classList.add('active');
+            cards[j].getElementsByClassName('content-wrapper')[0].classList.add('visible');
+            continue;
+        }
+        cards[j].getElementsByClassName('content-wrapper')[0].classList.remove('visible');
+        cards[j].classList.add('hidden');
+        cards[j].classList.remove('active');
+    }
+}
+
 function addInProgress() {
     if (window.location.href.indexOf('127.0.0.1') === -1) {
         const warning = document.createElement('div');
@@ -32,5 +34,43 @@ function addInProgress() {
     }
 }
 
+function nextPage() {
+    const nextButtons = document.getElementsByClassName('close');
+    const cards = document.getElementsByClassName('card-wrapper');
+
+    for (let i = 0; i < nextButtons.length; i++) {
+        nextButtons[i].addEventListener('click', function() {
+
+            cards[(i+1) % nextButtons.length].classList.remove('hidden');
+            cards[(i+1) % nextButtons.length].classList.add('active');
+            cards[(i+1) % nextButtons.length].getElementsByClassName('content-wrapper')[0].classList.add('visible');
+
+            cards[i].getElementsByClassName('content-wrapper')[0].classList.remove('visible');
+            cards[i].classList.add('hidden');
+            cards[i].classList.remove('active');
+        });
+    }
+}
+
+function idle() {
+    let idleTime = 61;
+    const cards = document.getElementsByClassName('card-wrapper');
+    let cardIndex = 0;
+    setInterval(function() {
+        idleTime+=2;
+        if (idleTime > 1) {
+            openCard(cards, cardIndex++ % cards.length);
+        }
+    }, 10000);
+
+    document.onclick = document.onm = function() {
+        console.log('User active, resetting idle timer.');
+        idleTime = 0;
+    };
+}
+
+
 addInProgress();
-init();
+init();
+nextPage();
+idle();