<div id="app"></div>
window.xs = window.xstream.default;
window.xs.fromEvent = window.fromEvent.default;
const { div, label, input, hr, h1, makeDOMDriver } = CycleDOM;
function main(sources) {
const inputEv$ = sources.DOM.select("input.field").events("input");
const name$ = inputEv$.map(ev => ev.target.value).startWith("");
const domSink = name$.map(value =>
div([
label(["Name: "]),
input(".field", { attrs: { type: "text" } }),
hr(),
h1(`hello ${value}!`)
])
);
const sinks = { DOM: domSink };
return sinks;
}
const drivers = {
DOM: makeDOMDriver("#app")
};
Cycle.run(main, drivers);
View Compiled
This Pen doesn't use any external CSS resources.