ingredients = [
{'id': 'bowl', 'value': '🥣'},
{'id': 'tomato', 'value': '🍅'},
{'id': 'cheeze', 'value': '🧀'}
]
IngredientComponent = (({ ingredients, ok, ko }) => {
const [count, setCount] = React.useState(new Set());
const [icon, setIcon] = React.useState(ko);
const hideElement = id => (after, delay) => setTimeout(_ => {
document.querySelector(id).style['visibility'] = 'hidden'
after()
}, delay * 1000)
const animate = ({ elem, className, destination }) => {
const x = distanceBetweenCircles(document.querySelector(destination), elem)
document.documentElement.style.setProperty('--translate', x/2 + 'px')
elem.classList.add(className)
return hideElement('#' + elem.id)
}
const clickFunc = event => {
const elem = event.target
const className = 'moveToResult'
if (elem.classList.contains(className)) return
const afterAnimation = animate({ elem, className, destination: '#result'})
afterAnimation(() => count.size === ingredients.length && setIcon(ok), /* --animation-delay */ 1.8)
setCount(new Set(count.add(event.target.innerText)))
}
return jsx({ingredients, count, clickFunc, icon})`
<div className="recipe">
{ingredients.map(x =>
<div id={x.id} className='button' onClick={clickFunc}>{x.value}</div>
).reduce((acc, curr) => acc.concat(curr,
<div className="button operator">+</div>
), []).slice(0,-1)}
<div className="button operator">=</div>
<div id="result" className="button operator">{icon}</div>
</div>
`
})
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.
