Refactor: Remove existing Pomodoro timer implementation and replace with a new structure

- Deleted main.js, pomodoro.html, and pomodoro.css files from the src directory.
- Added new main.js, pomodoro.html, and pomodoro.css files to the Live Project directory.
- Updated timer logic and UI elements in the new implementation.
- Enhanced task management features within the timer application.

Author: geraldsberongoy

.github/workflows/deploy.yml

@@ -27,7 +27,7 @@ jobs:
       - name: Upload artifacts
         uses: actions/upload-pages-artifact@v3
         with:
-          path: "src"
+          path: "Live Project"
 
       - name: Deploy to Github Pages
         id: deployment

src/js/main.js Live Project/js/main.jssrc/js/main.js renamed to Live Project/js/main.js

@@ -17,7 +17,7 @@ let timeLeft = FOCUS_TIME;
 let isRunning = false;
 let currentMode = "focus"; // 'focus', 'short-break', 'long-break'
 let timerInterval = null;
-let tasks = []; // List of tasks
+
 
 // ==========================================
 // 2. DOM ELEMENTS (Selecting by ID)
@@ -37,11 +37,7 @@ const focusBtn = document.getElementById("focus-btn");
 const shortBreakBtn = document.getElementById("short-break-btn");
 const longBreakBtn = document.getElementById("long-break-btn");
 
-// Task Elements
-const taskList = document.getElementById("task-list");
-const taskInput = document.getElementById("new-task-title");
-const addTaskBtn = document.getElementById("add-task-btn");
-const taskCountNum = document.getElementById("task-count-num");
+
 
 // ==========================================
 // 3. TIMER FUNCTIONS
@@ -154,98 +150,7 @@ function setMode(mode) {
   updateTimerDisplay();
 }
 
-// ==========================================
-// 4. TASK FUNCTIONS
-// ==========================================
-
-function renderTasks() {
-  // Clear the list
-  taskList.innerHTML = "";
 
-  // Update count
-  const completedCount = tasks.filter((t) => t.isDone).length;
-  taskCountNum.textContent = completedCount + " / " + tasks.length;
-
-  if (tasks.length === 0) {
-    taskList.innerHTML = '<li class="empty-state">No active tasks</li>';
-    return;
-  }
-
-  // Loop through tasks and create HTML
-  for (let i = 0; i < tasks.length; i++) {
-    const task = tasks[i];
-
-    const li = document.createElement("li");
-    li.className = "task-item";
-    if (task.isDone) {
-      li.classList.add("completed");
-    }
-
-    li.innerHTML = `
-      <div class="task-content">
-        <button class="btn-check">
-          <span class="material-symbols-rounded">${
-            task.isDone ? "check_circle" : "radio_button_unchecked"
-          }</span>
-        </button>
-        <div class="task-title">${task.title}</div>
-      </div>
-      <div class="task-actions">
-        <button class="btn-edit">
-          <span class="material-symbols-rounded">edit</span>
-        </button>
-        <button class="btn-delete">
-          <span class="material-symbols-rounded">delete</span>
-        </button>
-      </div>
-    `;
-
-    // Add Event Listeners to the buttons inside this task
-    const checkBtn = li.querySelector(".btn-check");
-    checkBtn.addEventListener("click", () => {
-      task.isDone = !task.isDone;
-      renderTasks();
-      console.log("Task checked");
-    });
-
-    const editBtn = li.querySelector(".btn-edit");
-    editBtn.addEventListener("click", () => {
-      const newTitle = prompt("Edit task title:", task.title);
-      if (newTitle) {
-        task.title = newTitle;
-        renderTasks();
-        console.log("Task edited");
-      }
-    });
-
-    const deleteBtn = li.querySelector(".btn-delete");
-    deleteBtn.addEventListener("click", () => {
-      tasks.splice(i, 1); // Remove task at index i
-      renderTasks();
-      console.log("Task deleted");
-    });
-
-    taskList.appendChild(li);
-  }
-}
-
-function addTask() {
-  const title = taskInput.value;
-  if (title === "") {
-    alert("Please enter a task title");
-    return;
-  }
-
-  const newTask = {
-    title: title,
-    isDone: false,
-  };
-
-  tasks.push(newTask);
-  taskInput.value = "";
-  console.log("Task added");
-  renderTasks();
-}
 
 // ==========================================
 // 5. EVENT LISTENERS
@@ -269,14 +174,8 @@ longBreakBtn.addEventListener("click", () => {
   console.log("Long break mode activated");
 });
 
-addTaskBtn.addEventListener("click", addTask);
 
-taskInput.addEventListener("keypress", (event) => {
-  if (event.key === "Enter") {
-    addTask();
-  }
-});
 
 // Initialize
 updateTimerDisplay();
-renderTasks();
+

src/pomodoro.html Live Project/pomodoro.htmlsrc/pomodoro.html renamed to Live Project/pomodoro.html

