commit 33f3a277b23c9e70923e03fe74e921c99f311d0d Author: Fovway Date: Sun Mar 9 12:53:00 2025 +0000 Загрузить файлы в «/» diff --git a/app.js b/app.js new file mode 100644 index 0000000..19abee4 --- /dev/null +++ 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 = ` +
+ + +
+ `; + + 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(); diff --git a/index.html b/index.html new file mode 100644 index 0000000..a2ece5e --- /dev/null +++ b/index.html @@ -0,0 +1,19 @@ + + + + + + To-Do List + + + +
+
+ + +
+
+
+ + + diff --git a/style.css b/style.css new file mode 100644 index 0000000..e90c346 --- /dev/null +++ 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; +}