Skip to content

Instantly share code, notes, and snippets.

@o-az

o-az/index.html

Created August 12, 2024 06:18
Show Gist options
  • Save o-az/24e464e97fcc00f551f999bdb0e0957f to your computer and use it in GitHub Desktop.
Save o-az/24e464e97fcc00f551f999bdb0e0957f to your computer and use it in GitHub Desktop.
Download ZIP
Raw
index.html
<!DOCTYPE html>
<html>
<head>
<title>ES6 Demonstration</title>
<style>
.pager { margin: 5px 10px; user-select: none; font-family: sans-serif; }
.page { display: inline-block; padding: 0 5px; cursor: pointer; }
.page:active, .selected { color: red; }
.selected { font-weight: bold; }
#content { font: bold 250% sans-serif; padding: 25px 10px; }
</style>
<script>
const content = { page: 1, pages: 5 };
const renderContent = () => {
document.getElementById('content').innerHTML = `Page ${content.page}`;
};
const renderPager = () => {
const pagerHTML = 'Page: ' + Array(content.pages).fill()
.map((_, i) => `<span class="page${i + 1 === content.page ? ' selected' : ''}">${i + 1}</span>`)
.join('');
document.querySelectorAll('.pager').forEach(pager => pager.innerHTML = pagerHTML);
};
document.addEventListener('DOMContentLoaded', () => {
renderContent();
renderPager();
document.body.addEventListener('click', e => {
if (e.target.classList.contains('page')) {
content.page = parseInt(e.target.textContent);
renderContent();
renderPager();
}
});
});
</script>
</head>
<body>
<div class="pager"></div>
<div id="content"></div>
<div class="pager"></div>
</body>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment