script.js

// ===== PAGE NAVIGATION =====
const pages = document.querySelectorAll(".page");
const cards = document.querySelectorAll(".card");
const backButtons = document.querySelectorAll(".back");

function showPage(id) {
    pages.forEach(page => page.classList.remove("active"));
    document.getElementById(id).classList.add("active");
}

// Card click
cards.forEach(card => {
    card.addEventListener("click", () => {
        const task = card.getAttribute("data-task");
        showPage(task);
    });
});

// Back button
backButtons.forEach(btn => {
    btn.addEventListener("click", () => {
        showPage("home");
    });
});

// ===== TASK 1: COUNTER =====
let count = 0;
const countDisplay = document.getElementById("count");

function updateCounter() {
    countDisplay.innerText = count;
    if (count < 0) {
        countDisplay.style.color = "red";
    } else {
        countDisplay.style.color = "green";
    }
}

document.getElementById("inc").addEventListener("click", () => {
    count++;
    updateCounter();
});

document.getElementById("dec").addEventListener("click", () => {
    count--;
    updateCounter();
});

document.getElementById("reset").addEventListener("click", () => {
    count = 0;
    updateCounter();
});

// ===== TASK 2: TEXT EDITOR =====
document.getElementById("updateText").addEventListener("click", () => {
    const value = document.getElementById("textInput").value;
    const para = document.getElementById("displayText");

    if (value === "") {
        alert("Please enter text");
    } else {
        para.innerText = value;
    }
});

// ===== TASK 3: THEME TOGGLE =====
let darkMode = false;
const themeBtn = document.getElementById("themeBtn");

themeBtn.addEventListener("click", () => {
    if (!darkMode) {
        document.body.style.backgroundColor = "#111";
        document.body.style.color = "white";
        themeBtn.innerText = "Switch to Light Mode";
        darkMode = true;
    } else {
        document.body.style.backgroundColor = "#e6f7ff";
        document.body.style.color = "black";
        themeBtn.innerText = "Switch to Dark Mode";
        darkMode = false;
    }
});