Website checklist script

hercMagic.js

(function() {

/* Create an element with tag `tag`, style `style`, and content `content` (array, ) */
function $el(tag, style, content, attrs) {
  const el = document.createElement(tag);
  Object.assign(el.style, style);

  if(attrs && attrs.length)
    Object.keys(attrs).forEach(key => el.setAttribute(key, attrs[key]));

  if(typeof content === 'object') {
    (typeof content.length !== 'undefined' ? content : [content]).forEach(el.appendChild.bind(el));
  } else {
    el.innerHTML = content;
  }

  return el;
}

// HercMagic creates a check list for students to tell them what they're doing wrong!!
class HercMagic {
  constructor(title) {
    if(window.hercMagic) {
      const el = window.hercMagic;
      Object.assign(el.style, {
        opacity: 0,
        transform: 'scale(0.3) translateY(-200px)',
      });
      setTimeout(() => el.remove(), 1000);
    }

    // List of test cases added with .test
    this.cases = [];

    // Element holding the list content
    const content = this.content = $el('div', {}, '');
    const progress = this.progress = $el('div', {
      height: '8px',
      width: 0,
      background: 'linear-gradient(to bottom, transparent, #afa)',
      borderBottomRightRadius: '4px',
      borderBottomLeftRadius: '4px',
      transition: 'width 2s ease',
    }, '');

    // Core HTML for the on screen display
    const osd = this.osd = window.hercMagic = $el('div', {
      fontFamily: 'Tahoma, Arial, sans-serif',
      bottom: '0px',
      boxSizing: 'border-box',
      left: 0,
      lineHeight: 1,
      opacity: 0,
      padding: '16px',
      position: 'fixed',
      transform: 'scale(0.9) translateY(100px)',
      transition: 'all 1s ease',
      width: '350px',
    },
      $el('div', {
        background: 'rgba(0, 0, 0, 0.4)',
        borderRadius: '4px',
        position: 'relative',
        color: '#fff',
        padding: '8px',
      }, [
        $el('header', {
          borderBottom: '2px solid white',
          fontWeight: 'bold',
          marginBottom: '4px',
          paddingBottom: '4px',
          textAlign: 'center',
        }, title),
        content,
        $el('footer', {
          background: 'linear-gradient(to bottom, transparent, #a44)',
          height: '8px',
          position: 'absolute',
          bottom: 0,
          left: 0,
          width: '100%',
          borderBottomRightRadius: '4px',
          borderBottomLeftRadius: '4px',
        }, progress),
      ]),
    );

    // Allow the element to move across the screen if it's covering up important content
    osd.addEventListener('mouseenter', () => {
      if(osd.style.left === '0px') {
        osd.style.left = '100%';
        osd.style.transform = 'translateX(-100%)';
      } else  {
        osd.style.left = 0;
        osd.style.transform = '';
      }
    });
  }

  // Name is the test case name, func should return an error message if something went wrong
  test(name, func) {
    this.cases.push({name: name, func: func});
    return this;
  }

  done() {
    const list = this.content;

    if(this.cases.length === 0) {
      list.appendChild($el('div', {textAlign: 'center', fontVariant: 'italic'}, 'You need some test cases!'));
    }

    const percent = this.cases.filter(test => {
      const error = test.func();

      list.appendChild($el('div', {
        display: 'flex',
        alignItems: 'center',
        marginBottom: '2px',
        fontSize: '14px',
      }, [
        $el('span', {flex: '1'}, error || test.name),
        $el('div', {
          alignSelf: 'flex-start',
          backgroundColor: error ? '#a44' : '#5d5',
          width: '16px',
          height: '16px',
          marginRight: '4px',
          display: 'flex',
          alignItems: 'center',
          justifyContent: 'center',
          borderRadius: '50%',
        }, error ? '✗' :  '✓'),
      ]));

      return !error;
    }).length / (this.cases.length || 1);

    if(percent !== 1)
      this.progress.style.borderBottomRightRadius = 0;

    document.body.appendChild(this.osd);
    setTimeout(() => {
      Object.assign(this.osd.style, {
        opacity: 1,
        transform: 'scale(1)',
      });
      this.progress.style.width = percent * 100 + '%';
    }, 100);
  }

}

function launch() {
  console.log('Herc Magic 1.0.0 Launched! He\'s watching so you better not cheat!');

  new HercMagic('CS146HW1 Checklist')
  .test('Title Tag', () => !document.head.querySelector('title') && 'Missing <title>')
  .test('Style', () => {
    if(!document.head.querySelector('style') && !document.head.querySelector('link'))
      return 'Missing <style> or <link>';

    if(Array.from(document.body.querySelectorAll('*')).filter(el => el.attributes.style).length > 0)
      return 'Avoid style="" property';
  })
  .test('Header tag', () => !document.body.querySelector('header') && 'Missing <header> tag')
  .test('Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor', () => Math.random() > 0.5 && 'Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor')
  .done();
}

if (document.readyState === 'complete' || document.readyState === 'loaded') {
  launch();
}

window.addEventListener('DOMContentLoaded', launch);

})();