Tags : JavaScript Intro



Control Flow with If and Else Statements.

We will use control flow to capture some input from the user. Depending on the input we will display specific content.

index.html

<!DOCTYPE html>
<html>
  <head>
    <link rel="stylesheet" type="text/css" href="css/bootstrap.min.css">
    <link rel="stylesheet" type="text/css" href="css/example.css">
    <script src="scripts/jquery-1.11.3.js"></script>
    <script src="scripts/myscript.js"></script>
  </head>
  <body>
    <h1>Welcome to "Once In a Lifetime" theme park:</h1>
    <h4>We make safety our least priority.</h4>
    <div class="tall-enough">
      <h5>List of rides you can go on:</h5>
      <ul>
        <li>The Roller Coaster of Doom (waiver required).</li>
        <li>No tears left Haunted House.</li>
        <li>Out of Control Carousel</li>
      </ul>
    </div>
    <div class="exact-height">
      <h5>Let me bring my meter; We have to make sure. Are you wearing shoes to make you taller?</h5> 
    </div>  
    <div class="not-tall-enough">
      <h5>You are not tall enough for our rides. Please go wait by the water fountain.</h5> 
    </div>
  </body>  
</html>

myscript.js

$(document).ready(function(){
  var tallEnough = parseInt(prompt("What is your height in cmts. e.g 173 cmts"));

  // I will use parseInt() to make sure that we convert the user input to an integer.  Remember parseInt("90") returns 90
  // This was NOT in the video

  if(tallEnough > 100){
    $(".tall-enough").fadeIn();
  } else if(tallEnough === 100){
    $(".exact-height").fadeIn();
  } else {
    $(".not-tall-enough").fadeIn();
  }
})

CSS

.tall-enough {
  display: none;
}

.not-tall-enough {
  display: none;
}

.exact-height {
  display: none;
}

Try the following:

  • Asks users a question to create your own control flow website. Be creative.
  • If your logic is not working, make sure to use the parseInt() function to change a string to an integer.