Skip to content

Commit 072f172

Browse files
matowdevmatowdev
committed
[LES-17.3/st-compl] event-handling
Practice with "addEventListener()" meth, its "event".. "target". Worth noting: - both the lesson material and additional practice. FS-dev: B-3 / JS basic
1 parent 1ccbb5f commit 072f172

File tree

8 files changed

+241
-7
lines changed

8 files changed

+241
-7
lines changed

‎full-stack-dev/3-js-basic/17-dom/17-2-selecting-manipulating-dom-elements/practice/index.html‎

Lines changed: 7 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -19,13 +19,13 @@ <h2>Имя пользователя: <span id="user-name">...</span></h2>
1919
<input id="password-input" type="text" value="qwerty">
2020
<p id="validation-message"></p>
2121
</div>
22-
</body>
2322

24-
<ul id="item-list">
25-
<li>Молоко</li>
26-
<li class="new-item">Хлеб</li>
27-
<li>Сыр</li>
28-
<li class="new-item">Сок</li>
29-
</ul>
23+
<ul id="item-list">
24+
<li>Молоко</li>
25+
<li class="new-item">Хлеб</li>
26+
<li>Сыр</li>
27+
<li class="new-item">Сок</li>
28+
</ul>
29+
</body>
3030

3131
</html>

‎full-stack-dev/3-js-basic/17-dom/17-3-event-handling/index.html‎

Lines changed: 20 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,20 @@
1+
<!DOCTYPE html>
2+
<html lang="en">
3+
4+
<head>
5+
<meta charset="UTF-8">
6+
<meta http-equiv="X-UA-Compatible" content="IE=edge">
7+
<meta name="viewport" content="width=device-width, initial-scale=1.0">
8+
<title>DOM</title>
9+
<link rel="stylesheet" href="./styles.css">
10+
<script src="./index.js" defer></script>
11+
</head>
12+
13+
<body style="background-color: #1c1b21; text-align: center">
14+
<img src="./logo.svg" alt>
15+
<div class="panel">I love this!</div>
16+
<input class="input" id="input">
17+
<button class="button" onclick="changeMessageByClick()">Change</button>
18+
</body>
19+
20+
</html>

‎full-stack-dev/3-js-basic/17-dom/17-3-event-handling/index.js‎

Lines changed: 30 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,30 @@
1+
'use strict';
2+
3+
// const button = document.querySelector('.button');
4+
//
5+
// button.addEventListener('click', () => {
6+
// const panelMessage = document.querySelector('.panel');
7+
// const input = document.querySelector('.input');
8+
// const inputValue = input.value;
9+
//
10+
// if (!inputValue) {
11+
// return;
12+
// }
13+
//
14+
// panelMessage.textContent = inputValue;
15+
// input.value = '';
16+
// });
17+
18+
// ?? теперь, то же самое только через func и html атрибут onclick=""
19+
function changeMessageByClick() {
20+
const panelMessage = document.querySelector('.panel');
21+
const input = document.querySelector('.input');
22+
const inputValue = input.value;
23+
24+
if (!inputValue) {
25+
return;
26+
}
27+
28+
panelMessage.textContent = inputValue;
29+
input.value = '';
30+
}

‎full-stack-dev/3-js-basic/17-dom/17-3-event-handling/logo.svg‎

Lines changed: 25 additions & 0 deletions
Loading

‎full-stack-dev/3-js-basic/17-dom/17-3-event-handling/practice/index.html‎

Lines changed: 33 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,33 @@
1+
<!DOCTYPE html>
2+
<html lang="en">
3+
4+
<head>
5+
<meta charset="UTF-8">
6+
<meta name="viewport" content="width=device-width, initial-scale=1.0">
7+
<title>DOM - practice</title>
8+
<link rel="stylesheet" href="./style.css">
9+
<script src="./index.js" defer></script>
10+
</head>
11+
12+
<body>
13+
<div>
14+
<label for="feedback">Ваш отзыв:</label>
15+
<textarea id="feedback" maxlength="200"></textarea>
16+
<p>Введено символов: <span id="charCounter">0</span></p>
17+
</div>
18+
19+
<div>
20+
<label for="password">Пароль:</label>
21+
<input id="passwordInput" type="password">
22+
<p id="passwordHint">Пароль должен содержать не менее 8 символов.</p>
23+
</div>
24+
25+
<ul id="todoList">
26+
<li>Повторить теорию по событиям</li>
27+
<li>Решить практическую задачу</li>
28+
<li>Выпить кофе</li>
29+
<li>Похвалить себя за хорошую работу</li>
30+
</ul>
31+
</body>
32+
33+
</html>

‎full-stack-dev/3-js-basic/17-dom/17-3-event-handling/practice/index.js‎

