Practice Set - Conditionals & Blocks within Braces

by Thomas Smalls

HTML

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Homework 1</title>

</head>
<body>
<h3>Conditionals &amp; Blocks within Braces</h3>


<h4>2 Tasks for this Practice Set:</h4>

<ol>
    <li>Use conditionals to create code which outputs a sentence to the console stating whether the variable <i>x</i> is greater to, equal to, or less than zero. It should work for any numeric value of x
        <br>
        <br>
        <label for="enterNumber">Enter your number here:</label>
        <input type="text" size="10" id="enterNumber">
        <div id="entNum" class="button">Enter</div>
        <div span id="comparison"></div></li>
        <br>
        <br>
    <li>Look at the code in this section, and fix it so that the output is correct. In your console, it should look like this (Hint: it involves braces) :
        <img src="http://courses.dce.harvard.edu/~cscie3/img/captains.png" title="program output" style="width:80%;padding-top:.5em;">
    </li>
</ol>



</body>
</html>

CSS

body {
  font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
  font-size: 14px;
  line-height: 1.428571429;
  color: #333;
}

.button {
  border: 1px solid #888888;
  color: #ffffff;
  font-family: Arial;
  font-size: 15px;
  font-weight: bold;
  font-style: normal;
  height: 20px;
  width: 82px;
  line-height: 20px;
  padding: .5em;
  text-align: center;
  background-color: #000C26;
}

.button:hover {
  border: 2px solid #000;
}

label {
  display: inline-block;
}

JavaScript

"use strict";

// Insert your code for #1 here
var x = 2;

var button = document.getElementById("entNum");
button.onclick = function() {
  var whatTheyEntered = document.getElementById("enterNumber").value;
  if (whatTheyEntered > 0) {
    console.log("Your number is greater than zero.");
    document.getElementById("comparison").innerHTML = "Your number is greater than zero.";

  } else if (whatTheyEntered == 0) {
    document.getElementById("comparison").innerHTML = "Your number is equal to zero.";
    console.log("Your number is equal to zero.");

  } else if (whatTheyEntered < 0) {
    document.getElementById("comparison").innerHTML = "Your number is less than zero.";
    console.log("Your number is less than zero.");

  } else {
    alert("Play by the rules, buddy! ;-)");
  }

}



// Insert your code for #2 here
var myCaptains = ["James T. Kirk", "Jean-Luc Picard", "Katherine Janeway"];

for (var i = 0; i < myCaptains.length; i++) {
  myCaptains[i] = myCaptains[i].toUpperCase();
  console.log("The Captain in Capitals is " + myCaptains[i]);
  }
  console.log(i + " captains have been capitalized");
  confirm("Check the console for the output of Problem 2.")