JS Clock - Javascript

JS Clock.html

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

js-clock-javascript.markdown

JS Clock - Javascript

A Pen by Vasilii V on CodePen.

License.

script.js

seconds = ()=> {
  const time = new Date();
  const seconds = time.getSeconds();
  const secondPosition = (seconds/60)*360;
  let secondhand = document.getElementById('second-hand');
  if (secondPosition === 0) {    
    secondhand.style.transform = `rotate(90deg)`
  }
  
 else { 
   secondhand.style.transform = `rotate(${secondPosition+90}deg)`
      }
}
minutes = () => {
  const time = new Date();
  const minutes = time.getMinutes();
  const minutePosition = (minutes/60)*360;
  let minuteHand = document.getElementById('min-hand');
  if (minutePosition === 0) {    
    minuteHand.style.transform = `rotate(90deg)`
  }
  else {
  minuteHand.style.transform = `rotate(${minutePosition+90}deg)`
  }
}
hours = () => {
  const time = new Date();
  const hours = time.getHours();
  const hourPosition = (hours/12)*360;
  let hourHand = document.getElementById('hour-hand');
  if (hourPosition === 0) {    
    hourHand.style.transform = `rotate(90deg)`
  }
  else {
  hourHand.style.transform = `rotate(${hourPosition+90}deg)`
  }
}
setInterval(seconds,1000);
setInterval(minutes,1000);
setInterval(hours,1000);
ftime = () => {
  const time = new Date();
  document.getElementById('fulltime').innerHTML = time;
}
setInterval(ftime,1000)

style.css

 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 {
      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: 50%;
      margin: 50px;
      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);
    background-color:white;
    }
#fulltime {
  color: white;
}