alanrsoares/index.html

## index.html
<!DOCTYPE html>
<html>
<head>
<meta name="description" content="a vanilla js + html & css analog clock">
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width">
  <title>JS Bin</title>
  <link href="https://fonts.googleapis.com/css?family=Share+Tech+Mono" rel="stylesheet">
<style id="jsbin-css">
body {
  margin: 0;
  background-color: #99B898;
}

.clock-container {
  margin: 10px auto;
  display: inline-block;
  position: relative;
  width: 100%;
  padding-bottom: 100%;
  vertical-align: middle;
  overflow: hidden;
  fill: #2A363D;
}

.face {
  stroke-width: 2px;
  stroke: #E84A5F;
}

#hour {
  stroke-width: .6px;
  fill: #2A363D;
  stroke: #FECEA8;
}

#min {
  stroke-width: .6px;
  fill: #2A363D;
  stroke: #FF847C;
}

#sec {
  stroke: #E84A5F;;
  stroke-width: 1.5px;
  border-radius: 3px;
}

.dot {
  stroke-width: .5px;
  stroke: #FFF;
  fill: #E84A5F;
}

.title {
  margin: 10px;
  padding: 10px;
  text-align: center;
  font-size: 80px;
  color: 2A363D;
}

#digital {
  font-family: 'Share Tech Mono', monospace;
  font-size: 40px;
  font-weight: 600;
  line-height: 1.75em;
  color: #2A363D;
  border: solid 1px #ccc;
  border-radius: 5px;
  background: #FECEA8;
  text-align: center;
  padding: 5px 10px 0;
  margin: auto;
  width: 240px;
}
</style>
</head>
<body>
<div class="clock-container">
  <svg class="clock" viewBox="0 0 100 100">
    <circle class="face" cx="50" cy="50" r="45"/>
    <g class="hands">
      <rect
        id="hour"
        x="47.5"
        y="12.5"
        width="5"
        height="40"
        rx="2.5"
        ry="2.55"
      />
      <rect
        id="min"
        x="48.5"
        y="12.5"
        width="3"
        height="40"
        rx="2"
        ry="2"
      />
      <line
        id="sec"
        x1="50"
        y1="50"
        x2="50"
        y2="16"
      />
    </g>
    <circle class="dot" cx="50" cy="50" r="3" />
  </svg>
  <div id="digital">
    00:00:00
  </div>
  <div class="title">
    l'horloge
  </div>
</div>
<script id="jsbin-javascript">
'use strict';

var _slicedToArray = (function () { function sliceIterator(arr, i) { var _arr = []; var _n = true; var _d = false; var _e = undefined; try { for (var _i = arr[Symbol.iterator](), _s; !(_n = (_s = _i.next()).done); _n = true) { _arr.push(_s.value); if (i && _arr.length === i) break; } } catch (err) { _d = true; _e = err; } finally { try { if (!_n && _i['return']) _i['return'](); } finally { if (_d) throw _e; } } return _arr; } return function (arr, i) { if (Array.isArray(arr)) { return arr; } else if (Symbol.iterator in Object(arr)) { return sliceIterator(arr, i); } else { throw new TypeError('Invalid attempt to destructure non-iterable instance'); } }; })();

var rotate = function rotate(el, deg) {
  return el.setAttribute('transform', 'rotate(' + deg + ' 50 50)');
};

var pad = function pad(n) {
  return n.toString().padStart(2, '0');
};

function updateClock(now) {
  var time = now.map(pad).join(':');

  digital.innerHTML = time;
}

var now = function now(d) {
  return ['Hour', 'Minute', 'Second'].map(function (x) {
    return d['get' + x + 's']();
  });
};

var tick = function tick() {
  var _now = now(new Date());

  var _now2 = _slicedToArray(_now, 3);

  var h = _now2[0];
  var m = _now2[1];
  var s = _now2[2];

  updateClock([h, m, s]);
  rotate(sec, 6 * s);
  rotate(min, 6 * m);
  rotate(hour, 30 * (h % 12) + m / 2);
};

