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() {
    //call a custom function to reset all colors
    resetColors();
    $('#yes').css('color', 'white');
    $('body').css('background-color', 'magenta');
    
    //call a custom function 'showMessage' and send a parameter
    //with the string 'the background color is magenta'

  });

  $('#no').click(function() {
    resetColors();
    $('#no').css('color', 'white');
    $('body').css('backgroundColor', 'orange');

    //call a custom function 'showMessage' and send a parameter
    //with the string 'the background color is orange'

  });

  $('#idk').click(function() {
    resetColors();
    $('#idk').css('color', 'white');
    $('body').css('backgroundColor', 'yellow');

    //call a custom function 'showMessage' and send a parameter
    //with the string 'the background color is yellow'
  });

  //define resetColors
  function resetColors() {
    console.log('resetting colors');
    $('#yes', '#no', '#idk').css('color', '#555');
  }

  //define showMessage so that it accepts an argument called whichMsg

  
  //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>