📜JavaScript developer.
🐲RPG fan.
📚Storyteller and 🕹game developer.
👨Father and Husband.
Published
Edited
Oct 22, 2021
1 star
{
// click the arrow on the right to 'blow away' this instance and re-run this code
// this would have happened automatically every time we changed "range" if we hadn't used "mutable".
const c = html`<div class="wrapper"><canvas id="cnv"></canvas>`;
yield c;
const k = Kaboom({
canvas: c.querySelector('#cnv')
})
let inputVal = k.add([
k.text(mutable range, 32),
k.pos(100, 100),
]);
let randomNumber = k.add([
k.text(Math.floor(Math.random() * 1000), 32),
k.pos(100, 40)
])
let updatingNumber = k.add([
k.text("Static Text", 16),
k.pos(0,0),
k.color(255,0,255)
])
k.action(() => {
inputVal.text= mutable range;
});
}
<style>
.wrapper {
border: 1px solid black;
padding: 4px;
}
</style>
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.
