css + js clock

corneliugaina · May 28, 2019 · 461e5b7 · 461e5b7
1 parent 90ae590
commit 461e5b7
Show file tree

Hide file tree

Showing 4 changed files with 98 additions and 0 deletions.
diff --git a/2-css+js-clock/index.html b/2-css+js-clock/index.html
@@ -0,0 +1,86 @@
+<!DOCTYPE html>
+<html lang="en">
+    <head>
+    <meta charset="UTF-8">
+    <title>JS + CSS Clock</title>
+    </head>
+    <body>
+        <div class="clock">
+            <div class="clock-face">
+            <div class="hand hour-hand" style="transform: rotate(540deg);"></div>
+            <div class="hand min-hand" style="transform: rotate(180deg);"></div>
+            <div class="hand second-hand" style="transform: rotate(60deg); transition-timing-function: ease-in-out"></div>
+        </div>
+        <style>
+            html {
+                background: rgb(92, 116, 133);
+                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-origin: 100%;
+                transform: rotate(90deg);
+                transition: all 0.05s; 
+                transition-timing-function: cubic-bezier(0.02, 0.87, 1, 1.43);
+            }
+        </style>
+        <script>
+
+            // configurer le changement des minutes et heure lorsque l'aiguille des minutes fait un tour. 
+
+            const secondHand = document.querySelector('.second-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) + 90;
+                minsHand.style.transform = `rotate(${minsDegrees}deg`;
+
+                const hour = now.getminutes();
+                const hourDegrees = ((mins / 12) * 360) + 90;
+                hourHand.style.transform = `rotate(${hourDegrees}deg)`;
+            }
+            setInterval(setDate,1000);
+        </script>
+    </body>
+</html>
diff --git a/index.html b/index.html
@@ -0,0 +1,12 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <meta http-equiv="X-UA-Compatible" content="ie=edge">
+    <title>Document</title>
+</head>
+<body>
+
+</body>
+</html>
diff --git a/scripts.js b/scripts.js
diff --git a/style.css b/style.css