mirror of
https://github.com/microsoft/frontend-bootcamp.git
synced 2026-01-26 14:56:42 +08:00
85 lines
2.4 KiB
HTML
85 lines
2.4 KiB
HTML
<!DOCTYPE html>
|
|
<html>
|
|
<head>
|
|
<link rel="stylesheet" href="./style.css" />
|
|
</head>
|
|
<body>
|
|
<header>
|
|
<h1>todos</h1>
|
|
<div class="addTodo">
|
|
<input class="textfield" placeholder="add todo" />
|
|
<button onclick="addTodo()" class="submit">Add</button>
|
|
</div>
|
|
<nav class="filter">
|
|
<button class="selected">all</button>
|
|
<button>active</button>
|
|
<button>completed</button>
|
|
</nav>
|
|
</header>
|
|
|
|
<ul class="todos">
|
|
<li class="todo">
|
|
<label><input type="checkbox" /> <span class="title"> Todo 1 </span></label>
|
|
</li>
|
|
<li class="todo">
|
|
<label><input type="checkbox" /> <span class="title"> Todo 2 </span></label>
|
|
</li>
|
|
<li class="todo">
|
|
<label><input type="checkbox" /> <span class="title"> Todo 3 </span></label>
|
|
</li>
|
|
<li class="todo">
|
|
<label><input type="checkbox" /> <span class="title"> Todo 4 </span></label>
|
|
</li>
|
|
</ul>
|
|
<footer>
|
|
<span><i class="remaining">4</i> items left</span>
|
|
<button class="submit">Clear Completed</button>
|
|
</footer>
|
|
</body>
|
|
|
|
<script type="text/javascript">
|
|
function clearInput(selector) {
|
|
document.querySelector(selector).value = '';
|
|
}
|
|
|
|
function getTodoText() {
|
|
return document.querySelector('.textfield').value;
|
|
}
|
|
|
|
function updateRemaining() {
|
|
const remaining = document.querySelector('.remaining');
|
|
const todos = document.querySelectorAll('.todo').length;
|
|
remaining.innerText = todos;
|
|
}
|
|
|
|
function addTodo() {
|
|
const todo = document.querySelector('.todo');
|
|
const newTodo = todo.cloneNode(true);
|
|
newTodo.querySelector('.title').innerText = getTodoText();
|
|
todo.parentElement.insertBefore(newTodo, todo);
|
|
|
|
clearInput('.textfield');
|
|
updateRemaining();
|
|
}
|
|
|
|
// clearCompleted
|
|
|
|
function filter(button) {
|
|
document.querySelector('.selected').classList.remove('selected');
|
|
button.classList.add('selected');
|
|
|
|
const filterName = button.innerText;
|
|
for (let todo of document.querySelectorAll('.todo')) {
|
|
const checked = todo.querySelector('input').checked === true;
|
|
if (filterName === 'all') {
|
|
todo.hidden = false;
|
|
} else if (filterName === 'active') {
|
|
todo.hidden = checked;
|
|
} else if (filterName === 'completed') {
|
|
todo.hidden = !checked;
|
|
}
|
|
}
|
|
}
|
|
</script>
|
|
</html>
|