-
Notifications
You must be signed in to change notification settings - Fork 0
/
dynamicTableExt.html
102 lines (102 loc) · 5.25 KB
/
dynamicTableExt.html
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
<!DOCTYPE html>
<!-- Name: Rotana Nou -->
<!-- Assignemnt7 Interactive Dynamic Table extension -->
<!-- Date: 11/14/16 -->
<!-- email: Rotana_Nou@student.uml.edu -->
<!-- Description: This is the html file of assignment 6.-->
<!-- For this file it is basically -->
<!-- construct the sturture of Interactive Dynamic table. It contains the form to promt-->
<!-- the user for input to do the multiplication across the row and colums that implemented -->
<!-- with javaScript -->
<!-- Reference: w3school.com and bootstrap.com -->
<html lang ="en">
<head>
<meta charset="utf-8">
<!-- set title of the page -->
<title>Rotana's Dynamic table</title>
<!-- link to css file -->
<link rel="stylesheet" type="text/css" href="css07/dynamicTableExt.css">
<!-- control layout points of view for all devices browsers -->
<meta name="viewpoint" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">
</head>
<body>
<!-- everything goes in here -->
<div class="wrapper">
<!-- row of the div -->
<div class="divRow">
<div class="col-sm-8">
<!-- page header -->
<h1 class="header"> Interactive Dynamics Table </h1>
</div>
</div>
<div class="divRow">
<div class="col-sm-8">
<!-- set the instruction paragraph-->
<div class="paragraph">
<p>Welcome to Interactive Dynamics Table. Dynamics table allows you to do the multiplication.<br/>
Inorder to do the multiplication. You must enter the appropriate number(s) for starting<br/>
vertical, ending vertical, starting horizontal and ending horizontal.<br/>
Please fill the following to perform the multiplication from <em>-25 to 25.</em>
</p>
</div>
</div>
</div>
<br>
<!-- div row for creating the form for user input-->
<!--reference: http://www.w3schools.com/TAGs/tag_label.asp -->
<div class="divRow">
<div class="col-sm-8">
<div class="form">
<form id="form_table" name="form_table" method="get">
<!-- horizontal starting field -->
<div>
<label>Horizontal Start:</label>
<input type="number" name="start_hor" id="start_hor" value"" required>
</div>
<!-- horizontal ending field -->
<div>
<label>Horizontal End:</label>
<input type="number" name="end_hor" id="end_hor" value"" required>
</div>
<!-- vertical starting field -->
<div>
<label>Vertical Start:</label>
<input type="number" name="start_ver" id="start_ver" value"" required>
</div>
<!-- vertical ending field -->
<div>
<label>Vertical End:</label>
<input type="number" name="end_ver" id="end_ver" value"" required>
</div>
<!-- proceding button -->
<input type="submit" id="but_sub" class="submit_button" value="Process">
</form>
</div>
</div>
</div>
<br>
<!-- Guid to see result of mul table. -->
<div id="table_dir">
<p>After entering all the fields above. See result below.</p>
</div><br>
<!-- In this div is for the display table -->
<div id="mul_table"></div><br>
</div>
<script type='text/javascript' src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<!-- latest modified for css -->
<script type='text/javascript' src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/js/bootstrap.min.js"></script>
<!-- Latest compiled and minified JavaScript -->
<script type='text/javascript' src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script>
<!-- jQuery Validation -->
<script type='text/javascript' src="https://cdn.jsdelivr.net/jquery.validation/1.14.0/jquery.validate.js"></script>
<script type='text/javascript' src="https://cdn.jsdelivr.net/jquery.validation/1.14.0/additional-methods.js"></script>
<!-- link connected to javaScript file -->
<script type='text/javascript' src="js07/dynamicTableExt.js"></script>
<!-- call checkValidation function when ready-->
<script>
$(document).ready(function(){
checkValidation(); //load checkValidation function
});
</script>
</body>
</html>