Skip to content

Instantly share code, notes, and snippets.

@SaltyAom
Last active August 12, 2024 10:23
Show Gist options
  • Save SaltyAom/886dfc00065d4fb903f27471c91d4883 to your computer and use it in GitHub Desktop.
Save SaltyAom/886dfc00065d4fb903f27471c91d4883 to your computer and use it in GitHub Desktop.
Wake up babe, new code golf challenge has just drop
<!DOCTYPE html>
<html>
<head>
<title>ES6 Demonstration</title>
<style>
.pager { margin: 5px 10px; user-select: none; -webkit-user-select: none; font-family: sans-serif; }
.pager .page { display: inline-block; padding: 0px 5px; cursor: pointer; }
.pager .page:active { color: red; }
.selected { font-weight: bold; color: red; }
.paged-content { font: bold 250% sans-serif; padding: 25px 10px; }
</style>
<script>
let all = e => document.querySelectorAll(e),
map = (e, fn) => {
for(let el of all(e))
fn(el)
},
on = (e, name, fn) => e.addEventListener(name, fn)
on(document, "DOMContentLoaded", () => {
let content = all('#content')[0],
box = (name = '') => `</span><span class="page${name}">`
map('.pager', el => el.innerHTML = `<span>Page: ${box(' selected')}${
[1,2,3,4,5].join(box())
}</span>`)
map('.page', page => on(page, 'click', () => {
const index = page.textContent
content.textContent = `Page ${index}`
map('.page.selected', e => e.classList.remove('selected'))
map(`.page:nth-child(${+index + 1})`, e => e.classList.add('selected'))
}))
content.textContent = 'Page 1'
})
</script>
</head>
<body>
<div id="top_pager" class="pager"></div>
<div id="content" class="paged-content"></div>
<div id="bottom_pager" class="pager"></div>
</body>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment