Change background-color depending on the screen width

This script is based on the screen width and changing the background color of the page when the window width change.

by scurrilus

HTML

<link rel="stylesheet" href="http://scurrilus.de/scurrilus-jsfiddle/scurrilus-copyright.css">
<script src="http://scurrilus.de/scurrilus-jsfiddle/scurrilus-copyright.js"></script>
<!--powered by SCURRILUS-->
<div id="scurrilusCopy"></div>
<script>scurrilusCopy();</script>
<!--ende powered by SCURRILUS-->

<div class="code">
    <div class="colorOutput"></div>
</div>

<script>
    $(document).ready(function() {
     <!-- Call function first -->
     colorChange();
     
     <!-- Eventlistener get width of window and call function colorChange(); -->
        window.addEventListener("resize", function() {
        colorChange();
        } , true);
    
    });
</script>

CSS

.colorOutput {
    width: 100%;
    background: #ffffff;
    text-align: center;
    font-size: 30px;
    padding: 10px;
    border-radius: 10px;
    box-sizing: border-box;
}

JavaScript

function colorChange() {
  var width = (window.innerWidth > 0) ? window.innerWidth : screen.width;
  // In order to obtain a wider range of our color, we must multiply the wide.
  // Remember there is a limit at which no valid hexadecimal numbers are generated.
  var widthMulti = width*9000;
  // console.log(widthMulti);
    
  // convert the width to hexadezimal 
  var hexa = widthMulti.toString(16);
  hexa = "000000".substr(0, 6 - hexa.length) + hexa;
  console.log(hexa);
    
  // generate stylesheet
  $('body').css('background', '#'+hexa);
  $('.colorOutput').css('color', '#'+hexa);
  $('.colorOutput').text('#'+hexa);
}