Cacher is the code snippet organizer for pro developers

* {
  margin: 0px;
  padding: 0px;
}

body {
  background-color: #333;
  color: #555;
  font-family: Helvetica;
  font-weight: bold;
  font-size: 72px;
}

nav ul {
  margin: 50px;
}

nav ul li {
  display: inline-block;
  list-style-type: none;
  margin: 5px 15px;
}

p#msg {
  margin: 50px 65px;
  color: white;
  text-transform: uppercase;
}

<script src="//cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>

$(function() {

  //send a message to the console window to check 
  //if this page is beting read
  console.log("ready");

  //click events
  $('#yes').click(function() {
    $('#no').css('color', '#555');
    $('#idk').css('color', '#555');
    $('#yes').css('color', 'white');
    $('body').css('background-color', 'magenta');
    $('#msg').text('the background is magenta');
  });

  $('#no').click(function() {
    //change #yes and #idk color to #555
    //change #no color to white
    //change the body backgroundColor to orange
    //change the text in #msg to 'the background is orange'
  });

  $('#idk').click(function() {
    //change #yes and #no color to #555//change #idk color to white
    //change the body backgroundColor to yellow
    //change the text in #msg to 'the background is yellow'
  });

  //close jQuery
});

<nav>
  <ul>
    <li id='yes'>YES</li>
    <li id='no'>NO</li>
    <li id='idk'>IDK</li>
  </ul>
</nav>

<section>
  <p id="msg"></p>
</section>