Здравствуйте. Делаю свой первый ToDo. Всё шло нормально, пока не дошёл до localStorage. У меня получается добавить один элемент, но при добавлении одного он перезаписывает предыдущий. А также я хотел удалять элемент из localStorage при клике на '.close'.
HTML:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>MyToDo</title>
<link rel="stylesheet" href="style.css">
<link href="https://fonts.googleapis.com/css?family=Roboto:400,500,700&display=swap&subset=cyrillic" rel="stylesheet">
</head>
<body>
<div class="container">
<div class="todo">
<div class="todo__top">
<h2 class="todo__title">ToDo List</h2>
<div class="add-todo"></div>
</div>
<hr class="todo__devider" />
</div>
</div>
<script src="main.js"></script>
</body>
</html>
CSS:
* {
margin: 0;
padding: 0;
}
.container {
height: 100vh;
background: #FFC077;
font-family: Roboto, sans-serif;
display: flex;
justify-content: center;
align-items: center;
}
*::selection {
color: white;
background: #000;
}
.todo {
width: 450px;
height: 600px;
background: #fff;
box-sizing: border-box;
border-radius: 15px;
padding: 20px 0;
position: relative;
}
.todo__top {
display: flex;
justify-content: space-between;
align-items: center;
padding: 0 15px 0 20px;
}
.todo__title {
font-size: 28px;
}
.todo__devider {
background: #000;
width: 100%;
height: 3px;
margin: 20px 0 0;
display: block;
border: none;
}
.add-todo {
border-radius: 50%;
width: 30px;
height: 30px;
cursor: pointer;
background: url(img/add.svg) no-repeat, #000;
background-position: center;
-webkit-background-size: 50%;
background-size: 50%;
}
.todo__element {
width: 100%;
box-sizing: border-box;
padding: 20px;
position: relative;
transition-duration: 350ms;
transition-property: background-color;
user-select: none;
display: flex;
justify-content: space-between;
align-items: center;
}
.todo__check {
width: 18px;
height: 18px;
}
.todo__element:nth-child(even) {
background: #fafafa;
}
.todo__element:hover {
background: #D8D8D8 !important;
}
.close {
width: 20px;
height: 20px;
background: url(img/close.svg) no-repeat;
-webkit-background-size: cover;
background-size: cover;
}
JS(сильно не бейте):
const addToDo = document.querySelector('.add-todo');
window.onload = function() {
if(localStorage.getItem('todo') != null) {
document.querySelector('.todo').insertAdjacentHTML('beforeend', localStorage.getItem('todo'));
}
OptionToDo();
}
addToDo.addEventListener('click', function() {
let question = prompt('Введите название дела: ', ''),
toDoList = document.querySelector('.todo');
if(question == null || question == '') {
return false;
}
let toDoElement = `<div class="todo__element">
<h3>${question}</h3>
<input type="checkbox" class="todo__check"/>
<div class="close"></div>
</div>`;
localStorage.setItem('todo', toDoElement);
toDoList.insertAdjacentHTML('beforeend', localStorage.getItem('todo'));
OptionToDo();
});
function OptionToDo() {
let todo = document.querySelectorAll('.todo__element');
for(item of todo) {
item.addEventListener('click', function(e) {
if(e.target.classList.contains('close')) {
this.remove();
//localStorage.removeItem('todo');
}
if(e.target.checked) {
this.querySelector('h3').style.color = 'red';
this.querySelector('h3').style.textDecoration = 'line-through';
} else {
this.querySelector('h3').style.color = '#000';
this.querySelector('h3').style.textDecoration = 'none';
}
});
}
}
