yups

fuck-yea-ditch-life.js

window.onload = _ => {
  pumpTheJam(randomItemList, 500)
}

const pumpTheJam = (randomItemList, initalValue) => {
  setTimeout(function() {
    const elementToRemove = placeRandomTextOnScreen(randomItemList)
    setTimeout(_ => {
      elementToRemove.remove()
      pumpTheJam(randomItemList, 500)
    }, 2000)
  }, initalValue)
}

/**
 * This is list that represents the words or images that will be displayed at random on screen.
 *
 * @type {Array}
 *
 * Items in the Array can look like any of these shapes:
 * [ 'text', 'the text you want to see on screen here' ],
 * - or -
 * [ 'img', 'http://url.to/img/here.gif' ],
 * [ 'img', 'or/relative/path.jpg' ],
 *
 * The 'text' and 'img' must be the first in the Array
 */
var randomItemList = [
  [ 'text', 'words1' ],
  [ 'text', 'words2' ],
  [ 'text', 'words3' ],
  // [ 'img', 'https://lms.wealthfit.com/staging/uploads/users/avatars/000/000/007/thumbnail/img_5-b0078950c82303131b0c04999eb27807aab73ab48d739d16acaa38076bb929cb_%281%29.png?1496454490'],
]

/**
 * This kicks off the party!
 * @param  {[Tuple of Strings]} itemList [description]
 * @return DOM Element -> to we can remove it later or... ??? :>
 */
const placeRandomTextOnScreen = itemList => {
  const randomItem = normalizeItem(getRandomItemFromList(itemList))

  let handler = null

  switch(randomItem.type) {
    case 'text':
      console.log('text!')
      handler = placeTextInView.bind(null, '#interface section ')
      break
    case 'img':
      console.log('image!')
      // doImgThing()
      break;
    default:
      alert('you should never see this!')
      // doDefaultThing()
      return
  }

  return handler(randomItem.value)
}

/**
 * Just a random number generator helper function
 */
const getRandomItemFromList = list => list[Math.floor(Math.random() * list.length)]

/**
 * Helper function to shape a tuple into a map or throw an error
 */
const normalizeItem = item => {
  let shape = null

  switch(true) {
    case item[0] === 'text':
      shape = { type: 'text', value: item[1] }
      break;
    case item[0] === 'img':
      shape = { type: 'img', value: item[1] }
      break;
    default:
      throw Error('item in list has incorrect formatting')
  }
  return shape
};

/**
 * Main function to put text on the screen. This function
 * builds the DOM element, then picks a random decorator
 * function, uses the function, and then places the text on-screen
 *
 * @param  {String} target [dom queryable string]
 * @param  {[type]} copy   [text to be displayed on the screen]
 * @return DOM element
 */
const placeTextInView = (target, copy) => {
  // create a DOM element
  const domElement = document.createElement('h3')
  domElement.innerHTML = copy

  const positionDecorators = [
    jiggleElement,
    rotateElement
  ]

  const classnameDecorators = [
    'some-class-name',
    'dontMatterReally'
  ]

  positionDecorators.forEach(decorator => decorator(domElement))
  classnameDecorators.forEach(className => domElement.classList.add(className))

  const randomSection = getRandomItemFromList(document.querySelectorAll(target))

  randomSection.appendChild(domElement)
  return domElement;
}

//
const jiggleElement = el => {
  el.style.position = 'absolute'
  el.style.top = `${getRandomValue(200)}px`
  el.style.right = `${getRandomValue(200)}px`
  el.style.bottom = `${getRandomValue(200)}px`
  el.style.left = `${getRandomValue(200)}px`
  return el
}

const rotateElement = el => {
  el.style.transform = `rotate(${getRandomValue(180)}deg)`
  return el
}

const getRandomValue = ceiling => Math.floor(Math.random() * ceiling) - ceiling