Skip to content

Commit f79147c

Browse files
matowdevmatowdev
committed
[LES-17.8/st-compl] creating-new-elements
Practice with "creating/filling" and "adding" el's to "DOM" tree. Worth noting: - "prepend" method.. adding to the beginning of an element. FS-dev: B-3 / JS basic
1 parent 101118a commit f79147c

File tree

7 files changed

+259
-0
lines changed

7 files changed

+259
-0
lines changed

‎full-stack-dev/3-js-basic/17-dom/17-8-creating-new-elements/index.html‎

Lines changed: 24 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,24 @@
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+
<div class="input-wrap">
17+
<input class="input" id="input">
18+
<button class="button">Change</button>
19+
</div>
20+
<div class="notification notification_hide">Changed!</div>
21+
<div class="new-panel panel"></div>
22+
</body>
23+
24+
</html>

‎full-stack-dev/3-js-basic/17-dom/17-8-creating-new-elements/index.js‎

Lines changed: 55 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,55 @@
1+
'use strict';
2+
3+
const panelMessage = document.querySelector('.panel');
4+
const input = document.querySelector('.input');
5+
const button = document.querySelector('.button');
6+
const notificationMessage = document.querySelector('.notification');
7+
let notificationTimer; // переменная для хранения ID таймера
8+
9+
// DRY
10+
function changeMessage() {
11+
const inputValue = input.value;
12+
13+
if (!inputValue) {
14+
return;
15+
}
16+
17+
panelMessage.textContent = inputValue;
18+
input.value = '';
19+
notificationMessage.classList.remove('notification_hide');
20+
21+
// очищаем предыдущий таймер
22+
clearTimeout(notificationTimer);
23+
24+
// устанавливаем новый таймер (заносим в переменную ID таймера)
25+
notificationTimer = setTimeout(() => {
26+
notificationMessage.classList.add('notification_hide');
27+
}, 1000);
28+
}
29+
30+
// изменения сообщения через "click" по кнопке
31+
function changeMessageByClick() {
32+
changeMessage();
33+
}
34+
35+
button.addEventListener('click', changeMessageByClick);
36+
37+
// изменения сообщения через "keydown/Enter" в поле input
38+
function changeMessageByKeydown(event) {
39+
// без объекта event не обойтись, т.к. в нём определяем code кнопки.. "Enter"
40+
if (event.code === 'Enter') {
41+
changeMessage();
42+
}
43+
}
44+
45+
input.addEventListener('keydown', changeMessageByKeydown);
46+
47+
// создание/добавление "нового" Html элемента/узла
48+
const newPanel = document.querySelector('.new-panel');
49+
const message = document.createElement('p');
50+
51+
message.classList.add('panel-message');
52+
message.setAttribute('id', 'panel-message');
53+
message.textContent = 'Lets do it!';
54+
55+
newPanel.append(message);

‎full-stack-dev/3-js-basic/17-dom/17-8-creating-new-elements/logo.svg‎

Lines changed: 25 additions & 0 deletions
Loading

‎full-stack-dev/3-js-basic/17-dom/17-8-creating-new-elements/practice/index.html‎

Lines changed: 16 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,16 @@
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="./practice.js" defer></script>
10+
</head>
11+
12+
<body>
13+
<div id="root"></div>
14+
</body>
15+
16+
</html>

‎full-stack-dev/3-js-basic/17-dom/17-8-creating-new-elements/practice/practice.js‎

