0 added
0 removed
Original
2026-01-01
Modified
2026-03-09
1
<p>HTML</p>
1
<p>HTML</p>
2
<p><!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></p>
2
<p><!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></p>
3
<p>CSS</p>
3
<p>CSS</p>
4
<p>@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; }</p>
4
<p>@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; }</p>
5
<p>JavaScript</p>
5
<p>JavaScript</p>
6
<p>var list = document.querySelector('.todo-list'); var items = list.querySelectorAll('.todo-list-item'); var toggleEmptyListMessage = function () { // Add a console output here if (items.length === 0) { console.log('All of the goals are completed!'); } }; 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]); }</p>
6
<p>var list = document.querySelector('.todo-list'); var items = list.querySelectorAll('.todo-list-item'); var toggleEmptyListMessage = function () { // Add a console output here if (items.length === 0) { console.log('All of the goals are completed!'); } }; 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]); }</p>