gistfile1.txt

This application displays a list of things the user should do (tasks). It allows the user to add tasks to the list, delete them or mark them as done.

To add a task to a list, the user types the name of their task into an input box and clicks a button or hits enter. When they do this, the input box becomes blank again, and the item appears at the top of the list.

Each task in the list shows:
the name of the task
a checkbox to mark it as done or not done
a button to delete the task from the list

when the done checkbox is checked, the todo is marked as done by making the name of the task appear with a line through it, and making the checkbox checked. same goes for unchecking it.

when the delete button is pressed, the task disappears from the list.




Types

NewTask :: String
Tasks :: [Task]
Task :: { TaskName, Done }
TaskName :: Text
Done :: YesOrNo

Initial state

tasks: []
new-task: “”

Components

App
     Task creator
     Task list


Task creator
     type: Form
     on submit: take value of new-task, add it to front of tasks

     Task name field
     Add task button

Task name field
     type: Text field
     text: new-task
     on change: set new-task to be what is in text box
     on enter: submit form

Add task button
     type: Button
     on click: submit form



Task list
     type: list
     list items: tasks

     Task

Task
     Task name
     Task done toggle
     Task deleter

Task name
     knows about: task
     type: Text
     text: task.name

Task done toggle
     knows about: task
     type: Checkbox
     checked: task.done
     on change: set task.done to whatever the checkbox was changed to

Task deleter
     knows about: task
     type: Button
     text: “Delete"
     on click: remove task from tasks where task-in-list.id is task.id

predefined components: form, list, text field, button, text, checkbox