WIP. Clock plugin that will be extendable and is very performant. Right now only has analogue clock.

faceClock.js

// Link to codepen https://codepen.io/jaspercreel/pen/MvxpKZ?editors=0010

const clock = function() {
  
  const create = {
    
    init (el, opts = {}) {

      if (!(el instanceof HTMLElement)) {
        console.log(el);
        el = document.querySelector(el);
      }
      
      if (!el) {
        throw new Error('Clock must be instantiated with html element or valid query');
        return;
      }
      
      const date = new Date();
      
      const newClock = {
        seconds: date.getSeconds(),
        minutes: date.getMinutes(),
        hours: date.getHours()
      }
      
      this.createTicks(el);
      
      [secHand, minHand, hourHand] = this.createHands(el);
      
      newClock.secHand = secHand;
      newClock.minHand = minHand;
      newClock.hourHand = hourHand;
      
      clockRotate = this.rotate.bind(newClock);
      clockRotate();
      
      setInterval(clockRotate, 1000);
    },
    
    createTicks(el) {
      const container = this.createNewElement('div', {classList: ['ticks']});
      let n = 12;
      let tickStart = 0;
      
      while (n > 0) {
        tickStart += 30;
        let tick = this.createNewElement('span', {classList: ['tick']});
        tick.setAttribute('style', 'transform: rotate(' + tickStart + 'deg)')
        container.appendChild(tick);
        n--;
      }
      
      el.appendChild(container);
    },
    
    createHands(el) {
      const fragment = document.createDocumentFragment();
      
      let nodeList = [];
      nodeList.push(this.createNewElement('span', {id: 'secHand', classList: ['hand']}));
      nodeList.push(this.createNewElement('span', {id: 'minHand', classList: ['hand']}));
      nodeList.push(this.createNewElement('span', {id: 'hourHand', classList: ['hand']}));
      
      for (let i = 0; i < nodeList.length; i++) {
        fragment.appendChild(nodeList[i]);
      }
      
      el.appendChild(fragment);
      
      return nodeList;
    },
    
    createNewElement(tagName = 'div', opts = {}) {
      let newEl = document.createElement(tagName);
      
      if (opts.classList) {
        for (let i = 0; i < opts.classList.length; i++) {
          newEl.classList.add(opts.classList[i]);
        }
      }
      
      if (opts.id) {
        newEl.id = opts.id;
      }
      
      return newEl;
    },
    
    rotate() {
      this.seconds++;
      if (this.seconds === 60) {
        this.seconds = 0;
        this.minutes++;
      }

      if (this.minutes === 60) {
        this.minutes = 0;
        this.hours++;
      }

      if (this.hours === 12) {
        this.hours = 0;
      }

      const secRotate = ((360/60) * this.seconds) -90;
      const minRotate = ((360/60) * this.minutes) - 90 + ((this.seconds / 60) * 6);
      const hourRotate = ((360/12) * this.hours) - 90 + ((this.minutes / 60) * 30); 
      
      this.secHand.style.transform = `rotate(${secRotate}deg)`;
      this.minHand.style.transform = `rotate(${minRotate}deg)`;
      this.hourHand.style.transform = `rotate(${hourRotate}deg)`;
    }
    
  }
  
  return Object.assign({}, create);
  
}();

// Example using a query selector with an id of clock: 
// clock.init('#clock');