{
$(function () {
// global state
let count = 0
let count_plus = 0
let count_minus = 0
function plus() {
// state update
count ++
count_plus ++
// rendering
$('#total').html(count)
$('#plus').html(`+ (${count_plus})`)
}
function minus() {
// state update
count --
count_minus ++
// rendering
$('#total').html(count)
$('#minus').html(`- (${count_minus})`)
}
$('#plus').on('click', plus);
$('#minus').on('click', minus);
})
return html`
<h1 id="total">0</h1>
<button id="minus">- (0)</button>
<button id="plus">+ (0)</button>`
}
app.start(document.createElement('div'), state, view, update).element
state = ({
count: 0,
count_plus: 0,
count_minus: 0
})
view = ({ count, count_plus, count_minus }) => html`
<h1>${count}</h1>
<button onclick="app.run('minus')">- (${count_minus})</button>
<button onclick="app.run('plus')">+ (${count_plus})</button>`
minus = (state) => ({ ...state,
count: state.count - 1,
count_minus: state.count_minus + 1
})
plus = (state) => ({ ...state,
count: state.count + 1,
count_plus: state.count_plus + 1
})
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.
