Random Gradients

by MegaScience

HTML

<table style="width:100%">
  <tr>
    <td>Jill</td>
    <td>Smith</td>
    <td>50</td>
  </tr>
  <tr>
    <td>Eve</td>
    <td>Jackson</td>
    <td>94</td>
  </tr>
  <tr>
    <td>One</td>
    <td>More</td>
    <td>69</td>
  </tr>
</table>

CSS

html,
body,
table {
  height: 100%;
}

body {
  margin: 0;
}

table {
  height: 100%;
  width: 100%;
  box-sizing: border-box;
  table-layout: fixed;
}

td {
  text-align: center;
}


/*
  flex-grow: 1;
  flex-shrink: 0;
    line-height: calc(100vh / 3);
    height: calc(100% / 3);
    min-width: calc(100vh / 3);
*/

JavaScript

const colorRandomizer = {
    data: {
      allElements: document.body.getElementsByTagName('*')
    },
    init: function() {
      clearTimeout(this.data.cycleScript)
      this.data.gradientPrefix = this.getCssValuePrefix('backgroundImage', 'linear-gradient(left, #fff, #fff)')
      this.data.colors = [null, this.getRandomColor()]
      //this.data.cycleScript = setInterval(this.randomization, 150);
      this.next()
    },
    next: function() {
      this.data.cycleScript = setTimeout(this.randomization.bind(this), 150)
    },
    randomization: function() {
      try {
        document.body.backgroundImage = this.gradientString()
        for (let elem of this.data.allElements) elem.style.backgroundImage = this.gradientString()
        this.next()
      } catch (e) {
        console.error(e.message)
        clearTimeout(this.data.cycleScript)
      }
    },
    gradientString: function() {
      this.data.colors[0] = this.data.colors[1]
      this.data.colors[1] = this.getRandomColor()
      return `${this.data.gradientPrefix}linear-gradient(${Math.floor(Math.random() * 359)}deg, ${this.data.colors[0]} 0%, ${this.data.colors[1]} 100%)`
    },
    getCssValuePrefix: (name, value) => {
      // Create a temporary DOM object for testing
      const dom = document.createElement('div')
      for (const prefix of ['', '-moz-', '-webkit-', '-o-', '-ms-']) {
        // Attempt to set the style
        dom.style[name] = prefix + value
        // Detect if the style was successfully set
        if (dom.style[name]) {
          dom.remove()
          return prefix
        }
        dom.style[name] = '' // Reset the style
      }
      dom.remove()
      alert('Random Colors: Escaped prefix check without assigning.')
    },
    // https://stackoverflow.com/a/5092872/5857393
    getRandomColor: () => '#' + Array.from(Array(6), () => (~~(Math.random() * 16)).toString(16)).join('')
  }
  
  colorRandomizer.init()