new clock

SheaClose · SheaClose · commit a999ed94455f · 2016-12-17T14:40:18.000-06:00
diff --git a/2MYCSSClock/6b9y2vdjy_k-francesco-gallarotti.jpg b/2MYCSSClock/6b9y2vdjy_k-francesco-gallarotti.jpg
diff --git a/2MYCSSClock/index.html b/2MYCSSClock/index.html
@@ -0,0 +1,20 @@
+<!DOCTYPE html>
+<html>
+	<head>
+		<meta charset="utf-8">
+		<title>My Clock</title>
+		<link rel="stylesheet" href="style.css">
+	</head>
+	<body>
+
+		<div class="clock-border">
+			<div class="clock-face">
+				<div class="hand sec"></div>
+				<div class="hand min"></div>
+				<div class="hand hr"></div>
+			</div>
+		</div>
+
+		<script src="index.js" charset="utf-8"></script>
+	</body>
+</html>
diff --git a/2MYCSSClock/index.js b/2MYCSSClock/index.js
@@ -0,0 +1,18 @@
+const secondHand = document.querySelector(".sec")
+const minuteHand = document.querySelector(".min")
+const hourHand = document.querySelector(".hr")
+function setDate () {
+	const now = new Date()
+			, secs = now.getSeconds()
+			, mins = now.getMinutes()
+			, hrs = now.getHours()
+			, secondsDegrees = ((secs / 60) * 360)+90
+			, minutesDegrees = ((mins / 60) * 360)+90
+			, hoursDegrees = ((hrs / 12) * 360)+90
+
+	secondHand.style.transform = `rotate(${secondsDegrees}deg)`
+	minuteHand.style.transform = `rotate(${minutesDegrees}deg)`
+	hourHand.style.transform = `rotate(${hoursDegrees}deg)`
+}
+
+setInterval(setDate, 1000)
diff --git a/2MYCSSClock/style.css b/2MYCSSClock/style.css
@@ -0,0 +1,54 @@
+body {
+	background-image: url("6b9y2vdjy_k-francesco-gallarotti.jpg");
+	background-position: center;
+	background-repeat: no-repeat;
+	background-size: cover;
+	background-attachment: fixed;
+	display: flex;
+	justify-content: center;
+	text-align: center;
+	top: 50%;
+}
+.clock-border{
+	top: 5vh;
+	width: 70vh;
+	height: 70vh;
+	border-radius: 50%;
+	background-color: transparent;
+	border: 25px white solid;
+	position: relative;
+	padding:2rem;
+	box-shadow:
+		0 0 0 4px rgba(0,0,0,0.1),
+		inset 0 0 0 3px #EFEFEF,
+		inset 0 0 10px black,
+		0 0 10px rgba(0,0,0,0.2);
+}
+.clock-face {
+	border-radius: 35vh;
+	background-color: transparent;
+	position: relative;
+	width: 100%;
+	height: 100%;
+	transform: translateY(-3px); /* account for the height of the clock hands */
+}
+.hr {
+	background-color: honeydew;
+}
+.min {
+	background-color: maroon;
+}
+.sec {
+	background-color: slategrey;
+}
+.hand{
+	width:50%;
+	height:6px;
+	position: absolute;
+	top:50%;
+	transform-origin: 100%;
+	transform: rotate(90deg);
+	transition: all 0.05s;
+	transition-timing-function: cubic-bezier(0.1, 2.7, 0.58, 1);
+	border-radius: 50%
+}
