To-Do List

In this Example, you’ll learn to use the Checkbox and Loading Indicator Default Components to create a task list.

Learn more about to-do list interactions

To-do lists have been a part of our daily lives for hundreds of years. In the beginning, they were of course jotted down on paper, but as people started to realize how effective they were at helping us get things done - the humble to-do list started receiving more attention. From paper to digital, many focused on how to create the ultimate task manager apps that were easy to use and encouraged productivity.

The nifty thing about to-do lists is that they’re easy to understand, and they can be used for all manner of purposes. Whether you’re in a business setting, or just need something done around the house, to-do lists come in handy in a variety of contexts.

Why a to-do list, and not a project management tool?

Depending on what you want it for, you might just want to commit to a full-fledged project management design as opposed to a simple to-do list. Larger companies and business-related solutions, for instance, might require the greater rigor and time management features featured in your average PM app.

But to-do lists are simple and straightforward; you don’t need all of those extra features if you just need to keep track of personal tasks, for instance. It’s this audience that you should probably keep in mind for much of your to-do list app design work.

Building a sample to-do list design

If you’re building a to-do list website (whether it’s a Javascript to-do list or a jQuery to-do list, or any other programming language), you need to remember the fundamentals:

• The ability to easily create, edit, delete, and check off to-do list items
• Scheduling deadlines for to-do items, and a way to indicate whether you’ve passed that deadline
• The ability to keep your to-do lists online for easy access on any device

Regardless of how you build your to-do list, Javascript or otherwise, you’ve got to include these factors at the very least, as well as whatever additional components, features, and aesthetic set dressing your app or site will need

Common to-do list items

Most to-do list templates today consist of a few recognizable components. The task list itself is typically a list of created text items next to a checkbox that you toggle to the active state once you have completed a task. Everyone knows the feeling of crossing an item off your assigned tasks list, the best! Once your task is completed it will be removed from your main task list and you never have to think about it again.

How to create an interactive to-do list in Framer

In Framer you can use two of the Default Components to help you re-create this type of interaction. First create a screen that holds all of your tasks, you can use a textbox and insert a checkbox component next to each item. From the first screen, choose one list item that you will tap to check off and remove. In the second screen, show every list item including the selected item in its active state. Next, you will need the Loading Indicator Default Component. Place the loading component anywhere in the frame, it will be hidden in preview. Set the loading component to a timeout of 0.5, this will create the interaction of removing an item from your tasks list. Finally, in the last screen show every list item except the one you want to show the removing from list interaction.