Skip to content

Instantly share code, notes, and snippets.

@luqmaan
Last active April 12, 2017 18:38
Show Gist options
  • Save luqmaan/b055f4c02d9d39f00146253f415453ca to your computer and use it in GitHub Desktop.
Save luqmaan/b055f4c02d9d39f00146253f415453ca to your computer and use it in GitHub Desktop.
Slightly interactive UI + templating with ES6. No handlebars, no react.
const stringToDom = (string) => document.createRange().createContextualFragment(string);
function viewTest(test) {
window.location.hash = test.id;
document.querySelector('#viewer').innerHTML = `
<iframe src="${test.link}"></iframe>
`;
}
fetch('/tests')
.then((res) => res.json())
.then((tests) => {
const $nav = document.querySelector('#nav');
tests.forEach((test) => {
const node = stringToDom(`
<div class="test">
<button class="view">${test.name}</button>
<div class="description">${(test.description || '').trim()}</div>
</div>
`);
node.querySelector('button.view').onclick = () => viewTest(test);
$nav.appendChild(node);
});
viewTest(tests.find((test) => test.id === window.location.hash.replace('#', '')) || tests[0]);
});
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment