# Clock App

{% hint style="info" %}
This sample application is reprinting of [Think IT article](http://thinkit.co.jp/story/2013/03/11/3987) released on 3/11/2013.
{% endhint %}

This sample app is a clock app displaying current Date and time.

## Demo

[**Import Clock App to your Monaca Account**](https://monaca.mobi/ja/directimport?pid=64081374e78885240668f94f)

**Tested Environment**

* Android 11.0
* iOS 14.3

![](https://3091308003-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-MfWe1U2tFctp8FkP9W8%2F-MfavQd1SF439p5CVrEp%2F-MfavoV6mMuTamqU6Pcf%2Fimage.png?alt=media\&token=3c1f71cc-bf08-452f-bcb5-75f0bb05ac52)

## File Components

![](https://3091308003-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-MfWe1U2tFctp8FkP9W8%2F-MfavQd1SF439p5CVrEp%2F-MfavsipyP5wuLVb55fS%2Fimage.png?alt=media\&token=33b98db2-8164-439a-8ea7-59be1d2a26f8)

| File            | Description                                                |
| --------------- | ---------------------------------------------------------- |
| `index.html`    | The Startup page                                           |
| `js/app.js`     | The JavaScript file handling implementation in the project |
| `css/style.css` | The style Sheet for the project                            |
| `images/*.png`  | All image files needed to use this template                |

## HTML Explanation

### index.html

The following HTML body of `index.html` file is for displaying the current Date and time.

```markup
<div id="wrapper">
    <div id="container">
        <img src="images/figure-0.png" class="figure" />
        <img src="images/figure-0.png" class="figure" />
        <img src="images/figure-colon.png" />
        <img src="images/figure-0.png" class="figure" />
        <img src="images/figure-0.png" class="figure" />
        <img src="images/figure-colon.png" />
        <img src="images/figure-0.png" class="figure" />
        <img src="images/figure-0.png" class="figure" />
        <div id="date"></div>
    </div>
    <img src="images/logo-monaca.png" style="position: absolute; left: 40px; top: 40px;" />
</div>
```

## JavaScript Explanation

### js/app.js

When the application is loaded, the `clock()` function is called every 1 seconds (`1000 ms`) by this statement:

```javascript
setInterval(clock, 1000);
```

The `clock()` function is used to display the current date and time. First, it gets the current time (hour, minute and second) and then display the images (digit image) according to the time. Next, it gets the current date (day, month and year) and then display it in the format as defined in `renderDay()` and `renderMonth()` functions. Here is content of the `clock()` function:

```javascript
function clock() {
    // (3) Obtain "figure" class(image of the number)
    var figures = document.getElementsByClassName('figure');
    // (4) Obtain the "date" ID (Date display area)
    var date = document.getElementById('date');

    // (5) Obtain the current time
    var now = new Date();

    // (6) Set the digits for the hours
    figures[0].src = 'images/figure-' + tendigit(now.getHours()) + '.png';
    figures[1].src = 'images/figure-' + onedigit(now.getHours()) + '.png';

    // (7) Set the digits for the minutes
    figures[2].src = 'images/figure-' + tendigit(now.getMinutes()) + '.png';
    figures[3].src = 'images/figure-' + onedigit(now.getMinutes()) + '.png';

    // (7) Set the digits for the seconds
    figures[4].src = 'images/figure-' + tendigit(now.getSeconds()) + '.png';
    figures[5].src = 'images/figure-' + onedigit(now.getSeconds()) + '.png';

    // (8) Display the date
    date.textContent = renderDay(now.getDay()) + ", " + renderMonth(now.getMonth()) + " " + now.getDate() + ", " + now.getFullYear();
}
```