Footer

footer.markdown

Footer

A Pen by Stanislav on CodePen.

License.

index.html

<div>Footer</div>

script.babel

class Footer {
  constructor() {
    this.link = document.createElement('a');
    this.link.appendChild(document.createTextNode('Beaglefoot'));
    this.link.setAttribute('href', 'https://github.com/Beaglefoot');
    this.link.setAttribute('target', '_blank')
    this.link.classList.add('footer__link');
    
    this.footer = document.createElement('footer');
    this.footer.appendChild(document.createTextNode('by '));
    this.footer.appendChild(this.link);
    this.footer.classList.add('footer');
  }

  appendToDocument() {
    document.body.appendChild(this.footer);
    return this;
  }

  removeFromDocument() {
    document.body.removeChild(this.footer);
    return this;
  }

  addClass(className) {
    this.footer.classList.add(className);
    return this;
  }
  
  provideFonts() {
    const fonts = document.createElement('link');
    fonts.setAttribute('rel', 'stylesheet');
    fonts.setAttribute('href', 'https://fonts.googleapis.com/css?family=VT323');
    document.head.appendChild(fonts);
    return this;
  }
  
  getStylesFromTemplate({ footer = {}, link = { hover: {} } } = {}) {
    return `
      .footer {
        align-self: flex-end;
        width: 100%;
        font-family: 'VT323';
        font-size: 14px;
        color: ${footer.color};
        text-align: center;
        padding: 0.2em;
        background: ${footer.background};
        transition: opacity 1s;
      }

      .footer--hidden {
        opacity: 0;
      }

      .footer__link {
        text-decoration: none;
        color: ${link.color};
        outline: none;
        transition: all 0.3s;
      }

      .footer__link:hover {
        color: ${link.hover.color};
        text-shadow: ${link.hover.textShadow};
      }
    `;
  }
  
  stylize({
    footer = {
      color: '#888',
      background: 'rgba(22, 22, 22, 0.1)'
    },
    link = {
      color: '#888',
      hover: {
        color: '#fff',
        textShadow: '0 0 2px #000'
      }
    }
  } = {}) {
    const styles = document.createElement('style');
    styles.innerHTML = this.getStylesFromTemplate({ footer, link });
    
    this.footer.classList.add('footer--hidden');
    addEventListener('load', () => this.footer.classList.remove('footer--hidden'));
    this.provideFonts();
    document.head.appendChild(styles);
    return this;
  }
}

style.css

html, body {
  height: 100%;
}

body {
  margin: 0;
  display: flex;
  flex-wrap: wrap;
}