script.js

let tasks = [];

// Load from localStorage
window.addEventListener("DOMContentLoaded", () => {
  const stored = localStorage.getItem("tasks");
  if (stored) {
    tasks = JSON.parse(stored);
    renderTasks();
  } else {
    fetch("https://jsonplaceholder.typicode.com/todos?_limit=5")
      .then(res => res.json())
      .then(data => {
       tasks = data.map(t => {
  return {
    id: t.id,
    title: t.title,
    completed: t.completed
  };
});
        updateStorage();
        renderTasks();
      });
  }
});

// Elements
const taskInput = document.getElementById("taskInput");
const addTaskBtn = document.getElementById("addTaskBtn");
const taskList = document.getElementById("taskList");
const errorText = document.getElementById("error");

// Add Task
addTaskBtn.addEventListener("click", () => {
  const title = taskInput.value.trim();
  if (title === "") {
    errorText.textContent = "Task title cannot be empty.";
    taskInput.classList.add("error");
    return;
  }

  errorText.textContent = "";
  taskInput.classList.remove("error");

  const newTask = {
    id: Date.now(),
    title,
    completed: false,
  };

  tasks.push(newTask);
  updateStorage();
  renderTasks();
  taskInput.value = "";
});

// Render tasks
function renderTasks(filter = "all") {
  taskList.innerHTML = "";
  let filteredTasks = tasks;

  if (filter === "completed") filteredTasks = tasks.filter(t => t.completed);
  else if (filter === "pending") filteredTasks = tasks.filter(t => !t.completed);

  filteredTasks.forEach(task => {
    const card = document.createElement("div");
    card.className = `task-card ${task.completed ? "completed" : ""}`;
    card.innerHTML = `
      <h3>${task.title}</h3>
      <p>Status: <strong>${task.completed ? "Completed" : "Pending"}</strong></p>
      <div class="task-actions">
        <button class="mark-btn">${task.completed ? "Undo" : "Mark Complete"}</button>
        <button class="delete-btn">Delete</button>
      </div>
    `;

    // Mark Complete button
    card.querySelector(".mark-btn").addEventListener("click", () => {
      task.completed = !task.completed;
      updateStorage();
      renderTasks(filter);
    });

    // Delete button
    card.querySelector(".delete-btn").addEventListener("click", () => {
      tasks = tasks.filter(t => t.id !== task.id);
      updateStorage();
      renderTasks(filter);
    });

    taskList.appendChild(card);
  });
}

// Filter buttons
document.querySelectorAll(".filter-btn").forEach(btn => {
  btn.addEventListener("click", () => {
    const filter = btn.dataset.filter;
    renderTasks(filter);
  });
});

// Update localStorage
function updateStorage() {
  localStorage.setItem("tasks", JSON.stringify(tasks));
}