diff --git a/JS_Clock/alvalle09/css/style.css b/JS_Clock/alvalle09/css/style.css new file mode 100644 index 000000000..73bc08e93 --- /dev/null +++ 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 new file mode 100644 index 000000000..13f5e82d5 --- /dev/null +++ b/JS_Clock/alvalle09/index.html @@ -0,0 +1,29 @@ + + + + + JS + CSS Clock + + + + + +
+
+
+ Hour +
+
+ Minute +
+
+
+
+ + + + + + + + diff --git a/JS_Clock/alvalle09/js/script.js b/JS_Clock/alvalle09/js/script.js new file mode 100644 index 000000000..9bc596916 --- /dev/null +++ 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(); + +