tick();
setInterval(tick, 1000);
</script>


<script id="jsbin-source-css" type="text/css">body {
  margin: 0;
  background-color: #99B898;
}

.clock-container {
  margin: 10px auto;
  display: inline-block;
  position: relative;
  width: 100%;
  padding-bottom: 100%;
  vertical-align: middle;
  overflow: hidden;
  fill: #2A363D;
}

.face {
  stroke-width: 2px;
  stroke: #E84A5F;
}

#hour {
  stroke-width: .6px;
  fill: #2A363D;
  stroke: #FECEA8;
}

#min {
  stroke-width: .6px;
  fill: #2A363D;
  stroke: #FF847C;
}

#sec {
  stroke: #E84A5F;;
  stroke-width: 1.5px;
  border-radius: 3px;
}

.dot {
  stroke-width: .5px;
  stroke: #FFF;
  fill: #E84A5F;
}

.title {
  margin: 10px;
  padding: 10px;
  text-align: center;
  font-size: 80px;
  color: 2A363D;
}

#digital {
  font-family: 'Share Tech Mono', monospace;
  font-size: 40px;
  font-weight: 600;
  line-height: 1.75em;
  color: #2A363D;
  border: solid 1px #ccc;
  border-radius: 5px;
  background: #FECEA8;
  text-align: center;
  padding: 5px 10px 0;
  margin: auto;
  width: 240px;
}</script>

<script id="jsbin-source-javascript" type="text/javascript">const rotate = (el, deg) =>
  el.setAttribute(
    'transform',
    `rotate(${deg} 50 50)`
  )

const pad = n => n.toString().padStart(2, '0')

function updateClock(now ) {
  const time = now.map(pad).join(':')

  digital.innerHTML = time
}

const now = d =>
  ['Hour', 'Minute', 'Second'].map(x => d[`get${x}s`]())

const tick = () => {
  const [h, m, s] = now(new Date())

  updateClock([h, m, s])
  rotate(sec, 6 * s)
  rotate(min, 6 * m)
  rotate(hour, 30 * (h % 12) + m / 2)
}

tick()
setInterval(tick, 1000)</script></body>
</html>

## jsbin.goyemuzabi.css
body {
  margin: 0;
  background-color: #99B898;
}

.clock-container {
  margin: 10px auto;
  display: inline-block;
  position: relative;
  width: 100%;
  padding-bottom: 100%;
  vertical-align: middle;
  overflow: hidden;
  fill: #2A363D;
}

.face {
  stroke-width: 2px;
  stroke: #E84A5F;
}

#hour {
  stroke-width: .6px;
  fill: #2A363D;
  stroke: #FECEA8;
}

#min {
  stroke-width: .6px;
  fill: #2A363D;
  stroke: #FF847C;
}

#sec {
  stroke: #E84A5F;;
  stroke-width: 1.5px;
  border-radius: 3px;
}

.dot {
  stroke-width: .5px;
  stroke: #FFF;
  fill: #E84A5F;
}

.title {
  margin: 10px;
  padding: 10px;
  text-align: center;
  font-size: 80px;
  color: 2A363D;
}

#digital {
  font-family: 'Share Tech Mono', monospace;
  font-size: 40px;
  font-weight: 600;
  line-height: 1.75em;
  color: #2A363D;
  border: solid 1px #ccc;
  border-radius: 5px;
  background: #FECEA8;
  text-align: center;
  padding: 5px 10px 0;
  margin: auto;
  width: 240px;
}

## jsbin.goyemuzabi.js
'use strict';

