title: How to get a random background from a list
body: <p>I created this code 3 different ways.</p>
  <p>Are any of these the preferred way in how the code should be written?</p>
  <p>Are any of these good?</p>
  <p>Maybe one of these could be modified or adjusted.</p>
  <p>I was told different things on how the code should be made.</p>
  <p>How it works is, after a page is loaded, only 1 background is selected from a group of backgrounds.</p>
  <p>Clicking <strong>Run Code snippet</strong> produces a new background image.</p>
  <p>Which is the way of how this type, or kind of code should be written?</p>
  <p><strong>Code 1</strong> <a href="https://jsfiddle.net/0hcgkurm/" rel="nofollow noreferrer">https://jsfiddle.net/0hcgkurm/</a></p>
  <p>I was just told:</p>
  <blockquote>
  <p>Where possible keep the CSS out of the JS.</p>
  </blockquote>
  <blockquote>
  <p>Don't do this unless there is no choice.</p>
  </blockquote>
  <p>Keeping the CSS out of the javascript, how would this be written differently, if it is able to be?</p>
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-js lang-js prettyprint-override"><code>(function randomBackground() {
  
    const linearGradients = [
      "linear-gradient(to right, #c6ffdd, #fbd786, #f7797d)",
      "linear-gradient(to right, #6a3093, #a044ff)",
      "linear-gradient(to right, #a8ff78, #78ffd6)",
      "linear-gradient(to right, #6d6027, #d3cbb8)",
      "linear-gradient(to right, #4da0b0, #d39d38)",
      "linear-gradient(to right, #74ebd5, #acb6e5)",
      "linear-gradient(to right, #12c2e9, #c471ed, #f64f59)",
      "linear-gradient(to right, #4b79a1, #283e51)",
      "linear-gradient(to right, #0099f7, #f11712)"
    ];
  
    const randomColor =
      linearGradients[Math.floor(Math.random() * linearGradients.length)];
    document.querySelector("body").style.setProperty("--bg-color", randomColor);
  }());</code></pre>
  <pre class="snippet-code-css lang-css prettyprint-override"><code>:root {
    --bg-color: linear-gradient();
  }
  
  body {
    background: var(--bg-color, white);
    background-repeat: no-repeat;
    min-height: 100vh;
    overflow: hidden;
  }</code></pre>
  </div>
  </div>
  </p>
  <p><strong>Code 2</strong> <a href="https://jsfiddle.net/f7qopgwL/" rel="nofollow noreferrer">https://jsfiddle.net/f7qopgwL/</a></p>
  <p>Keeping the CSS out of the javascript, how would this be written differently, fixed, or modified?</p>
  <p>Do you see anything that can be adjusted in it?</p>
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-js lang-js prettyprint-override"><code>(function randomBackground() {
    const varNames = [
      "color-a",
      "color-b",
      "color-c"
    ];
  
    const random = Math.floor(Math.random() * varNames.length);
    document.body.style.backgroundImage = 'var(--' + varNames[random] + ')';
  }());</code></pre>
  <pre class="snippet-code-css lang-css prettyprint-override"><code>:root {
    --color-a: linear-gradient(120deg, #155799, #159957);
    --color-b: linear-gradient(0deg, #522db8 0%, #1c7ce0 100%);
    --color-c: linear-gradient(45deg, #102eff, #d2379b);
  }
  
  html,
  body {
    height: 100%;
    margin: 0;
    padding: 0;
  }
  
  body {
    background-repeat: no-repeat;
  }</code></pre>
  </div>
  </div>
  </p>
  <p><strong>Code 3</strong> <a href="https://jsfiddle.net/r9bygt3d/" rel="nofollow noreferrer">https://jsfiddle.net/r9bygt3d/</a></p>
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-js lang-js prettyprint-override"><code>(function randomBackground() {
    const classNames = [
      "bg1",
      "bg2",
      "bg3",
      "bg4",
      "bg5",
      "bg6",
      "bg7",
      "bg8",
      "bg9",
      "bg10"
    ];
  
    const random = Math.floor(Math.random() * classNames.length);
    document.querySelector("body").classList.add(classNames[random]);
  }());</code></pre>
  <pre class="snippet-code-css lang-css prettyprint-override"><code>.bg1 {
    --color: linear-gradient(76.9deg, #e8bbf2, #8787fd 51.66%, #84caff 109.18%);
  }
  
  .bg2 {
    --color: linear-gradient(45deg, #102eff, #d2379b);
  }
  
  .bg3 {
    --color: radial-gradient(60% 60% at 50% 50%, rgb(40, 0, 115), rgb(0, 0, 0));
  }
  
  .bg4 {
    --color: radial-gradient(rgba(80, 0, 0, 0.1) 0%, rgba(80, 0, 0, 0.2) 30%, rgba(21, 11, 1, 0.9) 100%), linear-gradient(to right, #02111d, #037bb5, #02111d);
  }
  
  .bg5 {
    --color: radial-gradient(rgba(80, 0, 0, 0.1) 0%, rgba(80, 0, 0, 0.2) 30%, rgba(21, 11, 1, 0.9) 100%), linear-gradient(to right, #02111d, #037bb5, #02111d);
  
  }
  
  .bg6 {
    --color: radial-gradient(circle at 5% 13%, #0b7bd2, #3d41b4 40%, #591fa4 101%);
  }
  
  .bg7 {
    --color: linear-gradient(95deg, #67115e, #2d0546 31%, #160322);
  }
  
  .bg8 {
    --color: linear-gradient(darkviolet, navy);
  }
  
  .bg9 {
    --color: linear-gradient(120deg, rgba(255, 125, 255, 0.7), rgba(125, 85, 255, 0.7) 70%);
  }
  
  .bg10 {
    --color: linear-gradient(90deg, #10069F, #9932CC);
  }
  
  html,
  body {
    height: 100%;
    margin: 0;
    padding: 0;
  }
  
  body {
    background-image: var(--color);
    background-repeat: no-repeat;
  }</code></pre>
  </div>
  </div>
  </p>