🎨 WDC #16 Can you re-create Fahad's Pomodoro Timer App?

[domhnallohanlon]

Hopefully you are all enjoying the new #wdc format as much as we are on the Thunkable team! One of my favourite things about Thunkable is that you can build pretty much any app you want and last week there were so many of your incredible apps and ideas on display - I think it was one of my favourite challenges we’ve ever run!

This week we’re back to the original format and hopefully you’ll be able to find a few moments to create this Pomodoro Timer.

Our Inspiration

Here’s a great overview from Fahad about how to build your own Pomodoro timer in Javascript: Build a Pomodoro timer using JavaScript - DEV Community

The challenges are almost identical in Thunkable (i.e. create functions and display times in a particular format) but obviously everything will be block based and will be compatible with Android, iOS and Web out-of-the-box.

The UI is simple and elegant. The time remaining gets prominence and the two functions (start/pause and stop) are placed on large buttons making it easy to use.

Try it for yourself here: https://pomodorotimer1213.netlify.app/

There are so many other fantastic designs on dribble, here are just 3 that I found in a quick search:

Pomoguru app - now ready for night owls

Pomodoro & Time Tracker Application

Countdown Pomodoro Timer · DailyUI 014

Hoping to see great layouts and colour schemes in this challenge!

Background Reading

If you’re not familiar with the Pomodoro technique there are lots of great articles about how it works. Here are two to get you started:

Pomodoro Technique

Productivity 101: An Introduction to The Pomodoro Technique

Prizes

To recognise the time, energy and creativity that goes into designing a beautiful app we have a limited number of these laser cut #WeekendDesignChallenge medals to give out. (As you can see below they also work great as coasters)

[domhnallohanlon]

Summary of Entries

[anush_bh20910]

@domhnallohanlon

As you can see below they also work great as coasters

One can never have too many coasters

[codeswept]

This is great! Can the timers also show time elapsed instead of time remaining?

[domhnallohanlon]

@codeswept

Can the timers also show time elapsed instead of time remaining?

It’s your app so you can display the passage of time anyway you like!

Maybe your users would like this as a setting, so you could have a switch or a toggle to flip between count up/count down?

[muneer]

The idea of the timer (Pomodoro) is to time yourself for 30 minutes and try to accomplish small tasks and you are allowed to take some time to rest between the tasks.

I started the design this way

The time is set to 00:00 at the start.

When the user clicks the start button the timer starts counting and a green progress bar starts to show marking the activity time the user is engaged in.

The user has the option to pause any time to take a rest.

The counter will still continue and a white progress bar will show to mark the resting time.

When the user clicks the start again, another green (activity) bar will start showing up again.

This my initial idea and will be working on it tomorrow to complete the app but the idea could change while developing.

[catsarisky]

I decided how far I could get in one pomodoro interval. But then I needed another 5 minutes. Oops.

UPDATED version: https://thunkable.site/w/gRk-JmaTV

Update: Added time selection (shown above), count up/vs down, and tracking how many tomatoes you’ve gotten. Currently, I just have “planting”, a tomato plant, and a tomato, but my 8 year old is totally right that there should be more images in the series. I just haven’t found a free set for tomatoes, so am wavering between paying for an image with ripening tomatoes or switching over to some other plant.
← costs money
← free but wrong plant.

I still need a break timer. Having tried my timer, I definitely need my phone to go BERSERK when I’m supposed to get back to work, or else I’ll get distracted. Update: Added. Also now keeping track of the whole day of work. And I have growing tomatoes (approximately).

Here’s an end of week screen shot:

[domhnallohanlon]

These are looking great Cathy and Muneer!

@catsarisky

I decided how far I could get in one pomodoro interval.

That’s pretty impressive!

I noticed you have a “Credits” tab - is that for credits as in tokens or in app rewards? Or is it credits and in image licenses, attributions etc?

[catsarisky]

Image credits. Although your other guess sounds more interesting!

[muneer]

The Pomodoro submission
Pomodoro Timer

Not a complete app but just decided to submit it as is.

[luv.ak.tech]

the pause button not working

[codeswept]

Still working on mine but thought I’d share some screenshots:

The app allows you to add tasks and displays each task as it happens. You can allot individual break and work times to each task. When I’m done, I’ll share the link.

[muneer]

Thank you for taking a look at it.

The pause button does not stop the timer. The green activity bar will stop increasing and a new “rest” bar will start to show in white.

I explained it in an earlier post.

[manyone]

this is my entry: Boiled Egg Timer

i am awed and inspired by the early entries of @catsarisky, @codeswept and @muneer! i saw this article from https://www.thekitchn.com/ about making perfect hardboiled eggs and it inspired me to go in this direction. the bells and whistles of @catsarisky, @codeswept and @muneer apps are a little hard for me to - (pardon me) - crack!
i also included a ding sound from freesounds.org to signal end of timer.

i used a local table of entries with different durations - it could be modified to show other tasks. at the moment, this version doesn’t have any other way of entering any desired time duration by hand.

here’s the project:
https://x.thunkable.com/copy/72c2e6e5ccde92b55ee1dec3275f30cc

[codeswept]

I love all the entries so far! @manyone I really like your take on it. I didn’t think of different types of timers, just used Pomodoro.

Here’s my (unfinished) app… I was trying to think of a name but all that presented itself to me was PomoMeter, which sounds cheesy. (Side: Anybody else loses sleep over app names?)

So, let me get to the point:
PomoMeter allows you to add tasks and allot individual work and break times to each task. You can edit tasks, delete tasks, and even repeat tasks! (Thanks @catsarisky for showing me how to do column overlay- I used that for my ‘edit task’ display)

The layout hasn’t changed, so you can check out the screenshots in my previous post.
Here’s the link: Thunkable

Do give me your feedback!
Thanks!

UPDATE:
The app now

• Has an updated REPEAT function
• Displays the next task
• Has improved UI
• Displays current task
• Audio reminders when a task starts/ it’s break time/you finished your schedule

WORKING ON
I’m working on adding a show remaining time/ elapsed time toggle. Beats me how @catsarisky and @manyone did it.

[codeswept]

I love the idea of growing a plant to show how long you’ve been working. Really interesting

[muneer]

@luv.ak.tech
I have updated the app to stop the time counter when in PAUSE mode but the white progress bar will continue to show “rest” time.

[codeswept]

This is cool! I really love your app. The idea of using different coloured progress bars is too good!

[Balanced_Kitchen]

Really very good suggestions from everyone. But what would happen if the phone locked the screen in the meantime? The idea of this type of project is to remind the user, not to keep him engaged to monitor the timer process. And in this regard, I would again ask: When will there be a block, a sensor or something to work in the background?

[muneer]

Not a problem at all @Balanced_Kitchen
You can have a form to feed in the details in Thunkable then the actual “ticker” with JavaScript app triggered from the Web Viewer and it will stay “ticking” even during the screen lock.