JSFiddle - React, Tailwind, and code Playground
HTML
<div class='container'>
<div class="wrap">
<h1>Список задач</h1>
<div class="inp-wrap">
<input class='task' type="text" placeholder='Введите текст задачи'>
<button class='plus'>+</button>
</div>
<div class='task-container' id='task-container'>
</div>
</div>
</div>
CSS
* {
box-sizing:border-box;
}
.container {
max-width: 500px;
margin: 0 auto;
}
h1 {
background-color: orange;
text-align: center;
border-radius:10px 10px 0 0;
color: #fff;
}
.inp-wrap {
margin-bottom: 20px;
display: flex;
padding: 10px;
}
.plus {
margin-left: 15px;
border: none;
border-radius: 20px;
background: lightgreen;
font-size: 30px;
padding: 0 8px;
outline: none;
color: #fff;
&:hover {
color: red;
opacity: 0.8;
}
}
.task {
width: 100%;
padding: 5px;
font-size: 16px;
}
.task-item {
display: flex;
align-items: center;
max-width: 90%;
font-size: 18px;
}
#scales {
margin-right: 10px
}
.task-wrap {
display: flex;
align-items: center;
background: gainsboro;
margin-bottom: 10px;
padding: 10px;
&:nth-child(2n) {
background: #fff;
}
}
.task-wrap-check {
text-decoration: line-through;
}
.minus {
margin-left: auto;
border: none;
border-radius: 20px;
background: lightgreen;
font-size: 25px;
padding: 0 12px;
outline: none;
color: #fff;
&:hover {
color: red;
opacity: 0.8;
}
}
JavaScript
let textVal = document.querySelector('.task')
let btnAdd = document.querySelector('.plus')
let taskCont = document.getElementById('task-container')
let btnDel = document.getElementsByClassName('minus')
let itemsV = taskCont.children
taskCont = localStorage.getItem('todoList');
function saveTodo(){
localStorage.setItem('todoList',taskCont );
}
function addTask() {
btnAdd.addEventListener('click', () => {
taskCont.innerHTML += `
<div class='task-wrap' id='task-wrap'>
<div class='task-item'>
${textVal.value}
</div>
<button class='minus'>-</button>
</div>
`
textVal.value = ''
remove()
saveTodo()
})
}
function remove() {
for(let item of btnDel) {
item.onclick = function() {
item.parentElement.remove();
saveTodo()
}
}
}
function isCheck() {
taskCont.addEventListener('click', (e) => {
let {target} = e
if(target.classList.contains('task-wrap')){
target.classList.toggle('task-wrap-check')
}
saveTodo()
})
}
isCheck()
addTask()