Your First App: To-Do List
Build a fully functional To-Do List application with add, complete, and delete functionality. Learn forms, events, data management, and UI design patterns.
What You'll Build
Features
- Add new tasks with text input
- Mark tasks as complete/incomplete
- Delete individual tasks
- Clear all completed tasks
- Task counter display
Before You Start
This tutorial assumes you've completed the Quick Start Guide and understand the basics of adding controls and writing event handlers.
If you're completely new, start with the Quick Start tutorial first!
Create a New Project
Open app.webvbstudio.com and create a new project:
- 1 Click File → New Project from the menu
- 2 Name your project
ToDoApp - 3 Choose your preferred language (VB6 or Python)
- 4 Click Create
Set Up the Form
First, let's configure the form itself. Click on the form background (not on any control) and set these properties in the Properties panel:
| Property | Value | Description |
|---|---|---|
| Caption | My To-Do List | Window title |
| Width | 400 | Form width in pixels |
| Height | 500 | Form height in pixels |
| BackColor | #1a1a2e | Dark background |
Add the Controls
Drag these controls from the Toolbox onto your form. Position them roughly as shown:
Label (Title)
Displays the app title at the top
lblTitle Caption: 📝 To-Do List FontSize: 18 ForeColor: #ffffff TextBox (Input)
Where users type new tasks
txtNewTask Text: (empty) Width: 280 CommandButton (Add)
Adds a new task to the list
cmdAdd Caption: Add Task BackColor: #10b981 ListBox (Task List)
Displays all the tasks
lstTasks Width: 360 Height: 250 CommandButtons (Actions)
Three buttons for task management
cmdComplete Caption: ✓ Complete cmdDelete Caption: 🗑 Delete cmdClearDone Caption: Clear Completed Label (Status)
Shows task count at the bottom
lblStatus Caption: 0 tasks ForeColor: #888888 Write the Application Code
Now let's add the code that makes everything work. Double-click on the form to open the code editor and add all the event handlers.
' Store completed tasks
Dim completedTasks() As String
Dim completedCount As Integer
' Initialize the app
Private Sub Form_Load()
completedCount = 0
UpdateStatus
End Sub
' Add a new task
Private Sub cmdAdd_Click()
Dim taskText As String
taskText = Trim(txtNewTask.Text)
If taskText "" Then
lstTasks.AddItem taskText
txtNewTask.Text = ""
txtNewTask.SetFocus
UpdateStatus
End If
End Sub
' Allow Enter key to add task
Private Sub txtNewTask_KeyPress(KeyAscii As Integer)
If KeyAscii = 13 Then
cmdAdd_Click
KeyAscii = 0
End If
End Sub
' Mark selected task as complete
Private Sub cmdComplete_Click()
Dim idx As Integer
idx = lstTasks.ListIndex
If idx >= 0 Then
Dim taskText As String
taskText = lstTasks.List(idx)
' Toggle completion
If Left(taskText, 2) = "✓ " Then
' Remove checkmark
lstTasks.List(idx) = Mid(taskText, 3)
Else
' Add checkmark
lstTasks.List(idx) = "✓ " & taskText
End If
UpdateStatus
End If
End Sub
' Delete selected task
Private Sub cmdDelete_Click()
Dim idx As Integer
idx = lstTasks.ListIndex
If idx >= 0 Then
lstTasks.RemoveItem idx
UpdateStatus
End If
End Sub
' Clear all completed tasks
Private Sub cmdClearDone_Click()
Dim i As Integer
For i = lstTasks.ListCount - 1 To 0 Step -1
If Left(lstTasks.List(i), 2) = "✓ " Then
lstTasks.RemoveItem i
End If
Next i
UpdateStatus
End Sub
' Update the status label
Private Sub UpdateStatus()
Dim total As Integer
Dim completed As Integer
Dim i As Integer
total = lstTasks.ListCount
completed = 0
For i = 0 To lstTasks.ListCount - 1
If Left(lstTasks.List(i), 2) = "✓ " Then
completed = completed + 1
End If
Next i
lblStatus.Caption = total & " tasks • " & completed & " completed"
End Sub# Initialize the app
def Form_Load():
update_status()
# Add a new task
def cmdAdd_Click():
task_text = txtNewTask.Text.strip()
if task_text:
lstTasks.AddItem(task_text)
txtNewTask.Text = ""
txtNewTask.SetFocus()
update_status()
# Allow Enter key to add task
def txtNewTask_KeyPress(key_ascii):
if key_ascii == 13:
cmdAdd_Click()
return 0
return key_ascii
# Mark selected task as complete
def cmdComplete_Click():
idx = lstTasks.ListIndex
if idx >= 0:
task_text = lstTasks.List[idx]
# Toggle completion
if task_text.startswith("✓ "):
lstTasks.List[idx] = task_text[2:]
else:
lstTasks.List[idx] = "✓ " + task_text
update_status()
# Delete selected task
def cmdDelete_Click():
idx = lstTasks.ListIndex
if idx >= 0:
lstTasks.RemoveItem(idx)
update_status()
# Clear all completed tasks
def cmdClearDone_Click():
for i in range(lstTasks.ListCount - 1, -1, -1):
if lstTasks.List[i].startswith("✓ "):
lstTasks.RemoveItem(i)
update_status()
# Update the status label
def update_status():
total = lstTasks.ListCount
completed = sum(1 for i in range(total) if lstTasks.List[i].startswith("✓ "))
lblStatus.Caption = str(total) + " tasks • " + str(completed) + " completed"Understanding the Code
Adding Tasks
The cmdAdd_Click handler gets the text from the TextBox, adds it to the ListBox using AddItem, then clears the input.
Completing Tasks
We use a checkmark emoji (✓) prefix to indicate completion. The code toggles this prefix on/off when you click Complete.
Deleting Tasks
ListIndex returns the currently selected item's index (-1 if nothing selected). RemoveItem deletes it.
Clearing Completed
We loop backwards through the list (important!) to avoid index shifting issues when removing items.
Run and Test Your App
Press F5 to run your application. Test all the features:
Test Checklist
- Type a task and click "Add Task"
- Press Enter to add a task quickly
- Select a task and click "Complete"
- Click "Complete" again to uncomplete
- Delete a task
- Clear all completed tasks
- Verify task count updates correctly
Expected Behavior
- • Empty input should not add blank tasks
- • Input field clears after adding
- • Completed tasks show ✓ prefix
- • Status updates in real-time
- • Buttons disabled states work
Bonus: Enhancements
Want to take your app further? Try adding these features:
🎨 Visual Improvements
' Style completed tasks differently
lstTasks.List(idx) = "✓ " & taskText
' In properties, enable multi-line styling Add strikethrough or color changes for completed items.
💾 Save to Local Storage
' Save tasks when app closes
Private Sub Form_Unload()
SaveSetting "ToDoApp", "Tasks", lstTasks.Text
End Sub Persist tasks between sessions using SaveSetting/GetSetting.
📅 Add Due Dates
Add a DatePicker control and store dates with tasks. Sort by due date and highlight overdue items.
🏷️ Categories/Tags
Add a ComboBox to categorize tasks (Work, Personal, Shopping, etc.) and filter the list by category.
Congratulations!
You've built a complete, functional To-Do List application! You now understand forms, controls, events, and data manipulation in WebVB Studio.