js clock with image background

Fred Valle · Fred Valle · commit 205f0857650b · 2020-10-29T15:51:43.000-05:00
diff --git a/JS_Clock/alvalle09/css/style.css b/JS_Clock/alvalle09/css/style.css
@@ -0,0 +1,80 @@
+html {
+  background: #018ded url(http://unsplash.it/1500/1000?image=881&blur=1);
+  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: 10%;
+  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-origin: 100%;
+  transform: rotate(90deg);
+}
+
+.hour-hand {
+  border: #018ded solid;
+  width: 50%;
+  height: 10px;
+  background: rgb(66, 173, 119);
+  position: absolute;
+  top: 50%;
+  transform-origin: 100%;
+  transform: rotate(90deg);
+}
+
+.min-hand {
+  border: #efefef solid;
+  width: 50%;
+  height: 7px;
+  background: rgb(135, 68, 223);
+  position: absolute;
+  top: 50%;
+  transform-origin: 100%;
+  transform: rotate(90deg);
+}
+
+.second-hand {
+  background: blue;
+  width: 50%;
+  height: 6px;
+  background: blue;
+  position: absolute;
+  top: 50%;
+  transform-origin: 100%;
+  transform: rotate(90deg);
+  transition: all 0.5s;
+  transition-timing-function: cubic-bezier(0.1, 2.7, 0.58, 1);
+}
diff --git a/JS_Clock/alvalle09/index.html b/JS_Clock/alvalle09/index.html
@@ -0,0 +1,29 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+  <meta charset="UTF-8">
+  <title>JS + CSS Clock</title>
+  <link rel="stylesheet" href="css/style.css">  
+</head>
+<body>
+
+
+    <div class="clock">
+      <div class="clock-face">
+        <div class="hour-hand">
+          Hour
+        </div>
+        <div class="min-hand">
+          Minute
+        </div>
+        <div class="second-hand"></div>
+      </div>
+    </div>
+
+    <script src="js/script.js"></script>
+    
+</body>
+
+
+
+</html>
diff --git a/JS_Clock/alvalle09/js/script.js b/JS_Clock/alvalle09/js/script.js
@@ -0,0 +1,26 @@
+  const secondHand = document.querySelector('.second-hand');
+  const minsHand = document.querySelector('.min-hand');
+  const hourHand = document.querySelector('.hour-hand');
+
+  
+    function setDate() {
+        const now = new Date();
+
+        const seconds = now.getSeconds();
+        const secondsDegrees = ((seconds / 60) * 360) + 90;
+        secondHand.style.transform = `rotate(${secondsDegrees}deg)`;
+
+        const mins = now.getMinutes();
+        const minsDegrees = ((mins / 60) * 360) + ((seconds/60)*6) + 90;
+        minsHand.style.transform = `rotate(${minsDegrees}deg)`;
+
+        const hour = now.getHours();
+        const hourDegrees = ((hour / 12) * 360) + ((mins/60)*30) + 90;
+        hourHand.style.transform = `rotate(${hourDegrees}deg)`;
+    }
+
+  setInterval(setDate, 1000);
+
+  setDate();
+
+  
