Beautified version of original HarlemShake script by Moovweb

harlem-shake.js

function doTheHarlemShake() {

  // OPTIONS

  let minHeight = 30,
    minWidth = 30,
    maxHeight = 350,
    maxWidth = 350,
    mp3Src = '//s3.amazonaws.com/moovweb-marketing/playground/harlem-shake.mp3',
    shakeMeClass = 'mw-harlem_shake_me',
    imFirstClass = 'im_first',
    letClasses = ['im_drunk', 'im_baked', 'im_trippin', 'im_blown', 'im_baked'],
    flashClass = 'mw-strobe_light',
    styleSrc = '//s3.amazonaws.com/moovweb-marketing/playground/harlem-shake-style.css',
    markerClass = 'mw_added_css',
    windowHeight = getWindowHeight(),
    yOffset = getPageYOffset(),
    pageElements = document.getElementsByTagName('*'),
    startElement = null

  // MAIN

  let Node = {}
  for (let elements = 0; elements < pageElements.length; elements++) {
    Node = pageElements[elements]
    if (isRightSize(Node) && isOnScreen(Node)) {
      startElement = Node
      break
    }
  }
  
  addStyleSheet()
  main()

  let Elements = []
  for (let elements = 0; elements < pageElements.length; elements++) {
    let A = pageElements[elements]
    if (isRightSize(A)) Elements.push(A)
  }

  /* DEBUG:
    if (startElement === null) {
      if (process.env.NODE_ENV === 'development') {
        console.warn('Could not find a node of the right size. Please try a different page.')
      }
      return
    } else {
      if (process.env.NODE_ENV === 'development') {
        console.log('Found start element: ', Node, ' with width ' + getSize(Node).width + ', height ' + getSize(Node).height + ', and a total Y offset of ' + heightFromTop(Node))
      }
    }
  */

  // FUNCTIONS

  function main () {
    let e = document.createElement('audio')
    e.setAttribute('class', markerClass)
    e.src = mp3Src
    e.loop = false
    /* Node.js + DEBUG:
    if (process.env.NODE_ENV === 'development') {
      e.innerHTML = '<p>If you are reading this, it is because your browser does not support the audio element.' +
        +'We recommend that you get a new browser.</p>'
      document.body.appendChild(e)
    }
    */
    e.addEventListener('ended', () => {
      removeAllShakeMeClasses()
      removeAddedElements()
    }, true)
    e.addEventListener('canplay', () => {
      setTimeout(() => {
        addImFirstClass(startElement)
      }, 500)
      setTimeout(() => {
        removeAllShakeMeClasses()
        flashEffect()
        for (let e = 0; e < Elements.length; e++) addShakeMeClass(Elements[e])
      }, 15000)
    }, true)
    e.play()
  }

  function addStyleSheet () {
    let e = document.createElement('link')
    e.setAttribute('type', 'text/css')
    e.setAttribute('rel', 'stylesheet')
    e.setAttribute('href', styleSrc)
    e.setAttribute('class', markerClass)
    document.body.appendChild(e)
  }

  function removeAddedElements () {
    let e = document.getElementsByClassName(markerClass)
    for (let t = 0; t < e.length; t++) {
      document.body.removeChild(e[t])
    }
  }

  function flashEffect () {
    let e = document.createElement('div')
    e.setAttribute('class', flashClass)
    document.body.appendChild(e)
    setTimeout(() => {
      document.body.removeChild(e)
    }, 100)
  }

  function getSize (e) {
    return {
      height: e.offsetHeight,
      width: e.offsetWidth
    }
  }

  function isRightSize (i) {
    let s = getSize(i)
    return s.height > minHeight && s.height < maxHeight &&
      s.width > minWidth && s.width < maxWidth
  }

  function heightFromTop (e) {
    let n = 0
    while (e) {
      n += e.offsetTop
      e = e.offsetParent
    }
    return n
  }

  function getWindowHeight () {
    let e = document.documentElement
    if (window.innerWidth) {
      return window.innerHeight
    } else if (e && !isNaN(e.clientHeight)) {
      return e.clientHeight
    }
    return 0
  }

  function getPageYOffset () {
    if (window.pageYOffset) {
      return window.pageYOffset
    }
    return Math.max(document.documentElement.scrollTop, document.body.scrollTop)
  }

  function isOnScreen (e) {
    let t = heightFromTop(e)
    return t >= yOffset && t <= windowHeight + yOffset
  }

  function addImFirstClass (e) {
    e.className += ' ' + shakeMeClass + ' ' + imFirstClass
  }

  function addShakeMeClass (e) {
    e.className += ' ' + shakeMeClass + ' ' + letClasses[Math.floor(Math.random() * letClasses.length)]
  }

  function removeAllShakeMeClasses () {
    let e = document.getElementsByClassName(shakeMeClass)
    let t = new RegExp('\\b' + shakeMeClass + '\\b')
    for (let n = 0; n < e.length;) {
      e[n].className = e[n].className.replace(t, '')
    }
  }
}