Skip to content

Instantly share code, notes, and snippets.

@gorlandor

gorlandor/clock.markdown

Last active March 23, 2017 21:49
Show Gist options
  • Save gorlandor/58539459f9b274a4af42b94f6d8c24a0 to your computer and use it in GitHub Desktop.
Save gorlandor/58539459f9b274a4af42b94f6d8c24a0 to your computer and use it in GitHub Desktop.
Download ZIP
Clock
Raw
index.html
<!DOCTYPE html>
<html lang="en">
<head>
<title>06 - Clock</title>
<meta charset="UTF-8">
<meta name="author" content="Giovanni Orlando Rivera">
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta name="theme-color" content="#bada55">
<link href="./style.css" rel="stylesheet">
</head>
<body>
<div class="clock flex-vertically">
<h1>CSS Clock</h1>
<!--end heading level 1-->
<div class="clock__outer-shell flex-vertically">
<div class="marker marker--1-7"></div>
<div class="marker marker--2-8"></div>
<div class="marker marker--4-10"></div>
<div class="marker marker--5-11"></div>
<!--end markers-->
<div class="clock__inner-shell flex-vertically">
<div class="clock__axis"></div>
<div class="hand hour"></div>
<div class="hand minute"></div>
<div class="hand second"></div>
</div>
<!--end clock__inner-shell -->
</div>
<!--end clock__outer-shell -->
<time></time>
<!--end time-->
</div>
<script defer>
(function (window, document, undefined) {
'use strict';
class Clock {
constructor() {
this.secondHand = document.querySelector('.hand.second');
this.minsHand = document.querySelector('.hand.minute');
this.hourHand = document.querySelector('.hand.hour');
this.setTime = this.setTime.bind(this);
setInterval(this.setTime, 1000);
}
setTime() {
const now = new Date();
const seconds = now.getSeconds();
const secondsDegrees = ((seconds / 60) * 360) + 90;
this.secondHand.style.transform = `rotate(${secondsDegrees}deg)`;
const mins = now.getMinutes();
const minsDegrees = ((mins / 60) * 360) + 90;
this.minsHand.style.transform = `rotate(${minsDegrees}deg)`;
const hour = now.getHours();
const hourDegrees = ((hour / 12) * 360) + 90;
this.hourHand.style.transform = `rotate(${hourDegrees}deg)`;
document.querySelector('time').textContent = `${hour}:${mins}:${seconds}`;
}
}
new Clock();
}(window, document));
</script>
</body>
</html>
Raw
style.css
/*=========================
Layout
=========================*/
html,
body {
width: 100%;
height: 100%;
margin: 0;
padding: 0;
border: none;
background-color: #4f86f7;
font-size: 1rem;
font-family: Arial, Helvetica, sans-serif;
}
.flex-vertically {
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
}
.flex-horizontally {
display: flex;
flex-direction: row;
align-items: center;
justify-content: center;
}
.clock {
width: 100%;
height: 100%;
margin: 0;
padding: 0;
border: none;
}
/*=========================
Clock Shell
=========================*/
.clock__outer-shell {
position: relative;
width: 360px;
height: 360px;
border-radius: 180px;
background-color: black;
z-index: 0;
}
.clock__inner-shell {
position: relative;
width: 320px;
height: 320px;
border-radius: 160px;
background-color: antiquewhite;
z-index: 1;
}
/*=========================
Clock Axis
=========================*/
.clock__axis {
width: 8px;
height: 8px;
border-radius: 8px;
border: 4px solid #3060ff;
background-color: #bada55;
z-index: 2;
}
/*=========================
Clock Markers
=========================*/
/* Marker for: [6, 12] */
.clock__outer-shell::before,
.clock__outer-shell::after,
.clock__outer-shell .marker {
content: "";
position: absolute;
top: 0;
left: 50%;
z-index: 0;
width: 10px;
height: 100%;
margin-left: -5px;
background-color: #3060ff;
}
/* Marker for: [3, 9] */
.clock__outer-shell::after {
-webkit-transform: rotate(90deg);
transform: rotate(90deg);
}
.clock__outer-shell .marker {
width: 8px;
margin-left: -4px;
background-color: #bada55;
}
.clock__outer-shell .marker.marker--1-7 {
-webkit-transform: rotate(30deg);
transform: rotate(30deg)
}
.clock__outer-shell .marker.marker--2-8 {
-webkit-transform: rotate(60deg);
transform: rotate(60deg)
}
.clock__outer-shell .marker.marker--4-10 {
-webkit-transform: rotate(120deg);
transform: rotate(120deg)
}
.clock__outer-shell .marker.marker--5-11 {
-webkit-transform: rotate(150deg);
transform: rotate(150deg)
}
/*=========================
Clock Hands
=========================*/
.hand,
.hand.hour {
width: 30%;
height: 4px;
background-color: black;
position: absolute;
right: 50%;
-webkit-transform: rotate(90deg);
transform: rotate(90deg);
-webkit-transform-origin: 100%;
transform-origin: 100%;
}
.hand.minute {
width: 40%;
}
.hand.second {
width: 45%;
background-color: red;
}
/*=========================
Heading and Time
=========================*/
h1,
time {
margin: 1rem 0;
padding: 0;
font-size: 2rem;
font-weight: bold;
color: white;
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment