Published
Edited
Jun 23, 2020
1 star
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
App = freedom(({ content }) => {
Div``(
{ className: 'viewchange', style: { backgroundColor: 'magenta' } },
() => {
Text('HEADER');
}
);

if (content !== '') {
let key = 0;
for (let char of content) {
Div`${key++}`(
{
className: 'viewchange',
style: { backgroundColor: 'lightblue' }
},
() => {
if (char !== 'a') {
Div``(() => {
Text(`${char} = ${char.charCodeAt(0)}`);
});
} else {
Div``(() => {
Text(`${char} = A`);
});
}
}
);
}
} else {
Div``(
{ className: 'viewchange', style: { backgroundColor: 'yellow' } },
() => Text(`NO CONTENT`)
);
}

Div``(
{ className: 'viewchange', style: { backgroundColor: 'lightgreen' } },
() => {
Text('FOOTER');
}
);
})
Insert cell
Insert cell
Insert cell
viewof content = html`<input type="text" />`
Insert cell
render(
this,
jsx_stupid`
<${shadow.div} styleSheets=${[app_css]}>
<${App} content=${content} />
</${shadow.div}>
`
)
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