- index.html
- style.css
- script.js
HTML
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<link rel="stylesheet" href="style.css">
<title>List of tasks</title>
</head>
<body>
<h1 class="heading">List of tasks</h1>
<ol class="todo-list">
<li>Make an appointment</li>
<li class="is-important">Eat</li>
</ol>
<form class="todo-form" action="https://echo.htmlacademy.ru/courses" method="post">
<label class="input-label" for="todo-input">Add a task</label>
<input type="text" class="todo-input" id="todo-input" required>
<button type="button" class="todo-priority is-important">Important task</button>
<button type="submit" class="todo-add">Add to list</button>
</form>
<script src="script.js"></script>
</body>
</html>
CSS
body {
margin: 0;
font-family: "Verdana", "Tahoma", sans-serif;
font-size: 14px;
line-height: 20px;
box-sizing: border-box;
background-color: #f6f8fe;
}
.heading {
margin: 0;
padding: 20px 16px 22px;
text-align: center;
font-size: 18px;
line-height: 22px;
letter-spacing: 0.5px;
font-weight: normal;
text-transform: uppercase;
color: #ffffff;
background-color: #5c8bf0;
}
.todo-list {
margin: 0 0 20px;
padding: 0;
list-style: none;
counter-reset: todos;
}
.todo-list li {
margin-top: 1px;
padding: 20px 16px;
background-color: #ffffff;
color: #5c8bf0;
}
.todo-list li::before {
counter-increment: todos;
content: counter(todos);
padding: 6px 10px;
margin-right: 10px;
border: 1px solid #5c8bf0;
border-radius: 16px;
}
.todo-list .is-important {
font-weight: bold;
color: #ffffff;
background-color: #f98f2d;
}
.todo-list .is-important::before {
border: none;
color: #f98f2d;
background-color: #ffffff;
}
.todo-form {
padding: 0 16px;
display: flex;
flex-direction: column;
}
.input-label {
margin: 0 0 4px;
font-size: 10px;
line-height: 12px;
color: #5c8bf0;
}
.todo-input {
margin-bottom: 12px;
padding: 10px 12px;
font-family: "Verdana", "Tahoma", sans-serif;
font-size: 14px;
line-height: 20px;
border-radius: 4px;
border: 1px solid #5c8bf0;
}
.todo-form button {
margin-bottom: 6px;
margin-right: auto;
font-size: 12px;
line-height: 16px;
letter-spacing: 0.5px;
text-transform: uppercase;
border: none;
border-radius: 4px;
}
.todo-priority {
position: relative;
padding: 12px 22px 12px 44px;
color: #5c8bf0;
background-color: transparent;
}
.todo-priority::before {
position: absolute;
content: "";
top: 11px;
left: 20px;
width: 16px;
height: 16px;
background-image: url("img/icon-change.svg");
}
.todo-priority.is-important {
font-weight: bold;
color: #f98f2d;
}
.todo-priority.is-important::before {
filter: hue-rotate(169deg) saturate(1.3) brightness(1.15);
transform: rotate(180deg);
}
.todo-add {
padding: 12px 22px;
color: #ffffff;
background-color: #5c8bf0;
}
.todo-input:focus,
.todo-form button:focus {
outline: 3px solid #bac9f7;
outline-offset: 0;
}
.todo-priority:hover {
background-color: #edf1fd;
}
.todo-priority:active {
background-color: #e3eafc;
opacity: 0.5;
}
.todo-add:hover {
background-color: #447aee;
}
.todo-add:active {
opacity: 0.5;
}
JavaScript
let list = document.querySelector('.todo-list');
let input = document.querySelector('.todo-input');
let form = document.querySelector('.todo-form');
let priority = document.querySelector('.todo-priority');
priority.onclick = function () {
priority.classList.toggle('is-important');
};
form.onsubmit = function (evt) {
evt.preventDefault();
};
/*
1. Each time the priority switcher is clicked (priority variable), the is-important class is switched. If there is a class, then the priority is high; and if there is no class, then the priority is regular.
2. If the priority is high, then the text content of the switcher is 'Important task'. If priority is regular, then the text content is 'Regular task'
3. Each task in the list is assigned its own li element. When a form is submitted (form variable), a new task is added to the end of the list (list variable).
4. The text of the task is taken from the input field (input variable).
5. If a high priority has been set, the is-important class is added to the new task.
6. Bonus task: After the task is added to the list, the input field can be cleared. But you do not have to clear it. Muffin doesn't care which option you use.
*/
Click inside the mini browser to put the focus in this window.
Console
let list = document.querySelector('.todo-list');
let input = document.querySelector('.todo-input');
let form = document.querySelector('.todo-form');
let priority = document.querySelector('.todo-priority');
priority.onclick = function () {
priority.classList.toggle('is-important');
if (priority.classList.contains('is-important')) {
priority.textContent = 'Important task';
} else {
priority.textContent = 'Regular task';
}
};
form.onsubmit = function (evt) {
evt.preventDefault();
let newItem = document.createElement('li');
if (priority.classList.contains('is-important')) {
newItem.classList.add('is-important');
}
newItem.textContent = input.value;
list.append(newItem);
};