# šŸŽØ WDC #16 Can you re-create Fahad's Pomodoro Timer App? **URL:** \ **Category:** Teachers' Lounge\ **Tags:** wdc\ **Created:** [May 22, 2021, 8:06am UTC](https://community.thunkable.com/t/wdc-16-can-you-re-create-fahads-pomodoro-timer-app/1299502 "2021-05-22T08:06:20Z")\ **Posts on this page:** 20\ **Page:** 1
**Author:** ![domhnallohanlon](https://sea1.discourse-cdn.com/flex015/user_avatar/community.thunkable.com/domhnallohanlon/32/29554_2.png) [@domhnallohanlon](https://community.thunkable.com/u/domhnallohanlon)\ **Post date:** [May 22, 2021, 8:06am UTC](https://community.thunkable.com/t/wdc-16-can-you-re-create-fahads-pomodoro-timer-app/1299502/1 "2021-05-22T08:06:20Z")
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](https://community.thunkable.com/t/wdc-15-show-thunkable/1283467) 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](https://dev.to/fahadhassan1213/build-a-pomodoro-timer-using-javascript-3d13) 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. ![Screenshot 2021-05-22 at 08.21.42](https://us1.discourse-cdn.com/flex015/uploads/thunkable/original/3X/0/5/050adfd51c65a03c88e5045890ba8ad39b2bf205.png) Try it for yourself here: [https://pomodorotimer1213.netlify.app/](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](https://dribbble.com/shots/14776914-Pomoguru-app-now-ready-for-night-owls) ![image](https://us1.discourse-cdn.com/flex015/uploads/thunkable/original/3X/2/f/2fb0a0aeef9d6940c948e204f4a4939a3ef8d3b8.jpeg) ### [Pomodoro & Time Tracker Application](https://dribbble.com/shots/15054571-Pomodoro-Time-Tracker-Application) ![image](https://us1.discourse-cdn.com/flex015/uploads/thunkable/original/3X/e/b/eb30fdee885cbea75aac88a9090079ef5b04b0e9.jpeg) ### [Countdown Pomodoro Timer Ā· DailyUI 014](https://dribbble.com/shots/5647258-Countdown-Pomodoro-Timer-DailyUI-014) ![image](https://us1.discourse-cdn.com/flex015/uploads/thunkable/original/3X/6/0/60b36852f2e71dcbe6e4df6d55714ea875e43f51.jpeg) 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](https://en.wikipedia.org/wiki/Pomodoro_Technique)** > > The Pomodoro Technique is a time management method developed by Francesco Cirillo in the late 1980s. It uses a kitchen timer to break work into intervals, typically 25 minutes in length, separated by short breaks. Each interval is known as a pomodoro, from the Italian word for tomato, after the tomato-shaped kitchen timer that Cirillo used while he was a university student. Apps and websites providing timers and instructions have popularized the technique. Closely related to concepts such as ti... [https://lifehacker.com/productivity-101-a-primer-to-the-pomodoro-technique-1598992730](https://lifehacker.com/productivity-101-a-primer-to-the-pomodoro-technique-1598992730) ## šŸ… 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) ![IMG_20210420_165908](https://us1.discourse-cdn.com/flex015/uploads/thunkable/original/3X/4/f/4f3ea07cf1a527dcd28e1332e0f72cebb60e72fd.jpeg) ---
**Author:** ![domhnallohanlon](https://sea1.discourse-cdn.com/flex015/user_avatar/community.thunkable.com/domhnallohanlon/32/29554_2.png) [@domhnallohanlon](https://community.thunkable.com/u/domhnallohanlon)\ **Post date:** [May 22, 2021, 8:06am UTC](https://community.thunkable.com/t/wdc-16-can-you-re-create-fahads-pomodoro-timer-app/1299502/2 "2021-05-22T08:06:42Z")
## Summary of Entries ---
**Author:** ![anush\_bh20910](https://sea1.discourse-cdn.com/flex015/user_avatar/community.thunkable.com/anush_bh20910/32/103923_2.png) [@anush\_bh20910](https://community.thunkable.com/u/anush_bh20910)\ **Post date:** [May 22, 2021, 11:05am UTC](https://community.thunkable.com/t/wdc-16-can-you-re-create-fahads-pomodoro-timer-app/1299502/3 "2021-05-22T11:05:07Z")
> [@domhnallohanlon](#): > > As you can see below they also work great as coasters One can never have too many coasters ---
**Author:** ![codeswept](https://sea1.discourse-cdn.com/flex015/user_avatar/community.thunkable.com/codeswept/32/87755_2.png) [@codeswept](https://community.thunkable.com/u/codeswept)\ **Post date:** [May 22, 2021, 1:29pm UTC](https://community.thunkable.com/t/wdc-16-can-you-re-create-fahads-pomodoro-timer-app/1299502/4 "2021-05-22T13:29:37Z")
This is great! Can the timers also show time elapsed instead of time remaining? ---
**Author:** ![domhnallohanlon](https://sea1.discourse-cdn.com/flex015/user_avatar/community.thunkable.com/domhnallohanlon/32/29554_2.png) [@domhnallohanlon](https://community.thunkable.com/u/domhnallohanlon)\ **Post date:** [May 22, 2021, 5:06pm UTC](https://community.thunkable.com/t/wdc-16-can-you-re-create-fahads-pomodoro-timer-app/1299502/5 "2021-05-22T17:06:40Z")
> [@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? ---
**Author:** ![muneer](https://sea1.discourse-cdn.com/flex015/user_avatar/community.thunkable.com/muneer/32/75210_2.png) [@muneer](https://community.thunkable.com/u/muneer)\ **Post date:** [May 22, 2021, 7:55pm UTC](https://community.thunkable.com/t/wdc-16-can-you-re-create-fahads-pomodoro-timer-app/1299502/6 "2021-05-22T19:55:56Z")
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 ![Screenshot_20210522_224726](https://us1.discourse-cdn.com/flex015/uploads/thunkable/original/3X/f/5/f52a48371b2ac3cc3bca1eea8ce2440fa5106cb0.jpeg) 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. ![Screenshot_20210522_224630](https://us1.discourse-cdn.com/flex015/uploads/thunkable/original/3X/8/e/8e54ef3554d6f86e1a75f5baf68df44efe1bac76.jpeg) This my initial idea and will be working on it tomorrow to complete the app but the idea could change while developing. ---
**Author:** ![catsarisky](https://sea1.discourse-cdn.com/flex015/user_avatar/community.thunkable.com/catsarisky/32/100661_2.png) [@catsarisky](https://community.thunkable.com/u/catsarisky)\ **Post date:** [May 23, 2021, 12:45am UTC](https://community.thunkable.com/t/wdc-16-can-you-re-create-fahads-pomodoro-timer-app/1299502/7 "2021-05-23T00:45:00Z")
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](https://thunkable.site/w/gRk-JmaTV) ![image](https://us1.discourse-cdn.com/flex015/uploads/thunkable/original/3X/c/d/cd13d614afd3eb8a0b42ef0d74a0936ec3b3f22b.png) ![image](https://us1.discourse-cdn.com/flex015/uploads/thunkable/original/3X/d/0/d02fd2d458a4ddfe630aa03d90734e10e27cdc9c.png) 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. ![image](https://us1.discourse-cdn.com/flex015/uploads/thunkable/original/3X/2/7/27ca70e82f9002490c706ef6e52ed8b4d3aa8a33.jpeg) ā† costs money ![image](https://us1.discourse-cdn.com/flex015/uploads/thunkable/original/3X/0/1/0168d90f270ea5f20b21bc36a63ad204ffa55b81.jpeg) ā† 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: ![image](https://us1.discourse-cdn.com/flex015/uploads/thunkable/original/3X/0/9/0941f8721cabe9598b2c749a7142f0037bf65a8d.png) ---
**Author:** ![domhnallohanlon](https://sea1.discourse-cdn.com/flex015/user_avatar/community.thunkable.com/domhnallohanlon/32/29554_2.png) [@domhnallohanlon](https://community.thunkable.com/u/domhnallohanlon)\ **Post date:** [May 23, 2021, 5:36am UTC](https://community.thunkable.com/t/wdc-16-can-you-re-create-fahads-pomodoro-timer-app/1299502/8 "2021-05-23T05:36:12Z")
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? ---
**Author:** ![catsarisky](https://sea1.discourse-cdn.com/flex015/user_avatar/community.thunkable.com/catsarisky/32/100661_2.png) [@catsarisky](https://community.thunkable.com/u/catsarisky)\ **Post date:** [May 23, 2021, 9:54am UTC](https://community.thunkable.com/t/wdc-16-can-you-re-create-fahads-pomodoro-timer-app/1299502/9 "2021-05-23T09:54:27Z")
Image credits. Although your other guess sounds more interesting! ---
**Author:** ![muneer](https://sea1.discourse-cdn.com/flex015/user_avatar/community.thunkable.com/muneer/32/75210_2.png) [@muneer](https://community.thunkable.com/u/muneer)\ **Post date:** [May 24, 2021, 3:10pm UTC](https://community.thunkable.com/t/wdc-16-can-you-re-create-fahads-pomodoro-timer-app/1299502/10 "2021-05-24T15:10:13Z")
The Pomodoro submission [Pomodoro Timer](https://x.thunkable.com/projectPage/60a9368ff42664001171c6a1) Not a complete app but just decided to submit it as is. ---
**Author:** ![luv.ak.tech](https://sea1.discourse-cdn.com/flex015/user_avatar/community.thunkable.com/luv.ak.tech/32/104896_2.png) [@luv.ak.tech](https://community.thunkable.com/u/luv.ak.tech)\ **Post date:** [May 24, 2021, 3:52pm UTC](https://community.thunkable.com/t/wdc-16-can-you-re-create-fahads-pomodoro-timer-app/1299502/11 "2021-05-24T15:52:17Z")
the pause button not working ---
**Author:** ![codeswept](https://sea1.discourse-cdn.com/flex015/user_avatar/community.thunkable.com/codeswept/32/87755_2.png) [@codeswept](https://community.thunkable.com/u/codeswept)\ **Post date:** [May 24, 2021, 4:09pm UTC](https://community.thunkable.com/t/wdc-16-can-you-re-create-fahads-pomodoro-timer-app/1299502/12 "2021-05-24T16:09:15Z")
Still working on mine but thought Iā€™d share some screenshots: ![image](https://us1.discourse-cdn.com/flex015/uploads/thunkable/original/3X/7/c/7cfe459e25a545b65d37f0ed181be9084085b09c.png) ![image](https://us1.discourse-cdn.com/flex015/uploads/thunkable/original/3X/4/9/49bdb3acbe5dbb8c8963753299e738f1aa2a8bd2.png) ![image](https://us1.discourse-cdn.com/flex015/uploads/thunkable/original/3X/b/1/b1465e04c259b47c1509c75d77813c4d9ced4715.png) ![image](https://us1.discourse-cdn.com/flex015/uploads/thunkable/original/3X/e/0/e045f1e4a1678e43728af4c58ad0c6c1abd42d75.png) 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. ---
**Author:** ![muneer](https://sea1.discourse-cdn.com/flex015/user_avatar/community.thunkable.com/muneer/32/75210_2.png) [@muneer](https://community.thunkable.com/u/muneer)\ **Post date:** [May 24, 2021, 4:31pm UTC](https://community.thunkable.com/t/wdc-16-can-you-re-create-fahads-pomodoro-timer-app/1299502/13 "2021-05-24T16:31:19Z")
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. ---
**Author:** ![manyone](https://avatars.discourse-cdn.com/v4/letter/m/ee59a6/32.png) [@manyone](https://community.thunkable.com/u/manyone)\ **Post date:** [May 25, 2021, 6:41am UTC](https://community.thunkable.com/t/wdc-16-can-you-re-create-fahads-pomodoro-timer-app/1299502/14 "2021-05-25T06:41:28Z")
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/](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](http://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](https://x.thunkable.com/copy/72c2e6e5ccde92b55ee1dec3275f30cc) ![image](https://us1.discourse-cdn.com/flex015/uploads/thunkable/original/3X/e/9/e9bcecbab58c7f58ce20567218179085ed8b6925.png) ---
**Author:** ![codeswept](https://sea1.discourse-cdn.com/flex015/user_avatar/community.thunkable.com/codeswept/32/87755_2.png) [@codeswept](https://community.thunkable.com/u/codeswept)\ **Post date:** [May 25, 2021, 4:17pm UTC](https://community.thunkable.com/t/wdc-16-can-you-re-create-fahads-pomodoro-timer-app/1299502/15 "2021-05-25T16:17:59Z")
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](https://x.thunkable.com/projectPage/60a8cc556dd7040012635644) 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. ---
**Author:** ![codeswept](https://sea1.discourse-cdn.com/flex015/user_avatar/community.thunkable.com/codeswept/32/87755_2.png) [@codeswept](https://community.thunkable.com/u/codeswept)\ **Post date:** [May 26, 2021, 7:24am UTC](https://community.thunkable.com/t/wdc-16-can-you-re-create-fahads-pomodoro-timer-app/1299502/16 "2021-05-26T07:24:46Z")
I love the idea of growing a plant to show how long youā€™ve been working. Really interesting šŸ‘šŸ‘ ---
**Author:** ![muneer](https://sea1.discourse-cdn.com/flex015/user_avatar/community.thunkable.com/muneer/32/75210_2.png) [@muneer](https://community.thunkable.com/u/muneer)\ **Post date:** [May 26, 2021, 2:00pm UTC](https://community.thunkable.com/t/wdc-16-can-you-re-create-fahads-pomodoro-timer-app/1299502/17 "2021-05-26T14:00:22Z")
@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. ---
**Author:** ![codeswept](https://sea1.discourse-cdn.com/flex015/user_avatar/community.thunkable.com/codeswept/32/87755_2.png) [@codeswept](https://community.thunkable.com/u/codeswept)\ **Post date:** [May 26, 2021, 2:04pm UTC](https://community.thunkable.com/t/wdc-16-can-you-re-create-fahads-pomodoro-timer-app/1299502/18 "2021-05-26T14:04:13Z")
This is cool! I really love your app. The idea of using different coloured progress bars is too good! ---
**Author:** ![Balanced\_Kitchen](https://avatars.discourse-cdn.com/v4/letter/b/839c29/32.png) [@Balanced\_Kitchen](https://community.thunkable.com/u/Balanced_Kitchen)\ **Post date:** [May 27, 2021, 12:40pm UTC](https://community.thunkable.com/t/wdc-16-can-you-re-create-fahads-pomodoro-timer-app/1299502/19 "2021-05-27T12:40:37Z")
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? ---
**Author:** ![muneer](https://sea1.discourse-cdn.com/flex015/user_avatar/community.thunkable.com/muneer/32/75210_2.png) [@muneer](https://community.thunkable.com/u/muneer)\ **Post date:** [May 27, 2021, 1:25pm UTC](https://community.thunkable.com/t/wdc-16-can-you-re-create-fahads-pomodoro-timer-app/1299502/20 "2021-05-27T13:25:03Z")
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. [Next page](https://community.thunkable.com/t/wdc-16-can-you-re-create-fahads-pomodoro-timer-app/1299502.md?page=2)