Lines changed: 67 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,67 @@
1+
'use strict';
2+
3+
// Задание 1:
4+
// Напиши код, который:
5+
// 1. Создаёт новый элемент <div>.
6+
// 2. Добавляет в него текст: "Это мой первый динамически созданный элемент!".
7+
// 3. Присваивает этому <div> CSS-класс с именем notification.
8+
// 4. Добавляет получившийся элемент в конец тега <body>.
9+
// Можешь считать, что у тебя есть пустой HTML-файл, в котором есть только <body></body>.
10+
11+
const body = document.querySelector('body');
12+
const newDiv = document.createElement('div');
13+
14+
newDiv.classList.add('notification');
15+
newDiv.textContent = 'Это мой первый динамически созданный элемент!';
16+
17+
body.prepend(newDiv); // МЕТОД prepend() т.е. в начало элемента
18+
19+
// Задание 2:
20+
// Дано:
21+
// - HTML-код: <div id="root"></div>
22+
// - Массив JavaScript: const skills = ['HTML', 'CSS', 'JavaScript', 'React'];
23+
// Задача:
24+
// Напиши код, который:
25+
// 1. Находит на странице <div id="root">.
26+
// 2. Создает элемент <ul>.
27+
// 3. Проходит по массиву skills в цикле. Для каждого элемента массива создает <li>, в который помещает название технологии.
28+
// 4. Добавляет все созданные <li> внутрь <ul>.
29+
// 5. Добавляет готовый <ul> со всеми элементами внутрь <div id="root">.
30+
// В результате на странице должен появиться маркированный список твоих навыков.
31+
32+
const skills = ['HTML', 'CSS', 'JavaScript', 'React'];
33+
34+
const root = document.getElementById('root');
35+
const list = document.createElement('ul');
36+
37+
list.classList.add('root__list');
38+
39+
for (const skill of skills) {
40+
const item = document.createElement('li');
41+
item.classList.add('root__item');
42+
item.textContent = skill;
43+
44+
list.append(item);
45+
}
46+
47+
root.append(list);
48+
49+
// Задание 3:
50+
// Нужно создать информационное сообщение и добавить его на страницу. Сообщение состоит из иконки (просто текст) и самого текста, обернутого в <span>.
51+
// Напиши код, который:
52+
// 1. Создает родительский элемент <div>.
53+
// 2. Создает дочерний элемент <span> с текстом "Действие выполнено.".
54+
// 3. За один вызов метода добавляет внутрь <div> сначала иконку в виде строки '✅ ' (обрати внимание на пробел после галочки), а сразу за ней — созданный <span>.
55+
// 4. Добавляет готовый <div> в <body>.
56+
// Намёк: Подумай, какой метод позволит тебе добавить и строку, и HTML-элемент за один вызов.
57+
58+
const wrap = document.createElement('div');
59+
const span = document.createElement('span');
60+
61+
wrap.classList.add('info', 'info-wrap');
62+
span.classList.add('info__span');
63+
64+
span.textContent = 'Действие выполнено.';
65+
66+
wrap.append('✅ ', span);
67+
body.append(wrap);

‎full-stack-dev/3-js-basic/17-dom/17-8-creating-new-elements/practice/style.css‎

Lines changed: 13 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,13 @@
1+
.notification {
2+
font-weight: bold;
3+
font-size: 18px;
4+
color: blueviolet;
5+
}
6+
7+
.root__item {
8+
color: darkgreen;
9+
}
10+
11+
.info__span {
12+
font-size: 18px;
13+
}

‎full-stack-dev/3-js-basic/17-dom/17-8-creating-new-elements/styles.css‎

Lines changed: 59 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,59 @@
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-wrap {
11+
margin-bottom: 20px;
12+
}
13+
14+
.input {
15+
border: 1px solid rgba(212, 212, 212, .05);
16+
border-radius: 10px;
17+
padding: 15px 16px;
18+
height: 56px;
19+
box-sizing: border-box;
20+
font-size: 18px;
21+
line-height: 21px;
22+
color: white;
23+
box-shadow: none;
24+
outline: none;
25+
background: rgba(255, 255, 255, .05);
26+
}
27+
28+
.button {
29+
display: inline-flex;
30+
justify-content: center;
31+
align-items: center;
32+
border: none;
33+
border-radius: 10px;
34+
padding: 20px 40px;
35+
box-sizing: border-box;
36+
text-align: center;
37+
color: white;
38+
background: #6c38cc;
39+
cursor: pointer;
40+
transition: all .2s;
41+
}
42+
43+
.button:hover {
44+
background-color: #844fe6;
45+
}
46+
47+
.notification {
48+
margin-bottom: 20px;
49+
font-size: 16px;
50+
color: white;
51+
}
52+
53+
.notification_hide {
54+
display: none;
55+
}
56+
57+
.panel-message {
58+
margin: 0;
59+
}

0 commit comments

Comments
 (0)