Skip to content

Instantly share code, notes, and snippets.

/hyperapp-todo-app-demo.markdown

Created June 29, 2017 16:39
Show Gist options

  • Select an option

    Learn more about clone URLs
  • Save anonymous/4f7f21baac7107345737b09cdccddf1d to your computer and use it in GitHub Desktop.

Select an option

Learn more about clone URLs
Save anonymous/4f7f21baac7107345737b09cdccddf1d to your computer and use it in GitHub Desktop.
Download ZIP
hyperapp todo app demo
Raw
script.babel
const {app, h} = hyperapp
/** @jsx h */
const state = {
in: '',
components: []
}
const mainView = (state, actions) => (
<main>
<form onsubmit={actions.add}>
<input id="in" type="text" onkeyup={actions.updateIn}></input>
<input type="button" value="Add to the list" onclick={actions.add}></input>
</form>
{state.components.map((element, index) => (
<h1 onclick={(e) => actions.remove(index, e)}>{element}</h1>
))}
</main>
)
app({
state: state,
view: mainView,
actions: {
updateIn: (state, actions, {target}) => {
state.in = target.value
return state
},
add: (state, actions, e) => {
e.preventDefault()
document.getElementById('in').value = ''
if (state.in != '') state.components.push(state.in.trim())
state.in = ''
return state
},
remove: (state, actions, index, e) => {
state.components.splice(index, 1)
return state
}
}
})
Raw
scripts
<script src="https://unpkg.com/hyperapp"></script>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment