2020-06-09 04:02:03 +02:00
|
|
|
class Clock {
|
2020-06-04 01:50:05 +02:00
|
|
|
|
2020-06-09 04:02:03 +02:00
|
|
|
constructor() {
|
|
|
|
this._clockEl = document.querySelector('#clock');
|
|
|
|
this._setTime = this._setTime.bind(this);
|
|
|
|
this._startClock();
|
2020-06-04 01:50:05 +02:00
|
|
|
}
|
|
|
|
|
2020-06-09 04:02:03 +02:00
|
|
|
// Append 0 before time elements if less hour's than 10
|
|
|
|
_appendZero = k => {
|
|
|
|
if (k < 10) {
|
|
|
|
return '0' + k;
|
|
|
|
} else {
|
|
|
|
return k;
|
|
|
|
}
|
|
|
|
}
|
|
|
|
|
|
|
|
_setTime = () => {
|
|
|
|
// Date object
|
|
|
|
const date = new Date();
|
2020-06-04 01:50:05 +02:00
|
|
|
|
2020-06-09 04:02:03 +02:00
|
|
|
// Set hour, minute
|
|
|
|
let hour = date.getHours();
|
|
|
|
let min = date.getMinutes();
|
|
|
|
let midDay = 'AM';
|
|
|
|
|
|
|
|
// Assigning
|
|
|
|
midDay = (hour >= 12) ? 'PM' : 'AM';
|
|
|
|
hour = (hour == 0) ? 12 : ((hour > 12) ? (hour - 12) : hour);
|
|
|
|
hour = this._appendZero(hour);
|
|
|
|
min = this._appendZero(min);
|
2020-06-04 01:50:05 +02:00
|
|
|
|
2020-06-09 04:02:03 +02:00
|
|
|
// Update clock id element
|
2020-06-09 04:55:25 +02:00
|
|
|
this._clockEl.innerHTML = `${hour}:${min} ${midDay}` ;
|
2020-06-09 04:02:03 +02:00
|
|
|
}
|
2020-06-04 01:50:05 +02:00
|
|
|
|
2020-06-09 04:02:03 +02:00
|
|
|
_startClock = () => {
|
|
|
|
this._setTime();
|
2020-06-09 04:37:34 +02:00
|
|
|
setInterval(this._setTime, 1000);
|
2020-06-09 04:02:03 +02:00
|
|
|
}
|
2020-06-04 01:50:05 +02:00
|
|
|
|
2020-06-09 04:02:03 +02:00
|
|
|
}
|