exercises/02 - JS + CSS Clock/index.html

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <title>Document</title>
</head>

<body>


  <div class="clock">
    <div class="clock-face">
      <div class="hand hour-hand"></div>
      <div class="hand min-hand"></div>
      <div class="hand second-hand"></div>
    </div>
  </div>

  <style>
    html {
      background: #018DED url(http://unsplash.it/1500/1000?image=881&blur=50);
      background-size: cover;
      font-family: 'helvetica neue';
      text-align: center;
      font-size: 10px;
    }

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

  </style>

  <script>
    /*  GOAL: Write the JavaScript code necessary to transform the HTML elements
   *  on the page into a functioning clock.
   */

    // Create references to the HTML elements that we want to transform
    (()=> {
      const
        secondHand = document.querySelector('.second-hand'),
        minuteHand = document.querySelector('.min-hand'),
        hourHand = document.querySelector('.hour-hand')

      // Helper function responsible for calculating the amount to rotate a hand
      const calcDegrees = (time, max) => ((time / max) * 360) + 90;
      // Call function once every second
      setInterval(() => {

      // Create new Date object
      const now = new Date();

      // Get current seconds, minutes, & hours and calculate the degree shift
      const
        secondHandDegrees = calcDegrees(now.getSeconds(), 60),
        minuteHandDegrees = calcDegrees(now.getMinutes(), 60),
        hourHandDegrees = calcDegrees(now.getHours(), 12);

      // Apply rotation to the clock hands corresponding with current time value
      secondHand.style.transform = `rotate(${secondHandDegrees}deg)`;
      minuteHand.style.transform = `rotate(${minuteHandDegrees}deg)`;
      hourHand.style.transform = `rotate(${hourHandDegrees}deg)`;
    }, 1000);
    })();
  </script>
</body>

</html>