// Change group of elements' bg color between 2 colors
function changeColor(el, color1, color2) {
  
  // Loop through elements
  for (var x = 0; x < el.length; x++) {
    // Output element's bg color before change
    output('Before:');
  	output('    > ' + "$('element')[" + x + '].backgroundColor: ' + getComputedStyle(el[x], null).backgroundColor);
    // Element bg color matches first color param
    if (getComputedStyle(el[x], null).backgroundColor === color1) {
      // Change bg color to second color param
      el[x].style.backgroundColor = color2;
    // Element bg color does NOT match first color param
    } else {
      // Change color to first color param
      el[x].style.backgroundColor = color1;
    }
    // Output element's bg color after change
    output('After:');
  	output('    > ' + "$('element')[" + x + '].backgroundColor: ' + getComputedStyle(el[x], null).backgroundColor + '<br>');

  }
}

// Output data text to the screen
function output(str) {
  el = $('.feedback > .output');
  txt = el.html();
	el.html(txt + str + '<br>');
  // scroll to bottom to display latest results
  el[0].scrollTop = el[0].scrollHeight;
}

// Handler for button click
$('button').on('click', function(e) {
  // We don't want the button to do anything other than what we tell it to
  e.preventDefault();
  // Change elements' bg color
  // rgb(35, 163, 211) = blue
  // rgb(255, 99, 71) = orange
  changeColor($('.element'), 'rgb(35, 163, 211)', 'rgb(255, 99, 71)');
});