Twenty five timer

Next, we are going to create our first jQuery mobile web app. It is a simple count down app called “Twenty Five”.

The idea of the app is to make use of the Pomodoro technique which suggest our brain starts losing focus on the current task after 25-30 minutes of highly concentration. So we should divide our working time into segments of 25 minutes in order to keep ourselves in the top focus and productivity state.

So we will clone the project folder we just created in last section. And change the content of the root page as the following:

<div data-role='page' id='root'>
  <div data-role='header'>
    <h1>TwentyFive</h1>
  </div>
  <div data-role='content'>
    <p id='timer'>00:00</p>
  </div>
</div>

And we got a styling for the timer in content session.

#timer {
  text-align: center;
  font-size: 4em;
  text-shadow: #fff 0 1px 0, #000 0 -2px 0;
}

Please note that the shadow is subtle and not easy to be discovered. Otherwise it will distract the user from the content.

What’s next? We’re going to take a look at “Linking pages”.