trjhtr

'use strict'

const load = () => 
 const data = ;

 init(data);

 setInterval(() => 
 update(data);
 render(data);
 , 100);
 const mapping = 
 "start": start.bind(null, data),
 "reset": reset.bind(null, data),
 "license": showLicense
 ;
 const clickHandler = event => event.target.id in mapping && mapping[event.target.id]();
 document.body.addEventListener('click', clickHandler);


const init = data => 
 data.canvas = document.getElementById('countdown');
 data.ctx = data.canvas.getContext('2d');

 data.endTime = Date.now();
 data.start = false;
 data.reset = false;

 data.canvas.width = data.canvas.height = 500;

 const inputs = ['hours', 'minutes', 'seconds'];
 inputs.forEach(inputName => data[inputName + 'Input'] = document.getElementById(inputName));
 data.startButton = document.getElementById('start');


const update = data => 

const render = data => 
 const 
 canvas,
 ctx,
 startAngle,
 start
 = data;

 ctx.fillStyle = '#fff';
 ctx.fillRect(0, 0, canvas.width, canvas.height);

 let angle = Math.abs(startAngle);

 ctx.save();

 if (startAngle > 0) 
 ctx.translate(canvas.width / 2, canvas.height / 2);
 ctx.rotate(-Math.PI / 2);
 ctx.scale(1, -1);
 ctx.translate(-canvas.width / 2, -canvas.height / 2);
 ctx.fillStyle = 'rgba(0, 0, 255, 0.5)';
 else 
 ctx.translate(canvas.width / 2, canvas.height / 2);
 ctx.rotate(-Math.PI / 2);
 ctx.translate(-canvas.width / 2, -canvas.height / 2);
 ctx.fillStyle = 'rgba(255, 0, 0, 0.5)';
 

 while (angle > 2 * Math.PI) 
 ctx.beginPath();
 ctx.arc(canvas.width / 2, canvas.width / 2, canvas.width / 2, 0, 2 * Math.PI);
 ctx.fill();

 angle -= 2 * Math.PI;
 

 ctx.beginPath();
 ctx.arc(canvas.width / 2, canvas.width / 2, canvas.width / 2, 0, angle);
 ctx.lineTo(canvas.width / 2, canvas.height / 2);
 ctx.fill();

 ctx.restore();


const start = data => 
 if (data.start) 
 data.startButton.innerText = 'Start';
 else 
 let hours = data.hoursInput.value;
 let minutes = data.minutesInput.value;
 let seconds = data.secondsInput.value;
 if (hours.trim() == '') hours = 0;
 if (minutes.trim() == '') minutes = 0;
 if (seconds.trim() == '') seconds = 0;

 let sign;
 if (hours != 0) 
 sign = hours < 0 ? -1 : 1;
 else if (minutes != 0) 
 sign = minutes < 0 ? -1 : 1;
 else 
 sign = seconds < 0 ? -1 : 1;
 

 minutes = sign * Math.abs(minutes);
 seconds = sign * Math.abs(seconds);

 data.endTime = Date.now() + 3600000 * hours + 60000 * minutes + 1000 * seconds;

 data.startButton.innerText = 'Pause';
 
 data.start ^= true;


const reset = data => 
 data.endTime = Date.now();
 data.start = false;
 data.hoursInput.value = '';
 data.minutesInput.value = '';
 data.secondsInput.value = '';
 data.startButton.innerText = 'Start';
 data.reset = true;


const showLicense = () => 
 const mask = document.createElement('div');
 mask.id = 'mask';
 mask.onclick = () => 
 document.body.removeChild(mask);
 document.body.removeChild(message);
 
 document.body.appendChild(mask);

 const message = document.createElement('div');
 message.id = 'messageContainer';
 message.innerText = 'License unavailable, please report as a bug.';
 message.onclick = () => 
 document.body.removeChild(mask);
 document.body.removeChild(message);
 

 const ajax = new XMLHttpRequest();
 ajax.open('GET', '/');
 ajax.onreadystatechange = () => 
 //check state, this doesn't make sense here in this snippet
 if (ajax.readyState === 4 && ajax.status === 200) 
 //message.innerText = ajax.responseText
 
 ;
 ajax.send();
 document.body.append(message);


const timeToAngle = endTime => 
 const difference = endTime - Date.now();
 return difference / 3600000 * 2 * Math.PI;


const pad = (value, format) => (format + value).slice(-format.length);

load();

* 
 box-sizing: border-box;


body 
 background: #eee;
 margin: 0;


main 
 background: #fff;
 max-width: 700px;
 margin: auto;
 padding: 10px;
 display: flex;
 flex-flow: column;
 align-items: center;


h1 
 text-align: center;


menu 
 display: flex;
 justify-content: space-between;
 width: 500px;
 padding: 0;


#hours,
#minutes,
#seconds 
 width: 30px;
 text-align: center;


footer 
 max-width: 700px;
 margin: auto;
 background: #ddd;
 padding: 10px;
 display: flex;
 justify-content: space-between;


footer a 
 display: inline-block;
 background: #ccc;
 padding: 10px;
 border-radius: 10px;
 color: black;
 text-decoration: none;
 cursor: pointer;


footer a:hover 
 background: #888;
 color: #fff;


#mask 
 position: fixed;
 left: 0;
 right: 0;
 top: 0;
 bottom: 0;
 background: rgba(0, 0, 0, 0.5);
 z-index: 1;


#messageContainer 
 position: fixed;
 left: 50%;
 top: 50%;
 transform: translate(-50%, -50%);
 z-index: 2;
 background: #fff;
 padding: 10px;
 border-radius: 10px;
 overflow: auto;
 max-width: 600px;
 max-height: 500px;

<main>
 <h1 contenteditable>Countdown</h1>
 <canvas id="countdown"></canvas>
 <menu>
 <button id="reset">Reset</button>
 <div class="group">
 <input id="hours" placeholder="HH" autofocus>:<input id="minutes" placeholder="MM">:<input id="seconds" placeholder="SS">
 </div>
 <button id="start">Start</button>
 </menu>
</main>
<footer>
 <a href="https://github.com/SteeveDroz/countdown">Find the project on GitHub</a>
 <a href="https://github.com/SteeveDroz/countdown/issues">Report bugs</a>
 <a id="license">MIT license</a>
</footer>