var _slicedToArray = (function () { function sliceIterator(arr, i) { var _arr = []; var _n = true; var _d = false; var _e = undefined; try { for (var _i = arr[Symbol.iterator](), _s; !(_n = (_s = _i.next()).done); _n = true) { _arr.push(_s.value); if (i && _arr.length === i) break; } } catch (err) { _d = true; _e = err; } finally { try { if (!_n && _i['return']) _i['return'](); } finally { if (_d) throw _e; } } return _arr; } return function (arr, i) { if (Array.isArray(arr)) { return arr; } else if (Symbol.iterator in Object(arr)) { return sliceIterator(arr, i); } else { throw new TypeError('Invalid attempt to destructure non-iterable instance'); } }; })();

var rotate = function rotate(el, deg) {
  return el.setAttribute('transform', 'rotate(' + deg + ' 50 50)');
};

var pad = function pad(n) {
  return n.toString().padStart(2, '0');
};

function updateClock(now) {
  var time = now.map(pad).join(':');

  digital.innerHTML = time;
}

var now = function now(d) {
  return ['Hour', 'Minute', 'Second'].map(function (x) {
    return d['get' + x + 's']();
  });
};

var tick = function tick() {
  var _now = now(new Date());

  var _now2 = _slicedToArray(_now, 3);

  var h = _now2[0];
  var m = _now2[1];
  var s = _now2[2];

  updateClock([h, m, s]);
  rotate(sec, 6 * s);
  rotate(min, 6 * m);
  rotate(hour, 30 * (h % 12) + m / 2);
};

