todo.html

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Numbered To-Do List</title>
  <style>
    body {
      margin: 0;
      font-family: 'Segoe UI', sans-serif;
      background: linear-gradient(to bottom right, #000, #222);
      color: white;
      display: flex;
      flex-direction: column;
      align-items: center;
      padding: 30px;
      height: 100vh;
    }

    .container {
      background: rgba(255, 255, 255, 0.05);
      backdrop-filter: blur(10px);
      border: 1px solid rgba(255, 255, 255, 0.1);
      border-radius: 20px;
      padding: 30px;
      width: 95%;
      max-width: 500px;
      box-shadow: 0 0 20px #0f0;
    }

    h1 {
      text-align: center;
      margin-bottom: 20px;
      color: #0f0;
    }

    input[type="text"], input[type="number"] {
      width: 100%;
      padding: 10px;
      margin: 10px 0;
      border: none;
      border-radius: 8px;
      font-size: 16px;
      outline: none;
    }

    button {
      padding: 10px 20px;
      margin: 8px 0;
      font-size: 16px;
      border: none;
      border-radius: 8px;
      cursor: pointer;
      transition: 0.3s;
    }

    button:hover {
      transform: scale(1.03);
    }

    .btn-add { background: #4caf50; color: white; width: 100%; }
    .btn-edit { background: #2196f3; color: white; width: 100%; }
    .btn-toggle { background: #9c27b0; color: white; width: 100%; }
    .btn-delete { background: #f44336; color: white; width: 100%; }

    ul {
      list-style-type: none;
      padding: 0;
      max-height: 250px;
      overflow-y: auto;
      margin: 15px 0;
    }

    li {
      padding: 8px 10px;
      border-bottom: 1px solid #444;
      font-size: 17px;
    }

    .input-row {
      display: flex;
      gap: 10px;
    }
  </style>
</head>
<body>

  <div class="container">
    <h1>📝 Numbered To-Do List</h1>

    <label for="taskInput">New Task:</label>
    <input type="text" id="taskInput" placeholder="Enter a task...">
    <button class="btn-add" onclick="addTask()">Add Task</button>

    <h3>Your Tasks:</h3>
    <ul id="taskList"></ul>

    <label for="taskNumber">Enter Task Number:</label>
    <input type="number" id="taskNumber" placeholder="e.g. 1">

    <button class="btn-edit" onclick="editTask()">✏️ Edit Task</button>
    <button class="btn-toggle" onclick="toggleDone()">✅ Mark Done/Undone</button>
    <button class="btn-delete" onclick="deleteTask()">🗑️ Delete Task</button>
  </div>

  <script>
    let tasks = [];

    function updateList() {
      const list = document.getElementById('taskList');
      list.innerHTML = '';
      tasks.forEach((task, i) => {
        const status = task.done ? "✔️" : "❌";
        const li = document.createElement('li');
        li.textContent = `${i + 1}. ${status} ${task.title}`;
        list.appendChild(li);
      });
    }

    function addTask() {
      const input = document.getElementById('taskInput');
      const title = input.value.trim();
      if (!title) {
        alert("Please enter a task.");
        return;
      }
      tasks.push({ title, done: false });
      input.value = '';
      updateList();
    }

    function getTaskIndex() {
      const indexInput = document.getElementById('taskNumber').value;
      const index = parseInt(indexInput) - 1;
      if (isNaN(index) || index < 0 || index >= tasks.length) {
        alert("Please enter a valid task number.");
        return null;
      }
      return index;
    }

    function editTask() {
      const index = getTaskIndex();
      if (index !== null) {
        const oldTitle = tasks[index].title;
        const newTitle = prompt("Edit task:", oldTitle);
        if (newTitle !== null && newTitle.trim() !== "") {
          tasks[index].title = newTitle.trim();
          updateList();
        }
      }
    }

    function toggleDone() {
      const index = getTaskIndex();
      if (index !== null) {
        tasks[index].done = !tasks[index].done;
        updateList();
      }
    }

    function deleteTask() {
      const index = getTaskIndex();
      if (index !== null) {
        tasks.splice(index, 1);
        document.getElementById('taskNumber').value = '';
        updateList();
      }
    }
  </script>
</body>
</html>