dialog.showModal();
.card {height: 20rem}
.card:hover{ transform: scale(3); height: 22rem; }
.card button { display: none; }
.card:hover button { display: block; }ducment.querySelector('form').addEventListener('submit',(e)=>{
/* Здесь можно читать значения элементов форм */
// с файлами так
let file = document.forms['formName']['avatar'].files[0];
//file.name == "photo.png"
//file.type == "image/png"
//file.size == 300821
// Если нужно остановить отправку формы, надо выполнить эти две строчки
e.preventDefault();
e.stopPropagation();
});
// Шаг 1: Создаём запрос серверу
let response = await fetch('https://api.github.com/repos/javascript-tutorial/en.javascript.info/commits?per_page=100');
const reader = response.body.getReader();
// Шаг 2: получаем размер контента/файла
const contentLength = +response.headers.get('Content-Length');
// Шаг 3: читаем данные
let receivedLength = 0; // данных получено (байт)
let chunks = []; // массив кусочков файла
while(true) {
const {done, value} = await reader.read();
if (done) {
break;
}
chunks.push(value);
receivedLength += value.length;
console.log(`Получено ${receivedLength} байт из ${contentLength} байт`)
}
// Шаг 4: соединяем кусочки в единный Uint8Array
let chunksAll = new Uint8Array(receivedLength); // (4.1)
let position = 0;
for(let chunk of chunks) {
chunksAll.set(chunk, position); // (4.2)
position += chunk.length;
}
// Шаг 5: декодируем в нужный формат
let result = new TextDecoder("utf-8").decode(chunksAll);
// Готово!
let commits = JSON.parse(result);
alert(commits[0].author.login);<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<title>Многоуровневый список покупок</title>
<style>
body { padding: 1rem; background: #ffffdd;}
body > ul {margin: 1rem; padding: 1rem; background: #ffaaff;}
body > ul > li {margin: 1rem; padding: 1rem; background: #ffddff;}
body > ul > li > ul {margin: 1rem; padding: 1rem; background: #ddffff;}
body > ul > li > ul > li { margin: 1rem; padding: 1rem; background: #ffdddd; }
body > ul > li > ul > li ul {margin: 1rem; padding: 1rem; background: #ddddff;}
body > ul > li > ul > li ul li {margin: 1rem; padding: 1rem; background: #ddffdd;}
</style>
</head>
<body>
<h1>Список покупок</h1>
<ul>
<li>Еда
<ul>
<li>Рыба
<ul>
<li>Филе форели, 2 шт</li>
<li>Карась, 5 шт</li>
<li>Окунь, 10 шт</li>
</ul>
</li>
<li>Молочные продукты
<ul>
<li>Сметана</li>
<li>Йогурт
<ul>
<li>Жирный</li>
<li>Обезжиренный</li>
</ul>
</li>
</ul>
</li>
</ul>
</li>
<li>Вещи
<ul>
<li>Игрушки
<ul>
<li>Когтеточка</li>
<li>Мячи, 2 шт</li>
</ul>
</li>
<li>Уход
<ul>
<li>Расчёска для шерсти</li>
<li>Мусс для усов</li>
</ul>
</li>
</ul>
</li>
</ul>
</body>
</html>