@@ -103,34 +103,7 @@
           </div>
         </div>
 
-        <div class="tasks-container">
-          <div class="tasks-header">
-            <h3>Session Tasks</h3>
-            <span class="task-count"
-              ><span id="task-count-num">0</span></span
-            >
-          </div>
 
-          <ul class="task-list" id="task-list">
-            <li class="empty-state">No active tasks</li>
-          </ul>
-
-          <div class="task-input-group">
-            <input
-              type="text"
-              id="new-task-title"
-              placeholder="Add a new task..."
-              aria-label="Task Title"
-            />
-            <button
-              class="btn-icon-small"
-              id="add-task-btn"
-              aria-label="Add Task"
-            >
-              <span class="material-symbols-rounded">add</span>
-            </button>
-          </div>
-        </div>
       </section>
     </main>
 

src/styles/pomodoro.css Live Project/styles/pomodoro.csssrc/styles/pomodoro.css renamed to Live Project/styles/pomodoro.css

@@ -267,165 +267,7 @@ body {
   right: 0;
 }
 
-/* === Task Section === */
-.tasks-container {
-  width: 100%;
-  margin-top: 1rem;
-  padding-top: 1.5rem;
-  border-top: 1px solid rgba(255, 255, 255, 0.1);
-}
-
-.tasks-header {
-  display: flex;
-  justify-content: space-between;
-  align-items: center;
-  margin-bottom: 1rem;
-  color: var(--text-med);
-  font-size: 0.85rem;
-  text-transform: uppercase;
-  letter-spacing: 1px;
-  font-weight: 700;
-}
-
-/* List Styles */
-.task-list {
-  list-style: none;
-  margin-bottom: 1rem;
-  max-height: 200px;
-  overflow-y: auto;
-  scrollbar-width: thin;
-  scrollbar-color: var(--theme-primary) transparent;
-}
 
-.task-item {
-  background: rgba(255, 255, 255, 0.05);
-  border-radius: 12px;
-  padding: 12px;
-  margin-bottom: 8px;
-  display: flex;
-  justify-content: space-between;
-  align-items: center;
-  gap: 12px;
-  transition: all 0.2s ease;
-  border-left: 3px solid transparent;
-}
-
-.task-item:hover {
-  background: rgba(255, 255, 255, 0.1);
-  border-left-color: var(--theme-primary);
-}
-
-.task-item.completed .task-title {
-  text-decoration: line-through;
-  color: var(--text-med);
-}
-
-.task-content {
-  flex: 1;
-  display: flex;
-  align-items: center;
-  gap: 12px;
-  overflow: hidden;
-}
-
-.task-title {
-  font-size: 0.95rem;
-  color: var(--text-high);
-  font-weight: 500;
-  white-space: nowrap;
-  overflow: hidden;
-  text-overflow: ellipsis;
-}
-
-.empty-state {
-  text-align: center;
-  color: var(--text-med);
-  font-style: italic;
-  font-size: 0.9rem;
-  padding: 1rem;
-}
-
-/* Input Area */
-.task-input-group {
-  display: flex;
-  gap: 8px;
-  background: rgba(0, 0, 0, 0.2);
-  padding: 6px;
-  border-radius: 100px;
-  border: 1px solid transparent;
-  transition: border-color 0.3s ease;
-}
-
-.task-input-group:focus-within {
-  border-color: var(--theme-primary);
-}
-
-.task-input-group input {
-  flex: 1;
-  background: transparent;
-  border: none;
-  color: var(--text-high);
-  padding: 8px 16px;
-  outline: none;
-  font-family: var(--font-display);
-}
-
-.btn-icon-small {
-  background: var(--theme-primary);
-  border: none;
-  border-radius: 50%;
-  width: 36px;
-  height: 36px;
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  color: #000;
-  cursor: pointer;
-}
-.btn-icon-small:hover {
-  filter: brightness(1.1);
-}
-
-/* Task Actions & Buttons */
-.task-actions {
-  display: flex;
-  align-items: center;
-  gap: 4px;
-  opacity: 0;
-  transition: opacity 0.2s;
-}
-
-.task-item:hover .task-actions {
-  opacity: 1;
-}
-
-.btn-check,
-.btn-edit,
-.btn-delete {
-  background: transparent;
-  border: none;
-  color: var(--text-med);
-  cursor: pointer;
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  padding: 4px;
-  border-radius: 50%;
-  transition: all 0.2s;
-}
-
-.btn-check:hover {
-  color: var(--theme-primary);
-  background: rgba(255, 255, 255, 0.1);
-}
-.btn-edit:hover {
-  color: var(--text-high);
-  background: rgba(255, 255, 255, 0.1);
-}
-.btn-delete:hover {
-  color: var(--google-red);
-  background: rgba(255, 255, 255, 0.1);
-}
 
 /* === Mobile Adjustments === */
 @media (max-width: 480px) {