diff options
| -rw-r--r-- | src/index.html | 24 | ||||
| -rw-r--r-- | src/js/main.js | 2 | ||||
| -rw-r--r-- | src/js/time.js | 33 |
3 files changed, 48 insertions, 11 deletions
diff --git a/src/index.html b/src/index.html index 1cd4732..90b9b19 100644 --- a/src/index.html +++ b/src/index.html @@ -32,17 +32,19 @@ </div> </a> </script> - <div class="infoContainer"> - <div class="infoItem day"> - TUESDAY - </div> - <div class="infoItem hour"> - 7:26 AM - </div> - <div class="infoItem wheater"> - <span class="icon-rainy"></span> - 20ºC - </div> + <div class="infoContainer" id="timeContainer"> + <script id="time-template" type="x-tmpl-mustache"> + <div class="infoItem day"> + {{ day }} + </div> + <div class="infoItem hour"> + {{ hour }} + </div> + <div class="infoItem wheater"> + <span class="icon-rainy"></span> + 20ºC + </div> + </script> </div> <div class="statusContainer" id="networkStatusContainer"> <script id="network-status-template" type="x-tmpl-mustache"> diff --git a/src/js/main.js b/src/js/main.js index d26f701..f07c210 100644 --- a/src/js/main.js +++ b/src/js/main.js @@ -1,9 +1,11 @@ import { init as init_apps } from './apps'; import { init as init_weather } from './weather'; import { init as init_network } from './network'; +import { init as init_time } from './time'; export function init() { init_apps(); init_weather(); init_network(); + init_time(); }
\ No newline at end of file diff --git a/src/js/time.js b/src/js/time.js new file mode 100644 index 0000000..55165c7 --- /dev/null +++ b/src/js/time.js @@ -0,0 +1,33 @@ +import Mustache from 'mustache'; + +var template; + +var days = ['SUNDAY', 'MONDAY', 'TUESDAY', 'WEDNESDAY', 'THURSDAY', 'FRIDAY', 'SATURDAY']; + +function formatAMPM(date) { + var hours = date.getHours(); + var minutes = date.getMinutes(); + var ampm = hours >= 12 ? 'PM' : 'AM'; + hours = hours % 12; + hours = hours ? hours : 12; + minutes = minutes < 10 ? '0'+minutes : minutes; + var strTime = hours + ':' + minutes + ' ' + ampm; + return strTime; + } + +function initInterval() { + setInterval(function() { + var date = new Date(); + document.getElementById('timeContainer').innerHTML = Mustache.render(template, { + day: days[date.getDay()], + hour: formatAMPM(date) + }); + }, 1000); +} + +export function init() { + template = document.getElementById('time-template').innerHTML; + Mustache.parse(template); + + initInterval(); +}
\ No newline at end of file |