Tanveer- Extra credit

by Tanveer Khan

HTML

<!DOCTYPE html>
<html lang="en">

  <head>
    <meta charset="UTF-8">
    <link rel="stylesheet" type="text/css" href="ec.css">
    <title>CSCI E-3 Extra Credit Assignment 1 by Tanveer Khan</title>
  </head>

  <body>
    <h1>CSCIE-3: Extra Credit Assignment by Tanveer Khan</h1>

    <h2>Multiplication table</h2>
    <p> When the user enters a valid number is the text field, it should calculate and print the table upto 10. </p>
    <input placeholder="Enter the number" type="text" name="number" id="number" />
    <br />
    <button onclick="multiplyFunction()">Calculate</button>
    <br />

    <p id="multiply"></p>
    <script type="text/javascript" src="js/ec.js"></script>
  </body>

</html>

CSS

#multiply {
  background-color: red;
}

#number {
  background-color: beige;
  border-width: .25em;
}

JavaScript

// multiplyFunction: created in the html file
function multiplyFunction() {

  // basically we can tell the students to write the following code,
  // which makes them get the DOM element from the html file
  var a = document.getElementById("number").value;
  var i = 1;
  var result = '';
  // iterating the for loop 10 times
  for (i = 1; i < 11; i++) {
    // making sure numbers are integer values
    var c = parseInt(a) * parseInt(i);
    result += a + " x " + i + " = " + c + '</br>';
  }
  document.getElementById("multiply").innerHTML = result;

}