5-function (switch)

5-function (switch).markdown

5-function (switch)

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 beting read
  console.log("ready");

  var bkgdColor = 'white';

  //click events
  $('li').click(function() {
    console.log(this.id);
    resetColors();
    $(this).css('color', 'white');
    changeBackground(this.id);
    showMessage(bkgdColor);
  });

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

  function changeBackground(whichLink) {

    switch (whichLink) {
      case 'yes':
        bkgdColor = "magenta";
        break;

      case 'no':
        bkgdColor = "orange";
        break;

      case 'idk':
        bkgdColor = "yellow";
        break;
    }
    $('body').css('backgroundColor', bkgdColor);
  }

  function showMessage(whichColor) {
    $('#msg').text('the background color is ' + whichColor);
  }

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