4-function (condition) start

4-function (condition) start.markdown

4-function (condition) 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");
var bkgdColor = 'white';

  //click events
  $('li').click(function() {
    //add a console.log message to tell the id of the <li> that registered the click
    //hint: use this.id
    console.log('this id is: #', this.id);
    
    resetColors();
   //change the color of the <li> that registered the click to white
    $(this).css('color', 'white');
    
    //call a custom function changeBackground and send the parameter this.id
    changeBackground(this.id);
    
    showMessage(bkgdColor);
  });

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

  function changeBackground(whichLink) {

    if (whichLink == 'yes') {
      $('body').css('backgroundColor', 'magenta');
      bkgdColor = "magenta";

    } else if (whichLink == 'no') {
      $('body').css('backgroundColor', 'orange');
      bkgdColor = "orange";

    } else if (whichLink == 'idk') {
      $('body').css('backgroundColor', 'yellow');
      bkgdColor = "yellow";
    }
  }

    function showMessage(whichMsg) {
      $('#msg').text('the background color is ' + whichMsg);
    }
 
  //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;
}