CS101 Assignment 3 Solution and Discussion Fall-2019

Objectives:

After solving this assignment, students will learn about,

Interaction of JavaScript with HTML.
Handling of JavaScript functions, loops, decision structure & event handling.
Instructions: Read the following instructions carefully before submitting the assignment.

It should be clear that your assignment will not get any credit if:

§ The assignment is submitted through email or after due date.

§ The assignment is not in the .html format.

§ The submitted assignment does not open or file is corrupt.

§ Assignment is copied(partial or full) from any source (websites, forums, students, etc)

§ Assignment is in any other format like images, PDF, “.txt”, “.doc”, Zip, rar etc.

Question: You are required to make a table generator webpage.

Requirements:

The title of the web page should be your VU-ID.
Table Generator should get the table number and table length from user and generates table of that number up to the provided length with generate button.
It should also count even and odd values in the output & displays these counts in their respective fields.
If user inputs value less than 1 it should not generate table but display an alert message with “Invalid Input”
If user enters a float number then it should ignore decimal part in calculation.
You have to make two tables with border. First table will have two table rows of <input> and second table will have two table rows of <input> and one table row of <textarea>.
Your output should be displayed inside <textarea> of 38 columns, 20 rows and colspan 2.
Heading, tables and button should be aligned to center.
You are required to make same design and format of output as given in below sample.
However you can choose color scheme of your own choice (other than white) but the background color of your webpage and table should be different.
Note:

You can also use \n in JavaScript instead of <br> for line break in output.
If you have any queries, you can email at [email protected].
Sample design:
9949e237-385c-4bfb-8272-2c24a5e83896-image.png
Sample output:
f4fbb6c0-aef4-49ff-bd83-2ede2847faad-image.png
Sample alert message:
32170d57-2bd8-43be-adc8-40daa4f2a251-image.png

Solution Ideas Code:

function myFunction()
{

var Number = document.getElementById("TN").value;
var T;
var I = document.getElementById("IN").value;
var E = document.getElementById("EN").value;
var temp="";
for (T = I; T <= E; T++) {
temp+="<tr><td>"+Number+"</td><td>*</td><td>" + T + "</td><td>=</td><td>" + Number*T +"</td></tr>"; 
}

$("#displayTables").append(temp);

}

<!DOCTYPE html>
<html>
<head>
  <title>Multiplication Table</title>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css">
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js"></script>
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js"></script>
</head>
<body>

<h2>MultiplicationTable</h2

<form action>
Table Number:<br>
<input type="text" id="TN" name="TableNumber">
<br>
Initial Number:<br>
<input type="text" id="IN" name="InitialNumber">
<br>
Ending Number:<br>
<input type="text" id="EN" name="EndingNumber">
</form>

<br><br>    
   

<button onclick="myFunction()">Print Table</button>
<table class="table table-bordered"  id="displayTables">

</table>
 

@zareen said in CS101 Assignment 3 Solution and Discussion Fall-2019:

The title of the web page should be your VU-ID.
Table Generator should get the table number and table length from user and generates table of that number up to the provided length with generate button.
It should also count even and odd values in the output & displays these counts in their respective fields.
If user inputs value less than 1 it should not generate table but display an alert message with “Invalid Input”
If user enters a float number then it should ignore decimal part in calculation.
You have to make two tables with border. First table will have two table rows of <input> and second table will have two table rows of <input> and one table row of <textarea>.
Your output should be displayed inside <textarea> of 38 columns, 20 rows and colspan 2.
Heading, tables and button should be aligned to center.
You are required to make same design and format of output as given in below sample.
However you can choose color scheme of your own choice (other than white) but the background color of your webpage and table should be different.