Added tabs

main.js

@@ -28,7 +28,64 @@ function pickRandom(array) {
     return array[Maths.floor(Maths.random() * array.length)];
 }
 
+function switchTab(tabID, playAnimation=true) {
+    // Get tab ID from button
+    if (typeof(tabID) == 'object') {
+        tabID = tabID.id.split('button-')[1];
+    }
+
+    let tabs = document.getElementsByTagName('main')[0].children;
+    let tab = document.getElementById(`tab-${tabID}`);
+    let buttons = document.getElementsByTagName('header')[0].getElementsByTagName('button');
+    let button = document.getElementById(`button-${tabID}`)
+
+    // Error checking
+    if (tab == undefined) {
+        console.error(`Error switching tab: Tab ID "${tabID}" not found.`);
+        return;
+    }
+
+    // Hide all tabs
+    for (let i = 0; i < tabs.length; i++) {
+        if (tabs[i] == tab) { continue; }
+        tabs[i].classList.add('hiddenTab');
+        if (playAnimation) {
+            setTimeout(() => { tabs[i].style.display = 'none'; }, 500);
+        } else {
+            tabs[i].style.display = 'none';
+        }
+
+        if (button != null) {
+            button.classList.remove('buttonHighlight');
+        }
+    }
+
+    // Un-highlight all buttons
+    for (let i = 0; i < buttons.length; i++) {
+        buttons[i].classList.remove('buttonHighlight');
+    }
+
+    // Show selected tab
+    if (playAnimation) {
+        setTimeout(() => { tab.style.display = 'unset'; }, 500);
+    } else {
+        tab.style.display = 'unset';
+    }
+    // Required for animation to play
+    let intervalID = setInterval(() => {
+        if (tab.checkVisibility()) {
+            tab.classList.remove('hiddenTab');
+            clearInterval(intervalID);
+        }
+    }, 10);
+
+    // Highlight button
+    button.classList.add('buttonHighlight');
+}
+
 window.addEventListener('load', (e) => {
+    switchTab('home', false);
+
     // ----- Hellos section -----
     const helloEl = document.getElementById('helloText');
     helloEl.innerText = pickRandom(hellos);