diff --git a/README.md b/README.md index 8412aee..632a94d 100644 --- a/README.md +++ b/README.md @@ -15,13 +15,20 @@ A high-performance, minimalist productivity tool designed to help you stay organ - **🚀 Dynamic Task Management**: - Effortlessly add new tasks. - Mark tasks as completed with a single click. - - Remove tasks you no longer need. + - Edit or remove tasks you no longer need. - **📊 Real-time Progress Tracking**: - Stay motivated with a live progress indicator that calculates your completion percentage instantly. - **⏱️ Precision Timer**: - Built-in stopwatch to track the time spent on your productivity sessions. - **📱 Clean & Responsive UI**: - A distraction-free interface that works across various devices. +- **🌙 Dark Mode Toggle**: + - Switch between light and dark themes with smooth transitions. +- **🧭 Navigation Tabs**: + - Dedicated pages for **Tasks**, **Progress**, and **Timer** for better organization. +- **⚖️ Sticky Footer**: + - Professional footer with copyright and GitHub profile link. + ## 🛠️ Tech Stack diff --git a/index.html b/index.html index 0f7fb66..c735f86 100644 --- a/index.html +++ b/index.html @@ -5,28 +5,42 @@ - -
+

📚 Productivity Tracker

+ +
- - - - - - +
+ +
+ + +
    +
    - -

    Progress: 0% (0/0 tasks completed)

    + +
    +

    Progress: 0% (0/0 tasks completed)

    +
    - -
    + +

    00:00:00

    -
    -
    + + + + - \ No newline at end of file + + diff --git a/script.js b/script.js index ca39a81..d277fbb 100644 --- a/script.js +++ b/script.js @@ -1,100 +1,106 @@ -let tasks = []; +let tasks = [] +let seconds = 0 +let timer = null + +// ➤ Navigation +function showPage(pageId) { + document.querySelectorAll(".page").forEach(p => p.classList.remove("active")) + document.getElementById(pageId).classList.add("active") +} // ➤ Add Task function addTask() { - let input = document.getElementById("taskInput"); - let taskText = input.value.trim(); - - if (taskText === "") return; - - tasks.push({ text: taskText, done: false }); - input.value = ""; - renderTasks(); + let input = document.getElementById("taskInput") + let taskText = input.value.trim() + if (taskText === "") return + tasks.push({ text: taskText, done: false }) + input.value = "" + renderTasks() } -// ➤ Render Tasks +// ➤ Render Tasks (with CRUD buttons) function renderTasks() { - let list = document.getElementById("taskList"); - list.innerHTML = ""; - + let list = document.getElementById("taskList") + list.innerHTML = "" tasks.forEach((task, index) => { - let li = document.createElement("li"); - + let li = document.createElement("li") li.innerHTML = ` ${task.text} + - `; - + ` if (task.done) { - li.style.textDecoration = "line-through"; - li.style.color = "gray"; + li.style.textDecoration = "line-through" + li.style.color = "gray" } - - list.appendChild(li); - }); - - updateProgress(); + list.appendChild(li) + }) + updateProgress() } -// ➤ Toggle Task +// ➤ Toggle Task Completion function toggleTask(index) { - tasks[index].done = !tasks[index].done; - renderTasks(); + tasks[index].done = !tasks[index].done + renderTasks() +} + +// ➤ Update Task Text +function updateTask(index) { + let newText = prompt("Edit your task:", tasks[index].text) + if (newText !== null && newText.trim() !== "") { + tasks[index].text = newText.trim() + renderTasks() + } } // ➤ Delete Task function deleteTask(index) { - tasks.splice(index, 1); - renderTasks(); + tasks.splice(index, 1) + renderTasks() } // ➤ Progress Calculation function updateProgress() { - let total = tasks.length; - + let total = tasks.length + let progressText = document.getElementById("progressText") if (total === 0) { - document.getElementById("progress").innerText = - "Progress: 0% (0/0 tasks completed)"; - return; + progressText.innerText = "Progress: 0% (0/0 tasks completed)" + return } - - let doneTasks = tasks.filter(task => task.done).length; - let percent = Math.round((doneTasks / total) * 100); - - document.getElementById("progress").innerText = - `Progress: ${percent}% (${doneTasks}/${total} tasks completed)`; + let doneTasks = tasks.filter(task => task.done).length + let percent = Math.round((doneTasks / total) * 100) + progressText.innerText = `Progress: ${percent}% (${doneTasks}/${total} tasks completed)` } - - -// ⏱️ Timer -let seconds = 0; -let timer = null; - +// ⏱️ Timer Functions function startTimer() { - if (timer !== null) return; // prevent multiple timers - + if (timer !== null) return timer = setInterval(() => { - seconds++; - updateTime(); - }, 1000); + seconds++ + updateTime() + }, 1000) } function stopTimer() { - clearInterval(timer); - timer = null; + clearInterval(timer) + timer = null } function updateTime() { - let hrs = Math.floor(seconds / 3600); - let mins = Math.floor((seconds % 3600) / 60); - let secs = seconds % 60; - + let hrs = Math.floor(seconds / 3600) + let mins = Math.floor((seconds % 3600) / 60) + let secs = seconds % 60 document.getElementById("time").innerText = - `${pad(hrs)}:${pad(mins)}:${pad(secs)}`; + `${pad(hrs)}:${pad(mins)}:${pad(secs)}` } function pad(num) { - return num < 10 ? "0" + num : num; -} \ No newline at end of file + return num < 10 ? "0" + num : num +} + +// 🌙 Dark Mode Toggle +function toggleDarkMode() { + document.body.classList.toggle("dark-mode") +} + diff --git a/style.css b/style.css index 79f3665..d108c3c 100644 --- a/style.css +++ b/style.css @@ -1,33 +1,114 @@ +* { + margin: 0; + padding: 0; + box-sizing: border-box; +} + body { - font-family: Arial; - background: #f4f4f4; + font-family: Arial, sans-serif; + background: var(--bg); + color: var(--text); + display: flex; + flex-direction: column; + min-height: 100vh; + transition: background 0.4s ease, color 0.4s ease; +} + +:root { + --bg: #f4f4f4; + --text: #000; + --primary: #4CAF50; + --secondary: #eee; +} + +.dark-mode { + --bg: #181818; + --text: #e0e0e0; + --primary: #00b894; + --secondary: #242424; +} + +header, footer { + background: var(--primary); + color: white; + padding: 12px; text-align: center; + transition: background 0.4s ease; } -.container { - width: 300px; - margin: auto; - margin-top: 50px; - background: white; +nav a, nav button { + margin: 0 10px; + color: white; + text-decoration: none; + font-weight: bold; + background: none; + border: none; + cursor: pointer; +} + +nav a:hover, nav button:hover { + text-decoration: underline; +} + +main { + flex: 1; padding: 20px; - border-radius: 10px; + text-align: center; +} + +footer { + margin-top: auto; +} + +footer a { + color: white; + text-decoration: none; + font-weight: bold; +} + +footer a:hover { + text-decoration: underline; +} + +.page { + display: none; +} + +.page.active { + display: block; } input { padding: 8px; width: 70%; + border: 1px solid #ccc; + border-radius: 5px; } button { - padding: 8px; + padding: 8px 12px; margin: 5px; cursor: pointer; + border: none; + border-radius: 5px; + background: var(--primary); + color: white; + transition: 0.3s; +} + +button:hover { + opacity: 0.85; } li { list-style: none; margin: 10px 0; - background: #eee; - padding: 5px; + background: var(--secondary); + padding: 8px; border-radius: 5px; -} \ No newline at end of file + display: flex; + justify-content: space-between; + align-items: center; + transition: background 0.4s ease; +} +