mitsuruog
diff --git a/‎02 - JS and CSS Clock/index-FINISHED.html
Lines changed: 0 additions & 99 deletions b/‎02 - JS and CSS Clock/index-FINISHED.html
Lines changed: 0 additions & 99 deletions
diff --git a/‎02 - JS and CSS Clock/index-START.html
Lines changed: 0 additions & 74 deletions b/‎02 - JS and CSS Clock/index-START.html
Lines changed: 0 additions & 74 deletions
diff --git a/‎02 - JS and CSS Clock/index.html
Lines changed: 25 additions & 0 deletions b/‎02 - JS and CSS Clock/index.html
Lines changed: 25 additions & 0 deletions
diff --git a/‎02 - JS and CSS Clock/main.js
Lines changed: 20 additions & 0 deletions b/‎02 - JS and CSS Clock/main.js
Lines changed: 20 additions & 0 deletions
diff --git a/‎02 - JS and CSS Clock/style.css
Lines changed: 51 additions & 0 deletions b/‎02 - JS and CSS Clock/style.css
Lines changed: 51 additions & 0 deletions
@@ -0,0 +1,25 @@
+<!DOCTYPE html>
+<html lang="en">
+
+<head>
+  <meta charset="UTF-8">
+  <title>JS + CSS Clock</title>
+  <link rel="stylesheet" href="style.css">
+</head>
+
+<body>
+
+
+  <div class="clock">
+    <div class="clock-face">
+      <div class="hand hour-hand"></div>
+      <div class="hand min-hand"></div>
+      <div class="hand second-hand"></div>
+    </div>
+  </div>
+
+  <script src="main.js"></script>
+
+</body>
+
+</html>
@@ -0,0 +1,20 @@
+const $secondHand = document.querySelector(".second-hand");
+const $minHand = document.querySelector(".min-hand");
+const $hourHand = document.querySelector(".hour-hand");
+
+function setDate() {
+  const now = new Date();
+  const secounds = now.getSeconds();
+  const secoundsDegree = ((secounds / 60) * 360) + 90;
+  $secondHand.style.transform = `rotate(${secoundsDegree}deg)`
+
+  const mins = now.getMinutes();
+  const minssDegree = ((mins / 60) * 360) + 90;
+  $minHand.style.transform = `rotate(${minssDegree}deg)`
+
+  const hours = now.getHours();
+  const hoursDegree = ((hours / 60) * 360) + 90;
+  $hourHand.style.transform = `rotate(${hoursDegree}deg)`
+}
+
+setInterval(() => setDate(), 1000);
@@ -0,0 +1,51 @@
+html {
+  background: #018DED url(https://unsplash.it/1500/1000?image=881&blur=5);
+  background-size: cover;
+  font-family: 'helvetica neue';
+  text-align: center;
+  font-size: 10px;
+}
+
+body {
+  margin: 0;
+  font-size: 2rem;
+  display: flex;
+  flex: 1;
+  min-height: 100vh;
+  align-items: center;
+}
+
+.clock {
+  width: 30rem;
+  height: 30rem;
+  border: 20px solid white;
+  border-radius: 50%;
+  margin: 50px auto;
+  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 {
+  position: relative;
+  width: 100%;
+  height: 100%;
+  transform: translateY(-3px);
+  /* account for the height of the clock hands */
+}
+
+.hand {
+  width: 50%;
+  height: 6px;
+  background: black;
+  position: absolute;
+  top: 50%;
+  transform: rotate(90deg);
+  transform-origin: 100%;
+  transition: all 0.05s;
+  transition-timing-function: cubic-bezier(0.55, -1.14, 0.74, 2.87);
+}