Проект JavaScript - список задач
Добавить в избранное
Список TODO — это списки, которые мы обычно используем для ведения наших повседневных задач или списка всего, что нам нужно сделать, причем наиболее важные задачи находятся вверху списка, а наименее важные — внизу. Это полезно при планировании нашего ежедневного расписания. Мы можем добавить больше задач в любое время и удалить задачу, которая завершена. Четыре основные задачи, которые мы можем выполнить в списке TODO:
1. Добавить задачи
2. Редактирование задач
3. Чтение задач
4. Удалить задачи
index.html
<html lang="ru">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">
<script src="js.js"></script>
<title>Список дел</title>
</head>
<body>
<header class="bg-success text-white p-5">
<div class="container">
<div class="row">
<div class="col-lg-12 col-md-12 col-sm-12">
<font face="Comic sans MS" size="11" color="black">
<strong>Список дел</strong>
</font>
</div>
</div>
</div>
</header>
<div class="container mt-3">
<h2>Добавить элементы</h2>
<label id="lblsuccess" class="text-success" style="display: none;"></label>
<form id="addForm">
<div class="row">
<div class="col-lg-7 col-md-7 col-sm-7">
<input type="text" onkeyup="toggleButton(this, 'submit')" class="form-control" id="item">
</div>
<div class="col-lg-5 col-md-5 col-sm-5">
<input type="submit" class="btn btn-dark" id="submit" value="Добавить" disabled>
</div>
</div>
</form>
<h3 class="mt-4">Задачи</h3>
<form id="addForm">
<ul class="list-group" id="items"></ul>
</form>
</div>
</body>
</html>
js.js
const form1 = document.querySelector("#addForm");
let items = document.querySelector("#items");
let submit = document.querySelector("#submit");
let editItem = null;
form1.addEventListener("submit", addItem);
items.addEventListener("click", removeItem);
};
function addItem(e) {
e.preventDefault();
if (submit.value != "Добавить") {
console.log("Hello");
editItem.target.parentNode.childNodes[0].data = document.getElementById("item").value;
submit.value = "Добавить";
document.querySelector("#item").value = "";
document.querySelector("#lblsuccess").innerHTML = "Текст успешно отредактирован";
document.querySelector("#lblsuccess").style.display = "block";
setTimeout(function() {
document.querySelector("#lblsuccess").style.display = "none";
}, 3000);
return false;
}
let newItem = document.querySelector("#item").value;
if (newItem.trim() == "" || newItem.trim() == null)
return false;
else document.querySelector("#item").value = "";
let li = document.createElement("li");
li.className = "list-group-item";
let deleteButton = document.createElement("button");
deleteButton.className = "btn-danger btn btn-sm float-right delete";
deleteButton.appendChild(document.createTextNode("Удалить"));
let editButton = document.createElement("button");
editButton.className = "btn-success btn btn-sm float-right edit";
editButton.appendChild(document.createTextNode("Редактировать"));
li.appendChild(document.createTextNode(newItem));
li.appendChild(deleteButton);
li.appendChild(editButton);
items.appendChild(li);
}
function removeItem(e) {
e.preventDefault();
if (e.target.classList.contains("delete")) {
if (confirm("Are you Sure?")) {
let li = e.target.parentNode;
items.removeChild(li);
document.querySelector("#lblsuccess").innerHTML = "Текст успешно удален";
document.querySelector("#lblsuccess").style.display = "block";
setTimeout(function() {
document.querySelector("#lblsuccess").style.display = "none";
}, 3000);
}
}
if (e.target.classList.contains("edit")) {
document.querySelector("#item").value = e.target.parentNode.childNodes[0].data;
submit.value = "Редактировать";
editItem = e;
}
}
function toggleButton(ref, btnID) {
document.getElementById(btnID).disabled = false;
}