Published
Edited
Sep 20, 2020
Insert cell
Insert cell
Insert cell
{
if (!redemptions) return md`\`Not connected\``
yield md`\`Ready\``
for await (const r of redemptions()) {
const card = redemptionCard(r)
yield card.display
await card.wait()
yield md`\`Completed\``
}
}
Insert cell
Insert cell
function redemptionCard ({ timestamp, redemption }) {
const at = new Date(timestamp)
const { id, user, reward, status } = redemption
const url = `https://twitch.tv/${user.login}`
const done = html`<button>Done</button>`
const display = html`<div>
<a href="${url}">${user.display_name}</a> redeemed "${reward.title}"
${done}
</div>`
return {
display,
wait () {
return new Promise((resolve) => { done.onclick = resolve })
},
}
}
Insert cell
{
const options = Object.keys(responses).map((k) => md`<option>${k}</option>`)
return html`<select>${options}</select>`
}
Insert cell
responses = {
async function delayOne () {
await Promises.delay(1000)
}

async function delayTen () {
await Promises.delay(10000)
}

return {
delayOne,
delayTen,
}
}
Insert cell
Insert cell
Insert cell

Purpose-built for displays of data

Observable is your go-to platform for exploring data and creating expressive data visualizations. Use reactive JavaScript notebooks for prototyping and a collaborative canvas for visual data exploration and dashboard creation.
Learn more