2-function (named) start

2-function (named) start.markdown

2-function (named) start

Forked from glenda drew's Pen target practice complete.

A Pen by Spencer Mathews on CodePen.

License.

index.html

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

script.js

$(function() {

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

  //click events
  $('#yes').click(function() {
    //call a custom function 'resetColors' to reset all colors
    resetColors();

    $('#yes').css('color', 'white');
    $('body').css('background-color', 'magenta');
    $('#msg').text('the background is magenta');
  });

  $('#no').click(function() {
    //call a custom function 'resetColors' to reset all colors
    resetColors();

    $('#no').css('color', 'white');
    $('body').css('backgroundColor', 'orange');
    $('#msg').text('the background is orange');
  });

  $('#idk').click(function() {
    //call a custom function 'resetColors' to reset all colors
    resetColors();

    $('#idk').css('color', 'white');
    $('body').css('backgroundColor', 'yellow');
    $('#msg').text('the background is yellow');
  });

  //define resetColors
  function resetColors() {
    console.log('resetting colors');
    //use a group selector to reset #yes, #no, #idk in one statement
    $('#yes, #no, #idk').css('color', '#555');
  }
  //close jQuery
});

scripts

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

style.css

* {
  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;
}