watch

by Nikita_Lugovykh

HTML

<div class="container">
  <div class="watch"></div>
</div>

CSS

body {
  background-color: #999;
  height: 100vh;
  overflow: hidden;
}
.container {
  display: flex;
  justify-content: center;
  align-items: center;
  height: 100vh;
}
.watch {
  background-color: #686868;
  width: 100px;
  height: 100px;
}

JavaScript

const oneSecond = () => 1000;
const getCurrentTime = () => new Date();
const clear = () => console.clear();
const log = message => console.log(message);

const serializeClockTime = date => 
({
	hours: date.getHours(),
	minutes: date.getMinutes(),
	seconds: date.getSeconds(),
});

const civilianHours = (clockTime) => 
({
...clockTime,
hours: (clockTime.hours > 12) ?
		clockTime.hours - 12 :
        clockTime.hours
})

const appendAMPM = clokeTime => 
({
...clokeTime,
appm: (clokeTime.hours) > 12 ?
	'PM' : 'AM'
})

const display = target => time => target(time);

const formatClock = format => time => {
return	format.replace('hh', time.hours)
        .replace('mm', time.minutes)
        .replace('ss', time.seconds)
        .replace('tt', time.appm)
}
        
const prependZero = key => clockTime => 
({
...clockTime,
[key]:(clockTime[key] < 10) ? '0' + clockTime[key] : clockTime[key]

})

const converToCivilanTime = clockTime => 
		compose(
      appendAMPM,
      civilianHours
    )(clockTime);
    
const doubleDigits = civilianTime => 
		compose (
    	prependZero('hours'),
			prependZero('minutes'),
			prependZero('seconds'),
    )(civilianTime);

const startTicking = () => {
	setInterval(
  	compose (
    	clear,
        getCurrentTime,
        serializeClockTime,
        converToCivilanTime,
        doubleDigits,
        formatClock('hh:mm:ss tt'),
        display(log)
    ),
    oneSecond())
};
  const compose = (...fns) => 
			(arg) => 
      	fns.reduce((composed,f) => f(composed), arg)
  
  startTicking()