27 lines
1.0 KiB
HTML
27 lines
1.0 KiB
HTML
<!doctype html>
|
|
<html lang="en"><meta charset="utf-8"><title>Cthulhu Browser Probe</title>
|
|
<body>
|
|
<button autofocus>Choose language</button>
|
|
<h1>Video catalog</h1>
|
|
<main id="catalog"></main>
|
|
<script>
|
|
const catalog = document.getElementById('catalog');
|
|
for (let index = 0; index < 600; index++) {
|
|
const card = document.createElement('article');
|
|
card.innerHTML = `<h2>Movie ${index}</h2><a href="#movie-${index}">Watch movie ${index}</a><p>Catalog description ${index}</p><button>Details ${index}</button>`;
|
|
catalog.appendChild(card);
|
|
}
|
|
document.addEventListener('keydown', event => {
|
|
if (event.key === 'F9') {
|
|
catalog.firstElementChild.querySelector('h2').textContent = 'Updated movie';
|
|
catalog.lastElementChild.remove();
|
|
const card = document.createElement('article');
|
|
card.innerHTML = '<h2>New movie</h2><button>Play new movie</button>';
|
|
catalog.appendChild(card);
|
|
document.querySelector('button').textContent = 'Catalog updated';
|
|
event.preventDefault();
|
|
}
|
|
});
|
|
</script>
|
|
</body></html>
|