📜JavaScript developer.
🐲RPG fan.
📚Storyteller and 🕹game developer.
👨Father and Husband.
Published
Edited
Oct 12, 2021
1 star
String.prototype.replaceAllHow To Use Local JS Files in Your NotebooksImport JavaScript Class from Github GistHello, sortablejsHello, JS-YAMLTesting bitECS for TempestNew Options for Images in ObservableTest Message ChannelJavaScript Class ExplorationHow to: filter a data set via search + suggestionsHow to Center a DivRun Some Code on Button ClickUsing JSON PlaceholderScrubber TestExecutable JS FileAttachment TestHello, HandelData from Google Spreadsheets test 001Testing fetch with runkitTesting ecsyjsMove a Div in JavaScript
How To: Create and Update HTML Views
output = html`<div>Like <strong>this</strong></div>`
Using the <b>HTML</b> cell type
Using the Markdown cell type
{
let foo = document.createElement("div");
foo.innerHTML = "Via native <b>JavaScript</b>"
return foo;
}
{
// create a HTML block
const out = html`<div>Some HTML: <span></span></div>`
// then yield it
yield out;
// you can then manipulate it
out.querySelector("span").innerHTML="<b>(Added later)</b>"
// note out is a local variable here.
}
{
const out=html`<span>The value is ${range}`
yield out;
}
Move the slider to see the value change in HTML
viewof range = Inputs.range([0, 100], {label: "Amount"})
<div class="myClass">Hey, I'm some HTML!</div>
html`<style>
.myClass {
background-color: ${color};
padding: 8px;
}
</style>`
<style>
div {
font-family: sans-serif;
}
</style>
added = "I got added" // each var it's own cell
{
const out=html`<div><b>${added}</b></div>`;
yield out;
}
DOM Poke Way
{
const out=html`<div><b></b></div>`;
yield out;
out.querySelector("b").appendChild(html`<i>I got added</i>`)
}
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.
