- index.html
- style.css
- script.js
HTML
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>The To-Do List</title>
<link href="style.css" rel="stylesheet">
</head>
<body>
<h1 class="visually-hidden">The To-Do List</h1>
<ul class="todo-list">
<li class="todo-list-item">
<label>
<input class="todo-list-input" type="checkbox">
<span>Feed the cat</span>
</label>
</li>
<li class="todo-list-item">
<label>
<input class="todo-list-input" type="checkbox">
<span>Leave the country</span>
</label>
</li>
<li class="todo-list-item">
<label>
<input class="todo-list-input" type="checkbox">
<span>Go for a run</span>
</label>
</li>
</ul>
<p class="empty-tasks hidden">All of the tasks have been completed. There are no new tasks.</p>
<form class="add-form" action="https://echo.htmlacademy.ru/courses" method="post">
<input class="add-form-input" type="text" aria-label="Task description" placeholder="For example, buy an elephant" required>
<button class="add-form-button" type="submit">Add new task</button>
</form>
<template id="task-template">
<li class="todo-list-item">
<label>
<input type="checkbox" class="todo-list-input">
<span></span>
</label>
</li>
</template>
<script src="script.js"></script>
</body>
</html>
CSS
@font-face {
font-weight: 400;
font-family: "Muller";
font-style: normal;
font-display: swap;
src: url("fonts/Muller.woff") format("woff");
}
body {
margin: 40px 32px;
font-size: 18px;
line-height: normal;
font-family: "Muller", sans-serif;
}
.visually-hidden,
.todo-list-input {
position: absolute;
width: 1px;
height: 1px;
margin: -1px;
padding: 0;
overflow: hidden;
white-space: nowrap;
border: 0;
clip: rect(0 0 0 0);
clip-path: inset(100%);
}
.hidden {
display: none;
}
.todo-list {
margin: 0;
padding: 0;
list-style: none;
}
.todo-list-item {
margin-bottom: 12px;
}
.todo-list-item label {
display: block;
padding: 12px 18px;
background-color: #ffffff;
border-radius: 4px;
box-shadow: 0 2px 5px rgba(0, 0, 0, 0.15);
cursor: pointer;
user-select: none;
}
.todo-list-item span {
display: flex;
align-items: center;
}
.todo-list-input + span::before {
content: "";
display: inline-block;
width: 16px;
height: 16px;
margin-right: 16px;
background-color: #ffffff;
border: 2px solid #69b253;
border-radius: 4px;
}
.todo-list-input:checked + span::before {
background-color: #69b253;
background-image: url("check-white.svg");
background-repeat: no-repeat;
background-position: center;
}
.todo-list-input:not(:checked):hover + span::before,
.todo-list-input:not(:checked):focus + span::before {
background-color: rgba(105, 178, 83, 0.2);
}
.empty-tasks {
color: #69b253;
}
.empty-tasks::before {
content: "";
width: 14px;
height: 13px;
margin-right: 13px;
background-image: url("check-green.svg");
background-repeat: no-repeat;
background-position: center;
}
.add-form {
display: flex;
}
.add-form-input {
flex-grow: 1;
box-sizing: border-box;
height: 46px;
margin-right: 16px;
padding: 12px;
font: inherit;
border: 1px solid #a1b5c4;
border-radius: 4px;
}
.add-form-input:focus {
border: 1px solid #69b253;
outline: none;
}
.add-form-input:hover {
box-shadow: 0 0 6px rgba(105, 178, 83, 0.6);
}
.add-form-input::placeholder {
color: #a1b5c4;
}
.add-form-button {
flex-shrink: 0;
padding: 12px;
font: inherit;
color: #ffffff;
background-color: #69b253;
border: none;
border-radius: 4px;
user-select: none;
touch-action: manipulation;
}
.add-form-button:hover,
.add-form-button:focus {
background-color: #5aa045;
outline: none;
}
.add-form-button:active {
background-color: #42862e;
}
JavaScript
var list = document.querySelector('.todo-list');
var items = list.children;
var emptyListMessage = document.querySelector('.empty-tasks');
var newItemForm = document.querySelector('.add-form');
var newItemTitle = newItemForm.querySelector('.add-form-input');
var taskTemplate = document.querySelector('#task-template').content;
var newItemTemplate = taskTemplate.querySelector('.todo-list-item');
var toggleEmptyListMessage = function () {
if (items.length === 0) {
emptyListMessage.classList.remove('hidden');
}
};
var addCheckHandler = function (item) {
var checkbox = item.querySelector('.todo-list-input');
checkbox.addEventListener('change', function () {
item.remove();
toggleEmptyListMessage();
});
};
for (var i = 0; i < items.length; i++) {
addCheckHandler(items[i]);
}
newItemForm.addEventListener('submit', function (evt) {
evt.preventDefault();
var taskText = newItemTitle.value;
var task = newItemTemplate.cloneNode(true);
var taskDescription = task.querySelector('span');
taskDescription.textContent = taskText;
addCheckHandler(task);
list.appendChild(task);
});
Click inside the mini browser to put the focus in this window.
Console
Goalscompleted
0
- In
toggleEmptyListMessageadd theelsebranch, and inside this branch add thehiddenclass to theemptyListMessageelement. - Call the
toggleEmptyListMessagefunction inside the function handler, after adding thetaskto the list. - On the next line, clear the text in the input field:
newItemTitle.value = '';. - Complete all tasks in the list.
- Add a new task with the text
Go on vacation. - Delete the new task by clicking the checkbox.
Comments