Add a Habit Tracker to your Thunkable Project

Tutorials and DIY Guides Staff Made Tutorials
1

Back in 2021 the theme for #wdc 14 was to build your own habit tracker app. The entries were equal parts hilarious and ingenious so you should definitely check them out here. The idea for an habit tracking app has been in my head since then and I had the opportunity to revisit it when I was speaking at a conference recently. Sharing it with the Community so that you can modify and improve in whatever way you see fit.

Inspiration

One of my favourite ways to visualise and measure progress is with this contributions graph that is commonly seen on Github:
image

Turns out it’s also surprisingly easy to re-create this in Thunkable.

habit_tracker

Getting Started

You need to do three things in order to get this functionality into your app.

  1. Create a list so that you can store your days of progress
  2. Display the contents of this list in a label in your app.
  3. Update the list each day

1. Create List

When the app opens up for the first time initialise the stored variables. In this case we’re tracking across a month with 31 days but you can use any value here. Is you’re doing a 14 day fitness program use 14, if it’s 100 days of no-code then use 100. The purple displayProgress function is described in the next step.

lists
lists1770×746 88.6 KB

2. Display the list

To display the list we need to go through each item, one at a time, and show that item in our label. This can be broken down into the following steps:

a) Clear out the existing contents of the lable
b) loop through the daysOfProgress list, one day at a time
c) Join each day on to the end of all the previous days in the label
d) When we reach the end of the week (i.e. 7 days) …
e) Add a new line into the label.

display_list
display_list1870×798 126 KB

3. Update the list

Now that we have our displayProgress function this is the easy part.

When the Yes button is clicked we increment the current day by one and replace the grey square with a green square, and for the No button we do the exact same thing, only the grey square is replaced by a black one. Calling the displayProgress function visualises this in the label on screen.

update_lists
update_lists1636×736 89.1 KB

How would you use something like this in your app? How about getting users to hit streaks of using your app every day? Would love to know what other ideas or questions you might have.

Remix

Here’s a link to the finished project so you can take a closer look:
https://x.thunkable.com/projectPage/62e3ea973db7c60226eb2e68

5 Likes