tick();
setInterval(tick, 1000);
	<!DOCTYPE html>
	<html>
	<head>
	<meta name="description" content="a vanilla js + html & css analog clock">
	<meta charset="utf-8">
	<meta name="viewport" content="width=device-width">
	<title>JS Bin</title>
	<link href="https://fonts.googleapis.com/css?family=Share+Tech+Mono" rel="stylesheet">
	<style id="jsbin-css">
	body {
	margin: 0;
	background-color: #99B898;
	}

	.clock-container {
	margin: 10px auto;
	display: inline-block;
	position: relative;
	width: 100%;
	padding-bottom: 100%;
	vertical-align: middle;
	overflow: hidden;
	fill: #2A363D;
	}

	.face {
	stroke-width: 2px;
	stroke: #E84A5F;
	}

	#hour {
	stroke-width: .6px;
	fill: #2A363D;
	stroke: #FECEA8;
	}

	#min {
	stroke-width: .6px;
	fill: #2A363D;
	stroke: #FF847C;
	}

	#sec {
	stroke: #E84A5F;;
	stroke-width: 1.5px;
	border-radius: 3px;
	}

	.dot {
	stroke-width: .5px;
	stroke: #FFF;
	fill: #E84A5F;
	}

	.title {
	margin: 10px;
	padding: 10px;
	text-align: center;
	font-size: 80px;
	color: 2A363D;
	}

	#digital {
	font-family: 'Share Tech Mono', monospace;
	font-size: 40px;
	font-weight: 600;
	line-height: 1.75em;
	color: #2A363D;
	border: solid 1px #ccc;
	border-radius: 5px;
	background: #FECEA8;
	text-align: center;
	padding: 5px 10px 0;
	margin: auto;
	width: 240px;
	}
	</style>
	</head>
	<body>
	<div class="clock-container">
	<svg class="clock" viewBox="0 0 100 100">
	<circle class="face" cx="50" cy="50" r="45"/>
	<g class="hands">
	<rect
	id="hour"
	x="47.5"
	y="12.5"
	width="5"
	height="40"
	rx="2.5"
	ry="2.55"
	/>
	<rect
	id="min"
	x="48.5"
	y="12.5"
	width="3"
	height="40"
	rx="2"
	ry="2"
	/>
	<line
	id="sec"
	x1="50"
	y1="50"
	x2="50"
	y2="16"
	/>
	</g>
	<circle class="dot" cx="50" cy="50" r="3" />
	</svg>
	<div id="digital">
	00:00:00
	</div>
	<div class="title">
	l'horloge
	</div>
	</div>
	<script id="jsbin-javascript">
	'use strict';

	var _slicedToArray = (function () { function sliceIterator(arr, i) { var _arr = []; var _n = true; var _d = false; var _e = undefined; try { for (var _i = arr[Symbol.iterator](), _s; !(_n = (_s = _i.next()).done); _n = true) { _arr.push(_s.value); if (i && _arr.length === i) break; } } catch (err) { _d = true; _e = err; } finally { try { if (!_n && _i['return']) _i['return'](); } finally { if (_d) throw _e; } } return _arr; } return function (arr, i) { if (Array.isArray(arr)) { return arr; } else if (Symbol.iterator in Object(arr)) { return sliceIterator(arr, i); } else { throw new TypeError('Invalid attempt to destructure non-iterable instance'); } }; })();

	var rotate = function rotate(el, deg) {
	return el.setAttribute('transform', 'rotate(' + deg + ' 50 50)');
	};

	var pad = function pad(n) {
	return n.toString().padStart(2, '0');
	};

	function updateClock(now) {
	var time = now.map(pad).join(':');

	digital.innerHTML = time;
	}

	var now = function now(d) {
	return ['Hour', 'Minute', 'Second'].map(function (x) {
	return d['get' + x + 's']();
	});
	};

	var tick = function tick() {
	var _now = now(new Date());

	var _now2 = _slicedToArray(_now, 3);

	var h = _now2[0];
	var m = _now2[1];
	var s = _now2[2];

	updateClock([h, m, s]);
	rotate(sec, 6 * s);
	rotate(min, 6 * m);
	rotate(hour, 30 * (h % 12) + m / 2);
	};

	tick();
	setInterval(tick, 1000);
	</script>


	<script id="jsbin-source-css" type="text/css">body {
	margin: 0;
	background-color: #99B898;
	}

	.clock-container {
	margin: 10px auto;
	display: inline-block;
	position: relative;
	width: 100%;
	padding-bottom: 100%;
	vertical-align: middle;
	overflow: hidden;
	fill: #2A363D;
	}

	.face {
	stroke-width: 2px;
	stroke: #E84A5F;
	}

	#hour {
	stroke-width: .6px;
	fill: #2A363D;
	stroke: #FECEA8;
	}

	#min {
	stroke-width: .6px;
	fill: #2A363D;
	stroke: #FF847C;
	}

	#sec {
	stroke: #E84A5F;;
	stroke-width: 1.5px;
	border-radius: 3px;
	}

	.dot {
	stroke-width: .5px;
	stroke: #FFF;
	fill: #E84A5F;
	}

	.title {
	margin: 10px;
	padding: 10px;
	text-align: center;
	font-size: 80px;
	color: 2A363D;
	}

	#digital {
	font-family: 'Share Tech Mono', monospace;
	font-size: 40px;
	font-weight: 600;
	line-height: 1.75em;
	color: #2A363D;
	border: solid 1px #ccc;
	border-radius: 5px;
	background: #FECEA8;
	text-align: center;
	padding: 5px 10px 0;
	margin: auto;
	width: 240px;
	}</script>

	<script id="jsbin-source-javascript" type="text/javascript">const rotate = (el, deg) =>
	el.setAttribute(
	'transform',
	`rotate(${deg} 50 50)`
	)

	const pad = n => n.toString().padStart(2, '0')

	function updateClock(now ) {
	const time = now.map(pad).join(':')

	digital.innerHTML = time
	}

	const now = d =>
	['Hour', 'Minute', 'Second'].map(x => d[`get${x}s`]())

	const tick = () => {
	const [h, m, s] = now(new Date())

	updateClock([h, m, s])
	rotate(sec, 6 * s)
	rotate(min, 6 * m)
	rotate(hour, 30 * (h % 12) + m / 2)
	}

	tick()
	setInterval(tick, 1000)</script></body>
	</html>