gorlandor/clock.markdown

## clock.markdown

      
    Raw
  

              clock.markdown
            
          
    Clock

A Pen by Giovanni Orlando on CodePen.
License.

  
## 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>

## 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;
}
	<!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>
	/*=========================
	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;
	}