Javascript Programming Demo

Tuesday, September 6, 2016

Guessing a number between 1 and 1000

<!DOCTYPE html>
<html lang="en">
<head>
<title>Guess A Number</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="../css/bootstrap.min.css">

<style>
    th, td {
      text-align: center;
    }
    /* centered columns styles */
    .row-centered {
        text-align:center;
    }

</style>
</head>
<body>

<div class="container-fluid">

    <div class="panel-group col-sm-6 col-sm-offset-3 row-centered">
    <div class = "panel panel-primary">
      <div class="panel-heading">Guess the Number</div>
      <div class="panel-body" id="formbody">
        <form class="form-horizontal" role="form">
          <div col-sm-12>
            I have a number between 1 and 1000--can you guess my number?
          </div>
          <div col-sm-12>
            Please enter your first guess.
          </div>
          <div class="form-group">
            <input type="text" id="guessNumber" placeholder="" autofocus oninput="changebgcolor()">
            <button class="btn btn-info btn-sm" id="guess" onclick="guessIt(event)">Guess It!</button>
            <button class="btn btn-info btn-sm" id="play" onclick="playAgain(event)">Play Again</button>
          </div>
        </form>
      </div>

    </div>
    <br/>
    <div class="row">
        <div class="col-sm-12" id="output"></div>
    </div>
    </div>
</div>

   <script>
      var play = document.getElementById("play");
      var input = document.getElementById("guessNumber");
      var currentColor = input.style.backgroundColor;
      var numberToGuess = generateNumberToGuess();
      play.style.visibility = "hidden";
      input.focus();

      var output = "";
      function generateNumberToGuess() {
         return Math.ceil(Math.random() * 1000);
      }

      function changebgcolor() {
          var color = ["red", "blue"];
          var colorindex = Math.floor(Math.random() * 2);
          input.style.backgroundColor = color[colorindex];
      }

      function playAgain(event) {
        numberToGuess = generateNumberToGuess();
        output = "";
        document.getElementById("output").innerHTML = output;
        input.disabled = false;
        document.getElementById("guess").disabled = false;
        document.getElementById("formbody").style.backgroundColor = "white";
        play.style.visibility = "hidden";
        input.style.backgroundColor = currentColor;
        input.value = "";
        input.focus();
        event.preventDefault();
      }

      function guessIt(event) {
        if (!/./.test(input.value)) {
          bootbox.alert("Error! Missing Entry");
          $(document).on('hidden.bs.modal','.bootbox', function () {
           $('#guessNumber').focus().select();
          });
          event.preventDefault();
          return;
        }
        else if (/\D/.test(input.value)) {
          bootbox.alert("Error! Not a number.");
          $(document).on('hidden.bs.modal','.bootbox', function () {
           $('#guessNumber').focus().select();
          });
          event.preventDefault();
          return;
        }
        guessNumber = parseInt(input.value);
        if (!(guessNumber >= 1 && guessNumber <= 1000)) {
          bootbox.alert("Error! Number should be >= 1 and <= 1000.");
          $(document).on('hidden.bs.modal','.bootbox', function () {
           $('#guessNumber').focus().select();
          });
          event.preventDefault();
          return;
        }
        if (guessNumber < numberToGuess)
           output = "<p class='bg-danger'>" + guessNumber + " - Too Low! <p/>" + output;
        else if (guessNumber > numberToGuess)
           output = "<p class='bg-info'>" + guessNumber + " - Too High! <p/>" + output;
        else {
           output = "<h4 class='alert alert-info'><strong>Congratulations! You guessed the number.</strong></h4>" + output;
           input.disabled = true;
           document.getElementById("guess").disabled = true;
           document.getElementById("formbody").style.backgroundColor = "#BFF5BF";
           play.style.visibility = "visible";

        }
        input.style.backgroundColor = currentColor;
        document.getElementById("output").innerHTML = output;
        input.select();
        event.preventDefault();
      }
   </script>
   <script src="../js/jquery.min.js"></script>
   <script src="../js/bootstrap.min.js"></script>
   <script src="../js/bootbox.min.js"></script>
</body>
</html>

Counting the number of one-letter words, two-letter words, three-letter words, etc. appearing in the text.

<!DOCTYPE html>
<html lang="en">
<head>
<title>Word Length</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="../css/bootstrap.min.css">
<script src="../js/jquery.min.js"></script>
<script src="../js/bootstrap.min.js"></script>
<script src="../js/bootbox.min.js"></script>
<style>
    th, td {
      text-align: center;
    }
</style>
</head>
<body>
<div class="container-fluid">
    <div class="panel-group col-sm-12">
    <div class = "panel panel-primary">
      <div class="panel-heading">Data Entry Form</div>
      <div class="panel-body">
        <form class="form-horizontal" role="form">
          <div class="form-group">
            <label class="control-label col-sm-1" for="text">Enter Text</label>
            <div class="col-sm-11">
              <input type="text" class="form-control" id="text" placeholder="Enter Text">
            </div>
          </div>

          <div class="form-group">
            <div class="col-sm-11 col-sm-offset-1">
              <button class="btn btn-info" id="clear" onclick="clearFields(event)">Clear</button>
              <button class="btn btn-info" id="process" onclick="getWordLengthOccurences(event)">Process</button>
            </div>
          </div>
        </form>
      </div>
    </div>
    </div>
</div>
<div class="container-fluid">
    <div class="table-responsive col-sm-3" id="result"></div>
</div>
   <script>
      /*****************************************************
        Purpose : Clears the form/output fields.
        Parameters
          Input : event object
          output : None
        Return Value   : None
        Pre-condition : None
        Post-condition : None
      *****************************************************/
      function clearFields(event) {
        document.getElementById("result").innerHTML = "";
        document.getElementById("text").value="";
        event.preventDefault();
       }

      /*****************************************************
        Purpose : Prints a table indicating the number of one-letter words, two-letter words, three-letter words, etc. appearing in the text. .
        Parameters
          Input : event object
          output : None
        Return Value   : None
        Pre-condition : None
        Post-condition : None
      *****************************************************/
        function getWordLengthOccurences(event) {
           var text = document.getElementById("text").value;
           if (!/./.test(text)) {
              bootbox.alert("Error! Missing Entry");
              $(document).on('hidden.bs.modal','.bootbox', function () {
                $('#text').focus();
              });
              event.preventDefault();
              return;
           }
           var wordArray = text.split(" ");
           var highestWordLength = wordArray[0].length;
           for (var i = 1; i < wordArray.length; i++) {
              if (highestWordLength < wordArray[i].length)
                highestWordLength = wordArray[i].length;
           }
           var wordLengthCounter = new Array(highestWordLength + 1);
           wordLengthCounter.fill(0);
           for (var i = 0; i < wordArray.length; i++) {
              wordLengthCounter[wordArray[i].length]++;
           }
           var output = "<table class='table table-bordered'>";
           output += "<tr>";
           output += "<th>Word Length</th>";
           output += "<th>Occurrences</th>";
           output += "</tr>";

           for (var i = 1; i <= highestWordLength; i++) {
              output += "<tr>";
              output += "<td>" + i + "</td>";
              output += "<td>" + wordLengthCounter[i] + "</td>";
              output += "</tr>";
           }
           output += "</table>";
           document.getElementById("result").innerHTML = output;
           event.preventDefault();
        }

   </script>
   <script src="../js/jquery.min.js"></script>
   <script src="../js/bootstrap.min.js"></script>
   <script src="../js/bootbox.min.js"></script>
</body>
</html>