JacobHelton57/blank-clock-face.png

## blank-clock-face.png

      
    Raw
  

              blank-clock-face.png
            
          
## index.html
<!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-container hour-face">
        <div class="hand hour-hand"></div>
      </div>
      <div class="hand-container min-face">
        <div class="hand min-hand"></div>
      </div>
      <div class="hand-container second-face">
        <div class="hand second-hand"></div>
      </div>
      <div class="center-peg"></div>
    </div>
  </div>
  <div class="digital">
    <h1><span id="hours">12</span>:<span id="minutes">00</span></h1>
  </div>
</body>

</html>

## script.js
const secondHand = document.querySelector('.second-hand');
  const minuteHand = document.querySelector('.min-hand');
  const hourHand = document.querySelector('.hour-hand');
  const hoursText = document.querySelector('#hours');
  const minutesText = document.querySelector('#minutes');

  function setDate() {
    const now = new Date()

    const seconds = now.getSeconds();
    const minutes = now.getMinutes();
    const hours = now.getHours();

    const secondsDegrees = ((seconds / 60) * 360) + 90;
    const minutesDegrees = ((minutes / 60) * 360) + 90;
    const hoursDegrees = ((hours / 12) * 360) + 90;

    secondHand.style.transform = `rotate(${secondsDegrees}deg)`;
    minuteHand.style.transform = `rotate(${minutesDegrees}deg)`;
    hourHand.style.transform = `rotate(${hoursDegrees}deg)`;

    console.log(hours + ':' + minutes + ':'+ seconds);
    hoursText.innerHTML = "" + ((hours%12 < 10) ?"0" :" ") + hours%12;
    minutesText.innerHTML = "" + ((minutes < 10) ? "0" : "") + minutes;
  }

  setInterval(setDate, 1000);

## simple-clock.markdown

      
    Raw
  

              simple-clock.markdown
            
          
    Simple Clock

Simple edit of the clock created in day 2 of the javascript30.com tutorial series.
A Pen by Jacob Helton on CodePen.
License.

  
## style.css
html {
      background: url(https://images.unsplash.com/photo-1445112098124-3e76dd67983c?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=1347&q=80);
      background-size: cover;
      font-family: 'helvetica neue';
      text-align: center;
      font-size: 10px;
    }

    body {
      margin: 0;
      font-size: 2rem;
      display: flex;
      flex-direction: column;
      flex: 1;
      min-height: 100vh;
      align-items: center;
      justify-content: center;
    }

    .clock {
      background: url(blank-clock-face.png);
      background-size: contain;
      background-repeat: none;
      width: 30rem;
      height: 30rem;
      vertical-align: middle;
      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-container {
      position: absolute;
      width: 100%;
      height: 100%;
    }

    .hour-face {
      transform: translateY(-6px);
    }

    .min-face {
      transform: translateY(-3px);
    }

    .second-face {
      transform: translateY(-1.5px);
    }

    .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.1, 2.7, 0.58, 1);
    }

    .hour-hand {
      height: 12px;
      width: 25%;
      left: 25%;
    }

    .min-hand {
      width: 45%;
      left: 5%;
    }

    .second-hand {
      background: red;
      height: 3px;
    }

    .center-peg {
      padding: 3%;
      background: white;
      position: absolute;
      top: 47%;
      left: 47%;
      border-radius: 50%;
      transform-origin: 100%;
    }

    .digital {
      width: 30rem;
      height: 10rem;
      color: #FFFFFF;
      font-family: sans-serif;
    }
	<!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-container hour-face">
	<div class="hand hour-hand"></div>
	</div>
	<div class="hand-container min-face">
	<div class="hand min-hand"></div>
	</div>
	<div class="hand-container second-face">
	<div class="hand second-hand"></div>
	</div>
	<div class="center-peg"></div>
	</div>
	</div>
	<div class="digital">
	<h1><span id="hours">12</span>:<span id="minutes">00</span></h1>
	</div>
	</body>

	</html>
	const secondHand = document.querySelector('.second-hand');
	const minuteHand = document.querySelector('.min-hand');
	const hourHand = document.querySelector('.hour-hand');
	const hoursText = document.querySelector('#hours');
	const minutesText = document.querySelector('#minutes');

	function setDate() {
	const now = new Date()

	const seconds = now.getSeconds();
	const minutes = now.getMinutes();
	const hours = now.getHours();

	const secondsDegrees = ((seconds / 60) * 360) + 90;
	const minutesDegrees = ((minutes / 60) * 360) + 90;
	const hoursDegrees = ((hours / 12) * 360) + 90;

	secondHand.style.transform = `rotate(${secondsDegrees}deg)`;
	minuteHand.style.transform = `rotate(${minutesDegrees}deg)`;
	hourHand.style.transform = `rotate(${hoursDegrees}deg)`;

	console.log(hours + ':' + minutes + ':'+ seconds);
	hoursText.innerHTML = "" + ((hours%12 < 10) ?"0" :" ") + hours%12;
	minutesText.innerHTML = "" + ((minutes < 10) ? "0" : "") + minutes;
	}

	setInterval(setDate, 1000);
	html {
	background: url(https://images.unsplash.com/photo-1445112098124-3e76dd67983c?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=1347&q=80);
	background-size: cover;
	font-family: 'helvetica neue';
	text-align: center;
	font-size: 10px;
	}

	body {
	margin: 0;
	font-size: 2rem;
	display: flex;
	flex-direction: column;
	flex: 1;
	min-height: 100vh;
	align-items: center;
	justify-content: center;
	}

	.clock {
	background: url(blank-clock-face.png);
	background-size: contain;
	background-repeat: none;
	width: 30rem;
	height: 30rem;
	vertical-align: middle;
	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-container {
	position: absolute;
	width: 100%;
	height: 100%;
	}

	.hour-face {
	transform: translateY(-6px);
	}

	.min-face {
	transform: translateY(-3px);
	}

	.second-face {
	transform: translateY(-1.5px);
	}

	.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.1, 2.7, 0.58, 1);
	}

	.hour-hand {
	height: 12px;
	width: 25%;
	left: 25%;
	}

	.min-hand {
	width: 45%;
	left: 5%;
	}

	.second-hand {
	background: red;
	height: 3px;
	}

	.center-peg {
	padding: 3%;
	background: white;
	position: absolute;
	top: 47%;
	left: 47%;
	border-radius: 50%;
	transform-origin: 100%;
	}

	.digital {
	width: 30rem;
	height: 10rem;
	color: #FFFFFF;
	font-family: sans-serif;
	}