Published
Edited
Mar 18, 2021
2 forks
2 stars
viewof newItemInput = Text()
// The button has an onclick handler that mutates the target. Since
// in this case the target is an array we make a copy, add the current newItemInput
// value and set the items array to the new value
update = {
const button = html`<button class="blueButton">Add item to list</button>`;
button.onclick = () => {
let newItems = [...mutable items, newItemInput];
mutable items = newItems;
};
return button;
}
// Here we show a message that the list is empty or otherwise
// return a ul tag with one nested li tag for each item
// Each item gets an a tag with an onclick handler that
// triggers setting items to a copy of items with the item at its index
// filtered out.
{ if (items.length === 0) {
return html`<p>There are no items in the list</p>`
}
else {
return html`<ul>${items.map(
(gain, index) => html`
<li>My name is ${gain}! <a href="#" onclick=${() =>
(mutable items = items.filter(
(item, filterindex) => filterindex != index
))}>🗑</a></li>
`
)}</ul>
`
}
}
// The mutable items array. This is what you would use for further calculations
mutable items = []
md`# Imports`
import {Text} from "@observablehq/inputs"
import {html} from "@observablehq/htl"
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.
