Fovway/ToDoAppJS
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

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

Browse Source
This commit is contained in:
Fovway 2025-03-09 12:53:00 +00:00
commit 33f3a277b2
3 changed files with 177 additions and 0 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

83
app.js Normal file
View File

@ -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();

19
index.html Normal file
View File

@ -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>

75
style.css Normal file
View File

@ -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;
}