<div id="app"></div>
window.xs = window.xstream.default;
window.xs.fromEvent = window.fromEvent.default;
const { div, label, input, button, p, makeDOMDriver } = CycleDOM;
function view(state$) {
return state$.map(state => {
return div([
div(".height-slider", [
label(`Height: ${state.height} cm`),
input(".height", {
attrs: { type: "range", min: 140, max: 220, value: 150 }
})
]),
div(".weight-slider", [
label(`Weight: ${state.weight} kg`),
input(".weight", {
attrs: { type: "range", min: 40, max: 100, value: 50 }
})
]),
p([label(`BMI: ${state.bmi}`)])
]);
});
}
function intent(sources) {
const domSource = sources.DOM;
const height$ = domSource
.select(".height")
.events("input")
.map(ev => ev.target.value);
const weigth$ = domSource
.select(".weight")
.events("input")
.map(ev => ev.target.value);
return {
height: height$,
weight: weigth$
};
}
function model(intents) {
const height = intents.height.startWith(165);
const weight = intents.weight.startWith(58);
const state$ = xs.combine(height, weight).map(([h, w]) => {
const hm = h * 0.01;
const bmi = Math.round(w / (hm * hm));
return {
height: h,
weight: w,
bmi
};
});
return state$;
}
function main(sources) {
const actions = intent(sources);
const state$ = model(actions);
const vdom$ = view(state$);
return { DOM: vdom$ };
}
const drivers = {
DOM: makeDOMDriver("#app")
};
Cycle.run(main, drivers);
View Compiled
This Pen doesn't use any external CSS resources.