Interactive online courses HTML Academy
2026-03-09 14:05 Diff
https://htmlacademy.org/courses/javascript-browser/dom/add-new-element

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"> </ul> <p class="empty-tasks">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); // Declare a variable taskDescription here });