web лабки / 16 лб
.docxСтудент 410-і групи Бойко Є.А.
Лабораторна робота №16
Тема: Створення та додавання елементів на веб-сторінку.
Мета: навчитися застосовувати на практиці методи створення нових об’єктів, привласнення стилів, виведення на сторінці, а також змінювати їх порядок розташування.
Завдання
Код
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<title>List</title>
</head>
<body>
<style>
ul,
li {
list-style-type: square; /* Маркеры в виде квадрата */
list-style-position: outside; /* Маркеры размещаются за пределами текстового блока */
color: red; /* Цвет текста списка */
font-size: 40px;
}
ul:hover li {
opacity: 0.5;
}
ul li:hover {
opacity: 1;
color: black;
font-size: 50px;
}
div#content p{line-height:1.4;
}
div#header,#wrapper{
background:orange;
}
div#navigation{
float:right;
;
width:50%
}
div#extra{
float:right;
width:50%;
}
</style>
</head>
<body>
<div id="container">
<div id="header"><h1><center>лабораторна робота № 16<br>студента 410 групи Бойка Є. А.</h1></div>
<div id="wrapper">
<div id="content">
<p><strong><center>Варіант 3</strong><br> </p>Написати інтерфейс для створення маркованого списку. Пункти списку – це введені користувачем рядки у повідомленні prompt, значення яких записується у початок списку. При наведенні миші на пункти списку змінюється стиль оформлення.
Організувати кнопку для видалення пунктів з кінця списку
</div>
</div>
<div id="navigation">
<p>Нажми на кнопку чтобы удалить один пункт из списка<br></p>
<button id="btn">Удалить последний пункт</button>
</div>
<div id="extra">
<h1>маркированый список</h1>
<script>
/*создаем список*/
let ul = document.createElement('ul');
document.body.append(ul);
while (true) {
let data = prompt('Введите текст для элемента списка', '');
if (!data) {
break;
}
let li = document.createElement('li');
li.textContent = data;
ul.append(li);
}
let btn = document.querySelector('#btn');
btn.addEventListener('click', () => {
let listItems = ul.querySelectorAll('li');
listItems[listItems.length - 1].remove();
});
</script>
</div>
</body>
</html>
скріншот:
Висновок: навчився застосовувати на практиці методи створення нових об’єктів, привласнення стилів, виведення на сторінці, а також змінювати їх порядок розташування