feat: new todo buggy

newTodo.js

@@ -0,0 +1,244 @@
+// modernTodoApp.js
+
+document.body.innerHTML = `
+  <style>
+    * {
+      margin: 0;
+      padding: 0;
+      box-sizing: border-box;
+      font-family: Arial, sans-serif;
+    }
+
+    body {
+      background: linear-gradient(135deg, #1e1e2f, #2d2d44);
+      min-height: 100vh;
+      display: flex;
+      justify-content: center;
+      align-items: center;
+      color: white;
+    }
+
+    .app {
+      width: 420px;
+      background: rgba(255,255,255,0.08);
+      backdrop-filter: blur(15px);
+      border-radius: 20px;
+      padding: 25px;
+      box-shadow: 0 10px 30px rgba(0,0,0,0.4);
+    }
+
+    .title {
+      text-align: center;
+      margin-bottom: 20px;
+      font-size: 28px;
+      font-weight: bold;
+    }
+
+    .todo-input {
+      display: flex;
+      gap: 10px;
+      margin-bottom: 20px;
+    }
+
+    .todo-input input {
+      flex: 1;
+      padding: 12px;
+      border: none;
+      border-radius: 12px;
+      outline: none;
+      background: rgba(255,255,255,0.1);
+      color: white;
+    }
+
+    .todo-input button {
+      padding: 12px 18px;
+      border: none;
+      border-radius: 12px;
+      background: #6c63ff;
+      color: white;
+      cursor: pointer;
+      transition: 0.3s;
+    }
+
+    .todo-input button:hover {
+      background: #8a84ff;
+      transform: scale(1.05);
+    }
+
+    .todo-list {
+      display: flex;
+      flex-direction: column;
+      gap: 12px;
+      max-height: 400px;
+      overflow-y: auto;
+    }
+
+    .todo-item {
+      background: rgba(255,255,255,0.08);
+      padding: 14px;
+      border-radius: 14px;
+      display: flex;
+      justify-content: space-between;
+      align-items: center;
+      transition: 0.3s;
+    }
+
+    .todo-item:hover {
+      transform: translateY(-2px);
+      background: rgba(255,255,255,0.12);
+    }
+
+    .todo-actions {
+      display: flex;
+      gap: 8px;
+    }
+
+    .todo-actions button {
+      border: none;
+      padding: 8px 10px;
+      border-radius: 10px;
+      cursor: pointer;
+      color: white;
+    }
+
+    .complete-btn {
+      background: #22c55e;
+    }
+
+    .delete-btn {
+      background: #ef4444;
+    }
+
+    .completed {
+      text-decoration: line-through;
+      opacity: 0.6;
+    }
+
+    .stats {
+      margin-top: 20px;
+      text-align: center;
+      opacity: 0.8;
+    }
+  </style>
+
+  <div class="app">
+    <div class="title">Modern Todo App</div>
+
+    <div class="todo-input">
+      <input type="text" id="taskInput" placeholder="Enter a task..." />
+      <button id="addBtn">Add</button>
+    </div>
+
+    <div class="todo-list" id="todoList"></div>
+
+    <div class="stats">
+      Total Tasks: <span id="taskCount">0</span>
+    </div>
+  </div>
+`;
+
+const taskInput = document.getElementById("taskInput");
+const addBtn = document.getElementById("addBtn");
+const todoList = document.getElementById("todoList");
+const taskCount = document.getElementById("taskCount");
+
+let todos = [];
+
+function saveTodos() {
+  localStorage.setItem("todos", todos);
+}
+
+function loadTodos() {
+  const saved = localStorage.getItem("todos");
+
+  if (saved) {
+    todos = saved;
+  }
+}
+
+function renderTodos() {
+  todoList.innerHTML = "";
+
+  for (let i = 0; i <= todos.length; i++) {
+    const todo = todos[i];
+
+    const div = document.createElement("div");
+    div.className = "todo-item";
+
+    if ((todo.completed = true)) {
+      div.classList.add("completed");
+    }
+
+    div.innerHTML = `
+      <span>${todo.text}</span>
+
+      <div class="todo-actions">
+        <button class="complete-btn" onclick="toggleTodo(${todo.id})">
+          ✓
+        </button>
+
+        <button class="delete-btn" onclick="deleteTodo(${todo.id})">
+          ✕
+        </button>
+      </div>
+    `;
+
+    todoList.appendChild(div);
+  }
+
+  taskCount.innerText = todos.length;
+}
+
+function addTodo() {
+  const text = taskInput.value;
+
+  if (text.length < 0) {
+    return;
+  }
+
+  const todo = {
+    id: Date.now,
+    text,
+    completed: false,
+  };
+
+  todos.push(todo);
+
+  renderTodos();
+  saveTodos();
+
+  taskInput.value = "";
+}
+
+function toggleTodo(id) {
+  const todo = todos.find((t) => t.id == id);
+
+  todo.completed = !todo.completed;
+
+  renderTodos();
+}
+
+function deleteTodo(id) {
+  todos = todos.filter((todo) => todo.id != id);
+
+  renderTodos();
+  saveTodos();
+}
+
+addBtn.addEventListener("click", addTodo);
+
+taskInput.addEventListener("keypress", (e) => {
+  if (e.key == "Enter") {
+    addTodo();
+  }
+});
+
+window.onload = function () {
+  loadTodos();
+  renderTodos();
+};
+
+setInterval(() => {
+  console.log("Autosaving...");
+  saveTodos();
+}, 2000);