top of page
To Do List

To Do List

Keep track of your tasks with a To Do List

Intermediate.png

Intermediate

4K

Published:

January 19, 2021

Girl Enjoying her Drink

by

Anchor 1
Hire a Developer

Example Description

In this example, we allow site visitors to keep track of their tasks by using a to-do list. Visitors can add tasks to the list, mark tasks as complete, and remove completed tasks.

Example Code

Tab 1

.

Tab 2

.

Tab 3

.

This code solution can be complicated.

How We Built It


Collection Data


We built a MyTasks collection with the following fields:

  • Title: name of the task

  • isComplete: indicates if the task has been completed


For the sake of simplicity, the collection’s permissions currently allow anyone to modify the data, but when using this example in your site it is always preferable to grant only the minimum required permissions for accessing your collection.


Page Elements


In our main index page we added the following elements:


  • TextInput: for entering text for a new task.

  • Button: for inserting a new task into the list.

  • Repeater: for displaying the current tasks. Each item contains a text element that holds the title of the task and a button for marking the task as completed.

  • Button: for removing all completed tasks from the list.

  • Image with a loader gif: displays while waiting for an operation to complete.


Backend Code


We handle all operations related to the collection in the data.jsw web module. The web module includes functions for getting all current tasks, inserting a new task, updating a task and removing a task. It is always recommended to use backend code when accessing a collection, due to security reasons.


Page Code


We registered the following event handlers:


  1. onItemReady: runs for every task shown in the repeater. For each task we need to show it as completed or uncompleted, according to its status, and to register the matching radio button to the changeCompletedStatus event handler.

  2. createNewTask: runs either when the Add button is clicked or when the Enter key is pressed while the focus is on the TextInput element.

  3. clearCompletedTasks: runs when the Clear Completed button is clicked.


We call fetchData(), which populates the repeater with the tasks stored in the collection. While the operation is running, the loader gif is shown.

APIs We Used

Non-code example.

Non-code example.

Non-code example.

Non-code example.

Non-code example.

Non-code example.

Related Articles

Article Link

Hire a Developer

Velo solutions are powerful tools, but building them on your own can be challenging. Let an experienced Velo development shop build it for you, so you can keep working on your site or business.

Related Examples

Did this help?

Yes

|

No

Thanks for your feedback!

Mega Search

Mega Search

Filter a repeater using multiple input components.

Intermediate.png

Advanced

Search a Database

Search a Database

Let visitors quickly search your site content.

Intermediate.png

Intermediate

To-Do List with SQL

To-Do List with SQL

Manage tasks in a to-do list using the wix-data-sql Velo package

Intermediate.png

Intermediate

Anchor 2

This website was designed with Velo by Wix

bottom of page