SCSS

by Charlie Vaughan

HTML

<time id="analogueClock" class="analogueClock" datetime="">
  <span id="hoursHand" class="analogueClock__hours"></span>
  <span id="minutesHand" class="analogueClock__minutes"></span>
  <span id="secondsHand" class="analogueClock__seconds"></span>
</time>
<time id="digitalClock" class="digitalClock" datetime="">&nbsp;</time>
<form class="form">
  <label id="switch" class="form__switch">
    <input class="form__input" type="checkbox" checked="checked">
    <span class="form__slider"></span>
  </label>
</form>

SCSS

$dark: #1e1e1e;
$light: #e0e0e0;
$accent: #bb86fc;
$charcoal: #2e2e2e;

body {
  color: $light;
  background: $dark;
  padding: 20px;
  font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
  font-weight: 200;
  position: relative;
}

.analogueClock {
  width: 350px;
  height: 350px;
  border: 4px solid $light;
  border-radius: 175px;
  margin: 40px auto 30px;
  position: relative;
  display: block;
  
  span {
    width: 4px;
    content: " ";
    background: $light;
    transform-origin: bottom center;
    position: absolute;
    bottom: 50%;
    left: 50%;
  }
  
  .analogueClock__hours {
    height: 120px;  
  }

  .analogueClock__minutes {
    height: 160px;  
  }

  .analogueClock__seconds {
    width: 2px;
    height: 160px;  
  }
}

.digitalClock {
  font-size: 5rem;
  text-align: center;
  margin: 20px auto;
  display: block;
}

.form {
  position: absolute;
  top: 10px;
  left: 10px;
}

.form__slider {
  border-radius: 34px;
  position: absolute;
  cursor: pointer;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-color: $charcoal;
  -webkit-transition: 0.4s;
  transition: 0.4s;
  
  &::before {
    border-radius: 50%;
    position: absolute;
    content: "";
    height: 26px;
    width: 26px;
    left: 4px;
    bottom: 4px;
    background-color: $light;
    -webkit-transition: 0.4s;
    transition: 0.4s;
  }
}

.form__input {
  opacity: 0;
  width: 0;
  height: 0;
  
  &:checked + .form__slider {
    background-color: $accent;
  }
  
  &:focus + .form__slider {
    box-shadow: 0 0 1px $accent;
  }
  
  &:checked + .form__slider::before {
    -webkit-transform: translateX(26px);
    -ms-transform: translateX(26px);
    transform: translateX(26px);
  }
}

.form__switch {
  position: relative;
  display: inline-block;
  width: 60px;
  height: 34px;
}

JavaScript

const Time = function() {
	this.currentTime = null;
  this.currentHours = null;
	this.currentMinutes = null;
	this.currentSeconds = null;
  this.currentTimeString = null;
};
const $analogueClock = document.getElementById("analogueClock");
const $digitalClock = document.getElementById("digitalClock");
const $hoursHand = document.getElementById("hoursHand");
const $minutesHand = document.getElementById("minutesHand");
const $secondsHand = document.getElementById("secondsHand");
const $switch = document.getElementById("switch");
let timer = null;
let time = null;


Time.prototype = {

  init: function () {
    this.getTime();
    this.setDigitalTime();
    this.setAnalogueTime();
  },

  getTime: function () {
    let paddedHours = null;
    let paddedMinutes = null;
    let paddedSeconds = null;

    // Get current time
    this.currentTime = new Date();

    // Parse Minutes, hours and seconds
    this.currentHours = this.currentTime.getHours();
    this.currentMinutes = this.currentTime.getMinutes();
    this.currentSeconds = this.currentTime.getSeconds();

    // Pad with zeros to 2 digits
    paddedHours = this.padDigits(this.currentHours);
    paddedMinutes = this.padDigits(this.currentMinutes);
    paddedSeconds = this.padDigits(this.currentSeconds);

    // Format time string
    this.currentTimeString = paddedHours + ":" + paddedMinutes + ":" + paddedSeconds;
  },

  padDigits: function (value) {
    const valuePadded = (value < 10 ? "0" : "") + value;
    return valuePadded;
  },

  convertDegrees: function (value) {
    const degrees = (360/60) * value;
    return degrees;
  },
  
  timeConvert (time) {
    // Check correct time format and split into components
    time = time.toString ().match (/^([01]\d|2[0-3])(:)([0-5]\d)(:[0-5]\d)?$/) || [time];

    if (time.length > 1) { // If time format correct
      time = time.slice (1);  // Remove full string match value
      time[5] = +time[0] < 12 ? 'AM' : 'PM'; // Set AM/PM
      time[0] = +time[0] % 12 ||...