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 and second table will have two table rows of and one table row ofYou can also use \n in JavaScript instead of
for line break in output.
If you have any queries, you can email at [email protected].
Sample design:
Sample output:
Sample alert message:
-
@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 and second table will have two table rows of and one table row of -
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>
-