Working with Times and Dates in Thunkable X


#1

One feature that you often find yourself in need of when programming is the ability to work with dates and times.

In this first tutorial we’ll learn how to access the World Clock API (thanks to @actech for sharing this resource) and display a specific part of the response to the user.

Click to remix the “Tempus” app

Design

The design for this app is very simple, requiring just 6 components:

49

Everything put together looks like this:

1. Create a variable

Let’s start by creating a local variable in our app to store the response from the API.

58

JSON is a common data interchange format, and is used widely to transmit information. Thankfully for us, Thunkable makes it really easy to work with JSON data.

2. Make an API Request

Some APIs will require you to enter a username and password, or an access token, but this is not the case for the World Clock API.

Click on this link to see the JSON that this request returns.

3. Working with Objects

There are several name/value pairs in the response. In order to see a specific one, convert the JSON into an object.

From that object use the “get property” block to read the value we want. In our case we use dayOfTheWeek to find out what day it is.

4. Parsing Text

Another name in our JSON response is currentDateTime. The corresponding value contains both the date and the time.

The first 10 characters of the value are the date in the format: YYYY-MM-DD, so this is why we only get the first 10 characters.

If we want to get the time we get the 5 characters from letter #12 to letter #16. We need to use 5 characters because the time is in the format “HH:mm”

Your Turn

If you want to use this app as a reference then you can create your own copy by clicking on the link below

Click to remix the “Tempus” app


I would like to see a Clock component in Thunkable X
#2

Part 2: Simple Stopwatch

Another request we often hear is that users want to create a stopwatch so that they can keep track of sports like running or cycling. Part 2 of the Tempus app includes a simple stopwatch that you can include in your own projects.

Click to remix the “Tempus” app

Components

In this example I’ve used a label to display the elapsed time and two buttons. One button is to start/stop the stopwatch and the other is to reset the timer.

40

Don’t forget to include a Timer component too, as it keeps track of time for us. Use the following settings if you want your app to work the same as mine:

28

Incrementer

Start by creating a local variable to keep track of how long the stopwatch has been running for. I’ve called my variable time but you can call it whatever you like.

When the timer is running we increase the value by 1 seconds and display this new value in the label.

31

Reset

When the reset button is clicked we zero the timer and display the new value in the label.

39

Start/Stop

Finally a simple toggle is used to start and stop the timer.

45

To learn more about creating your own toggle buttons, take a look at the sample app “Toggl”

Your turn

If you want to use this app as a reference then you can create your own copy by clicking on the link below

Click here to remix the “Tempus” app


split this topic #3

2 posts were merged into an existing topic: I would like to see a Clock component in Thunkable X


#4

Part 3: Countdown

Tutorial to follow


#5

How can i change the time zone??


#6

In the URL, where it says /gmt/ simply replace this with the time zone you want.


#7

How can I add # of days to a specific date, for example adding 100 days to 28/02/2019.
Also, how can I calculate # of days between 2 dates, for example how many days between 15/04/2018 and 20/03/2019.
thanks