Lines changed: 75 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,75 @@
1+
'use strict';
2+
3+
// Задание 1:
4+
// Перед тобой простое текстовое поле и счётчик. Напиши JavaScript-код, который будет в реальном времени считать количество символов, введённых в <textarea>, и отображать это число внутри <span>.
5+
// <div>
6+
// <label for="feedback">Ваш отзыв:</label>
7+
// <textarea id="feedback" maxlength="200"></textarea>
8+
// <p>Введено символов: <span id="charCounter">0</span></p>
9+
// </div>
10+
// Подсказка: Для отслеживания ввода текста лучше всего подходит событие 'input', оно срабатывает при любом изменении в поле.
11+
12+
const feedback = document.querySelector('#feedback');
13+
const span = document.querySelector('#charCounter');
14+
15+
function charCount(event) {
16+
const feedbackLength = event.target.value.length; // в реальном времени получение длинны введённых символов
17+
span.textContent = feedbackLength;
18+
}
19+
20+
// feedback.addEventListener('input', (event) => charCount(event)); // вызов функции с передачей события
21+
feedback.addEventListener('input', charCount); // можно и без стрелочной.. т.к. данный метод саи/автоматически вызывает переданную в него функцию и туда/в неё кулуарно передаёт событие event.. МАГИЯ!
22+
23+
// Задание 2:
24+
// Перед тобой поле для ввода пароля и текстовая подсказка. Напиши код, который будет менять цвет этой подсказки в зависимости от длины пароля:
25+
// - Если в пароле меньше 8 символов, текст подсказки должен стать красным.
26+
// - Если в пароле 8 или больше символов, текст подсказки должен стать зелёным.
27+
// Подсказка: Ты можешь менять CSS-свойства элемента напрямую из JavaScript через его свойство style. Например: element.style.color = 'red';.
28+
// <div>
29+
// <label for="password">Пароль:</label>
30+
// <input type="password" id="passwordInput">
31+
// <p id="passwordHint">Пароль должен содержать не менее 8 символов.</p>
32+
// </div>
33+
34+
const passwordInput = document.querySelector('#passwordInput');
35+
const hint = document.querySelector('#passwordHint');
36+
37+
function checkPassword(event) {
38+
const passwordLength = event.target.value.length;
39+
40+
if (passwordLength === 0) {
41+
hint.style.color = 'black';
42+
} else if (passwordLength < 8) {
43+
hint.style.color = 'red';
44+
} else {
45+
hint.style.color = 'green';
46+
}
47+
}
48+
49+
passwordInput.addEventListener('input', checkPassword);
50+
51+
// Задание 3:
52+
// Это задача на проверку самого полезного "хака" — делегирования событий. Перед тобой список дел. Тебе нужно написать код, который позволит "вычёркивать" дела из списка по клику.
53+
// Главное условие: Нужно повесить только один обработчик событий на весь список <ul>.
54+
// Требования:
55+
// - При клике на любой элемент <li> ему должен добавляться или убираться CSS-класс .done.
56+
// - Слушатель событий должен быть только один, и он должен быть на элементе <ul id="todoList">.
57+
// Подсказка: Используй event.target, чтобы определить, на какой именно <li> кликнули. А для удобного управления классами есть прекрасный метод: element.classList.toggle('className'). Он добавляет класс, если его нет, и убирает, если он есть.
58+
// <ul id="todoList">
59+
// <li>Повторить теорию по событиям</li>
60+
// <li>Решить практическую задачу</li>
61+
// <li>Выпить кофе</li>
62+
// <li>Похвалить себя за хорошую работу</li>
63+
// </ul>
64+
65+
const todoList = document.querySelector('#todoList');
66+
67+
function strikeTask(event) {
68+
const target = event.target;
69+
70+
if (target.tagName === 'LI') {
71+
target.classList.toggle('done');
72+
}
73+
}
74+
75+
todoList.addEventListener('click', strikeTask);

‎full-stack-dev/3-js-basic/17-dom/17-3-event-handling/practice/style.css‎

Lines changed: 10 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,10 @@
1+
.done {
2+
text-decoration: line-through;
3+
color: grey;
4+
cursor: default;
5+
}
6+
7+
#todoList li {
8+
margin-bottom: 5px;
9+
cursor: pointer;
10+
}

‎full-stack-dev/3-js-basic/17-dom/17-3-event-handling/styles.css‎

Lines changed: 41 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,41 @@
1+
.panel {
2+
margin-bottom: 20px;
3+
border-radius: 10px;
4+
padding: 40px;
5+
font-size: 18px;
6+
color: white;
7+
background: rgba(255, 255, 255, .05);
8+
}
9+
10+
.input {
11+
border: 1px solid rgba(212, 212, 212, .05);
12+
border-radius: 10px;
13+
padding: 15px 16px;
14+
height: 56px;
15+
box-sizing: border-box;
16+
font-size: 18px;
17+
line-height: 21px;
18+
color: white;
19+
box-shadow: none;
20+
outline: none;
21+
background: rgba(255, 255, 255, .05);
22+
}
23+
24+
.button {
25+
display: inline-flex;
26+
justify-content: center;
27+
align-items: center;
28+
border: none;
29+
border-radius: 10px;
30+
padding: 20px 40px;
31+
box-sizing: border-box;
32+
text-align: center;
33+
color: white;
34+
background: #6c38cc;
35+
cursor: pointer;
36+
transition: all .2s;
37+
}
38+
39+
.button:hover {
40+
background-color: #844fe6;
41+
}

0 commit comments

Comments
 (0)