Build a Task Manager
Build a small Windows task manager that accepts a task, adds it to a live list, and clears the box for the next one.
What you will learn
You will create a window, lay out rows and a column, configure a text box and button, handle a click, and create a new text control at runtime.
Before you start
You need Otter on Windows and a folder where you can save a .ot file. This is a native Windows application, so run it with otter tasks.ot rather than the browser Run button.
Verify your installation
1. Create the window and the input area
Start a new file named tasks.ot. A window holds the whole application. The header and input rows keep related controls together. The empty column below them becomes the live task list.
Otter
create window into app
app has title "Otter Tasks"
app has width 420
app has height 520
padding of app is 20
spacing of app is 12
create row into header
header has width full
create text into titleText
titleText has text "My Tasks"
put titleText in header
put header in app
create row into inputRow
inputRow has width full
inputRow has spacing 8
create text box into taskInput
placeholder of taskInput is "What needs to be done?"
taskInput has width 280
create button into addButton
addButton has text "Add"
put taskInput in inputRow
put addButton in inputRow
put inputRow in app
create column into taskList
taskList has width full
taskList has spacing 8
put taskList in app
2. Add a task when the button is clicked
The event reads the text box. It ignores an empty submission. For a real task, it creates a text control, places it in the list, and clears the input ready for another task.
Otter
when addButton clicked
task is text of taskInput
if task is not ""
create text into item
item has text task
put item in taskList
text of taskInput is ""
.
.
3. Show the window
Finish with show app. Save the file, open PowerShell in that folder, and run otter tasks.ot. Type a task and select Add; a new line should appear in the list.
Otter
show app
Common problems
If Otter cannot find tasks.ot, use cd to move PowerShell into the folder containing the file. If no task appears, make sure the event starts with when addButton clicked and the two periods close the if block and the event.
Try next
Add a second heading, change the button text, or give each new task a prefix such as - . Once that feels comfortable, try a counter or another input example.
Download the complete tasks.ot source
Explore more examples