Challenge 12

jQuery and the DOM

by Jaron Mauk

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.0.0-beta1/jquery.min.js"></script>
<!DOCTYPE html>

<body>
  <div>
    <ul>
      <button>Click here to invert color schemes</button>
    </ul>
  </div>

  <div>
    <li> This is first in a list</li>
    <li>This is second in a list</li>
    <li>This is third in a list</li>
    <li>This is forth in a list</li>
  </div>
</body>

CSS

button {
  border: none;
  border-radius: 10px;
  font-size: 20px;
  padding: 10px;
  cursor: pointer;
}

li {
  text-decoration: none;
  display: block;
  font-family: "HelveticaNeue-Light", "Helvetica Neue Light", "Helvetica Neue", Helvetica, Arial, "Lucia Grande", sans-serif;
  margin: 20px;
  padding: 10px;
  text-align: center;
}

JavaScript

$(document).ready(function() {
  function invertColor(hexTripletColor) {
    var color = hexTripletColor;
    color = color.substring(1); // remove #
    color = parseInt(color, 16); // convert to integer
    color = 0xFFFFFF ^ color; // invert three bytes
    color = color.toString(16); // convert to hex
    color = ("000000" + color).slice(-6); // pad with leading zeros
    color = "#" + color; // prepend #return color;
  }

  // assign a random background color to div

  // get color of background
  // var invertedColor = invertColor(bgColor)
  // make font color of the div equal to invertedColor


  function getRandomcolor(min 0, max 15) {
    return Math.floor(Math.random() * (max - min + 1)) + min;
  }
  var hexcolors = ['a', 'b', 'c', 'd', 'e', 'f', '0', '1', '2', '3', '4', '5', '6', '7', '8', '9'];

  var colorString = "#" + hexcolors[Math.floor(Math.random() * hexcolors.length)];


  $('button').on('click', function() {

      //function UpdateColors() {
        $('div').each(function(index) {
         // var color = colors[Math.floor(Math.random() * colors.length)];
          //var invertedColor = invertColor(color);
          $(this).css({
            "background-color": "colorString",
            "color": "invertedColor";
          });

        });
      }
		});
  
});

//not sure where to go from here. I have hit a wall and am not sure what to do exacly.