<body>
<div class="container">
<form class="form">
<input type="text" placeholder="Enter your todo" />
<button>Add</button>
</form>
<ul class="todos"></ul>
</div>
<script src="app.js"></script>
</body>
* {
padding: 0;
margin: 0;
font-family: sans-serif;
box-sizing: border-box;
}
body {
background: linear-gradient(to right, #ffe000, #799f0c);
min-height: 100vh;
}
.container {
width: 400px;
background-color: #fff;
margin: 100px auto;
border-radius: 6px;
}
.form {
padding: 10px 20px 10px 0;
display: flex;
align-items: center;
justify-content: space-between;
border-bottom: 1px solid #aaa;
}
.form input {
outline: none;
border: none;
padding: 0 20px;
font-size: 24px;
color: #444;
width: 100%;
}
.form button {
outline: none;
border: none;
background-color: yellowgreen;
padding: 5px 15px;
border-radius: 6px;
cursor: pointer;
color: white;
font-size: 20px;
}
.todos {
padding: 0;
margin: 0;
list-style-type: none;
}
.todos li {
border-top: 1px solid #e5e5e5;
cursor: pointer;
font-size: 22px;
padding: 15px 22px;
display: flex;
align-items: center;
justify-content: space-between;
}
.todos li i {
color: #aaa;
opacity: 0;
}
.todos li:hover i {
opacity: 1;
}
.todos li span {
overflow: hidden;
text-overflow: ellipsis;
padding-right: 10px;
}
.todos li.completed span {
color: #b6b6b6;
text-decoration: line-through;
}
const input = document.querySelector('form input')
const ul = document.querySelector('.todos')
const form = document.querySelector('form')
const todos = <a href="https://nodemy.vn/thao-tac-voi-json-trong-javascript-don-gian-de-hieu-cho-nguoi-moi-bat-dau-biet-den-va-tim-hieu-json-trong-javascript-important/">JSON</a>.parse(localStorage.getItem('todos'))
if (todos) {
todos.forEach((<a href="https://nodemy.vn/tao-ung-dung-todo-voi-usestate-trong-react-hook/">todo</a>) => addTodo(todo))
}
<a href="https://nodemy.vn/tim-hieu-ve-ham-trong-javascript-cach-tao-truyen-tham-so-va-su-dung-mot-cach-hieu-qua-don-gian-de-hieu-danh-cho-nguoi-moi-bat-dau-important/">function</a> addTodo(todo) {
const li = document.createElement('li')
li.setAttribute('class', todo.completed ? 'completed' : '')
li.innerHTML = `
<span>${todo.text}</span>
<i class="fas fa-trash"></i>
`
li.addEventListener('click', function () {
<a href="https://nodemy.vn/hieu-arrow-function-va-this-trong-javascript-tao-ra-nhung-ham-manh-me-voi-cu-phap-ngan-gon-huong-dan-day-du-cho-nguoi-moi-bat-dau-important/">this</a>.classList.toggle('completed')
updateTodos()
})
li.querySelector('i').addEventListener('click', (e) => {
e.target.parentElement.remove()
updateTodos()
})
ul.appendChild(li)
updateTodos()
}
form.addEventListener('submit', (e) => {
e.preventDefault()
const text = input.value.trim()
text != '' ? addTodo({ text, completed: false }) : undefined
input.value = ''
})
function updateTodos() {
const list = document.querySelectorAll('li')
const todos = []
list.forEach((item) => {
todos.push({
text: item.querySelector('span').innerHTML,
completed: item.classList.contains('completed'),
})
})
localStorage.setItem('todos', JSON.stringify(todos))
}
LỘ TRÌNH LÊN FULLSTACK, trọn bộ serial course Pro HTML,CSS,JAVASCRIPT MIỄN PHÍ :
HTML : HTML căn bản cho người mới bắt đầu
CSS : CSS căn bản cho người mới bắt đầu
JS: Javascript cho người mới bắt đầu
