app.js

const sections = document.querySelectorAll('.section');
const sectBtns = document.querySelectorAll('.controls');
const sectBtn = document.querySelectorAll('.control');
const allSections = document.querySelector('.main-content');


function SwitchPages() {
    // Button click active class
    for (let i = 0; i < sectBtn.length; i++) {
        sectBtn[i].addEventListener('click', function() {
            let currentBtn = document.querySelectorAll('.active-btn')
            currentBtn[0].className = currentBtn[0].className.replace('active-btn', '');
            this.className += ' active-btn';
        })
    }
    
    // Sections active
    allSections.addEventListener('click', (evt) => {
        const id = evt.target.dataset.id;
        if (id) {
            // Remove selected from the other btns
            sectBtns.forEach((btn) => {
                btn.classList.remove('active')
            })
            evt.target.classList.add('active')

            // Hide other sections
            sections.forEach((section) => {
                section.classList.remove('active')
            })

        const element = document.getElementById(id);
        element.classList.add('active');
        }
    })

    //Toggle theme (dark vs light)
    const themeBtn = document.querySelector('.theme-btn');
    themeBtn.addEventListener('click', () => {
        let element = document.body;
        element.classList.toggle('light-mode');
    })
}

SwitchPages();