<div class="container-fluid">
  <h1>Kanye Says</h1>
  <h3> Learn about "var flag". A boolean to help keep it real by tracking the state of our program </h3>
  
  <div class="row">
    <div class="col-sm-6">
      <ul id="demo">
    <li> Here we have 2 button elements </li>    
        <li>When the button element #1 is clicked we want Kanye to do his thing <i class='fa fa-comment fa-2x'></i>
  <button class="btn btn-default btn-success"  id="button1"onclick="button1()">Kanye on</button>
        </li>   
        <li> But Kanye can be a bit much...</li>
        <li> So when button #2 is clicked we switch him off <button class="btn btn-default btn-warning"      id="button1"onclick="button2()">Kanye off</button> because we want Kanye to just chill</> 
      </ul>
    </div> <!-- end of col-sm-6 -->
    <div class="col-sm-6">
  <img id="kanye1" src="https://media.giphy.com/media/26uflOGFZAKurnp7O/giphy.gif" class="img-responsive">
    </div> <!-- end of col-sm -6 -->
  </div> <!-- end of row -->  

    <h1>The Story so far</h1>  
    <h3>We have 2 buttons that switch Kanye "On" and "Off"</h3>
    <div class="row">
    <div class="col-sm-6">
      <ul>
        <li> Suppose we have only 1 button that switches a light on and off</li>  
        <li> This is our On/Off button <button class="btn btn-default" id="on-off"> On/Off</button></li>  
        <li> In your life the "On/Off" switch is pretty standard...
          <img src= "https://media.giphy.com/media/B26zdCF6MSPU3e3qKF/giphy.gif" id="lightbulb">
        <li><span style="font-weight:900; font-size:25px">.......But.......</span> </li>   
<li id="hint">
  <h7>On a webpage is the 1st click on a button, "On" or the 2nd click? </h7></br>
      <h7>Hint: YOU decide by using a variable that tracks the button's on/off state</h7>
        <img src="https://media.giphy.com/media/3o6ZtbPOnNTqoPupCE/giphy.gif" id="toggle-pic"></li>      
      </ul>
    </div> <!-- end of col-sm-6 -->
    <div class='col-sm-6'>
    <img src="https://media.giphy.com/media/AsshLRYV0McqL0D4uw/giphy.gif" id="lightswitch">

      </div> <!-- end of col-sm-6 -->
    </div> <!-- end of row -->
        <h1> Code your story</h1>
        <h3> function lightSwitch()</h3>
            <div class="row">
<div class="col-sm-6">
<ul> 
  <li> The plan: 
  <ol>
    <li> We have a button element that has an id of "myButton" and  onclick function = lightSwitch()
    <li> Declare function lightSwitch() that will alert "Light On" when the user clicks on the button</li>
    <li>When the user clicks on the button again [2nd time], alert "Light Off"</li>  
    <li>Also the background color of the button should be <span style="color:yellow">yellow</span> when alerted"Light on" and <span style="color:#c3eef5"> #c3eef5"</span> when alerted 'Light Off' </li>  
  </ol>
  </li>
  <li id="hint-of-life">The HINT of life</li>
  <ol>
    <li>Declare var flag and initialize it the boolean false efore the function call</li>
    <li> False correlates to the 1st click   i.e. " Light on" </li>
  </ol>
      <li> 
       <img src="https://media.giphy.com/media/3ov9jRkB7wuLh6UHcI/giphy.gif" id="note">Ps: Don't complain about how "false" should mean "Light off" and NOT "Light on". It's just a symbolic correlation OK? </li>
  <li id="coconut">OK, I give up. var flag = "coconut", means"Light On" IDC, doesn't matter!</li>
  </ul>
  </div> <!-- end of col-sm-6 -->
    <div class='col-sm-6' id="button-div">
      <h3>Your Button</h3> 
      <button class="btn btn-default" id="myButton" onclick="lightSwitch()"> </button>
      
   </div> <!-- end of col-sm-6 -->
      </div> <!-- end of row -->
  </div> <!-- end of container -->
     <footer>
      <p>Code worksheet #1. Made with <i class="fa fa-heart-o"></i> and <i class="fa fa-coffee"></i> Kauress 2018</p>
    </footer>

@import url("https://fonts.googleapis.com/css?family=Inconsolata:400,700");
body{
font-family: Inconsolata, monospace;  
   border: 3px dashed black;
}


h1{
text-transform: uppercase;
  text-align:center;  
} 
h3{
    text-align:center;
  }
img{
  width:310px;
  height:250px;
}
#on-off{
  background: linear-gradient(to right, green,yellow);
}
#lightbulb{
  width:100px;
  height:80px;
}
#lightswitch{
  height: 250px;
}
#myButton{
  width: 100px;
  height:50px;
border: 3px dotted #FFFF4D;
  background-color: #c3eef5;
}
#button-div{
  text-align:center;
}
#toggle-pic{
  width:140px;
  height: 100px;
}
#hint{
  background-color:
#ffff66
}
span{
font-weight: 900;
  text-transform:uppercase;
}
#hint-of-life{
  text-transform: uppercase;
  color: red;
  font-weight: 900;
  font-size: 20px;
  
}
#note{
  width: 100px;
  height:80px;
}
#coconut{
  color: #8A46FF;
  font-weight:900;
}
footer{
  text-align:center;
}

function button1() {
 var button = document.getElementById("button1");
 var image = document.getElementById("kanye1");
  image.src ="https://media.giphy.com/media/3o6Zt46kwr6g7Km1nq/giphy.gif";
}


function button2() {
 var button = document.getElementById("button1");
 var image = document.getElementById("kanye1");
  image.src ="https://media.giphy.com/media/26uflOGFZAKurnp7O/giphy.gif";
}

var flag = false;

function lightSwitch(){
  //alert("hi
  var button = document.getElementById("myButton");
  //alert("hi2") 
  if(flag === false) {
    button.style.backgroundColor = "yellow";
    flag = true;
     } else {
       //alert("change");
      button.style.backgroundColor = "#c3eef5";
       flag = false;
     }
}