Загрузить файлы в «/»

2025-03-09 12:53:00 +00:00 · 2025-03-09 12:53:00 +00:00 · 33f3a277b2
commit 33f3a277b2
3 changed files with 177 additions and 0 deletions
--- a/app.js
+++ b/app.js
@ -0,0 +1,83 @@
+const input = document.querySelector("input");
+const button = document.querySelector("button");
+const todoList = document.querySelector(".todo-list");
+
+// let index = 0;
+
+function getLastIndex() {
+  let tasks = JSON.parse(localStorage.getItem("tasks")) || {};
+  return Object.keys(tasks).length > 0
+    ? Math.max(...Object.keys(tasks).map(Number))
+    : 0;
+}
+
+function addTask() {
+  button.addEventListener("click", function () {
+    let index = getLastIndex() + 1;
+    let newTask = { text: input.value, completed: false };
+
+    let tasks = JSON.parse(localStorage.getItem("tasks")) || {};
+    tasks[index] = newTask; // Добавляем новую задачу
+    localStorage.setItem("tasks", JSON.stringify(tasks)); // Сохраняем в localStorage
+
+    renderTasks(); // Перерисовываем список
+    input.value = ""; // Очищаем поле ввода
+  });
+}
+
+function renderTasks() {
+  todoList.innerHTML = ""; // Очищаем список перед рендером
+
+  let tasks = JSON.parse(localStorage.getItem("tasks")) || {};
+
+  Object.keys(tasks).forEach((key) => {
+    let task = tasks[key];
+    const taskHTML = `
+        <div class="todo-item" data-id="${key}">
+          <label>
+            <input class="task-checkbox" type="checkbox" ${
+              task.completed ? "checked" : ""
+            } />
+            <span>${task.text}</span>
+          </label>
+          <button class="delete-btn">&times;</button>
+        </div>
+    `;
+
+    todoList.insertAdjacentHTML("afterbegin", taskHTML);
+  });
+  addDeleteEvents();
+  addCheckboxEvents();
+}
+
+function addCheckboxEvents() {
+  document.querySelectorAll(".task-checkbox").forEach((checkbox) => {
+    checkbox.addEventListener("change", function () {
+      let taskElement = this.closest(".todo-item");
+      let taskId = taskElement.getAttribute("data-id");
+
+      let tasks = JSON.parse(localStorage.getItem("tasks")) || {};
+      tasks[taskId].completed = this.checked; // Обновляем статус
+
+      localStorage.setItem("tasks", JSON.stringify(tasks)); // Сохраняем изменения
+    });
+  });
+}
+
+function addDeleteEvents() {
+  document.querySelectorAll(".delete-btn").forEach((button) => {
+    button.addEventListener("click", function () {
+      let taskElement = this.closest(".todo-item");
+      let taskId = taskElement.getAttribute("data-id");
+
+      let tasks = JSON.parse(localStorage.getItem("tasks")) || {};
+      delete tasks[taskId]; // Удаляем задачу
+      localStorage.setItem("tasks", JSON.stringify(tasks));
+
+      renderTasks(); // Перерисовываем список
+    });
+  });
+}
+
+addTask();
+renderTasks();
--- a/index.html
+++ b/index.html
@ -0,0 +1,19 @@
+<!DOCTYPE html>
+<html lang="ru">
+  <head>
+    <meta charset="UTF-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <title>To-Do List</title>
+    <link rel="stylesheet" href="style.css" />
+  </head>
+  <body>
+    <div class="todo-container">
+      <div class="todo-header">
+        <input type="text" placeholder="Добавить задачу..." />
+        <button>+</button>
+      </div>
+      <div class="todo-list"></div>
+    </div>
+    <script src="app.js"></script>
+  </body>
+</html>
--- a/style.css
+++ b/style.css
@ -0,0 +1,75 @@
+* {
+  box-sizing: border-box;
+  margin: 0;
+  padding: 0;
+  font-family: Arial, sans-serif;
+}
+
+body {
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  min-height: 100vh;
+  background: #f0f0f5;
+}
+
+.todo-container {
+  width: 90%;
+  max-width: 400px;
+  background: white;
+  padding: 20px;
+  border-radius: 15px;
+  box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1);
+}
+
+.todo-header {
+  display: flex;
+  gap: 10px;
+}
+
+input {
+  flex: 1;
+  padding: 10px;
+  border: 1px solid #ccc;
+  border-radius: 10px;
+  outline: none;
+}
+
+button {
+  background: #4caf50;
+  color: white;
+  border: none;
+  padding: 10px 15px;
+  border-radius: 10px;
+  cursor: pointer;
+  font-size: 16px;
+}
+
+.todo-list {
+  margin-top: 20px;
+}
+
+.todo-item {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  padding: 10px;
+  border-bottom: 1px solid #eee;
+}
+
+.todo-item.completed span {
+  text-decoration: line-through;
+  color: #888;
+}
+
+.todo-item input[type="checkbox"] {
+  margin-right: 10px;
+}
+
+.delete-btn {
+  background: none;
+  border: none;
+  color: red;
+  font-size: 20px;
+  cursor: pointer;
+}