-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy path02-multiplication-table.htm
124 lines (88 loc) · 4.13 KB
/
02-multiplication-table.htm
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
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
<!DOCTYPE html>
<html>
<head>
<title>Multiplication Table</title>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<!-- LIBRARY FILES -->
<link rel="stylesheet" type="text/css" href="basic/basic.min.css">
<script src="basic/basic.min.js" type="text/javascript" charset="utf-8"></script>
<script>
/*
ALGORITHM:
With a TextBox, the number to be processed is requested.
And when the Button is clicked; The products of the given number from 1 to 10 are listed.
PROJECT DESCRIPTION:
A step-by-step video of the project. (Language: Turkish)
https://www.youtube.com/watch?v=euFpefGUNYs
*/
// TextBox to get the number.
var txtNumber
// Create Button.
var btnCreate
// Label to list the multiplication table.
var lblTable
// First run function.
var start = function() {
// Set the background color of the page as white smoke.
page.color = "whitesmoke"
// TEXTBOX: Create a TextBox object.
txtNumber = createTextBox()
// Determine the content of the object.
txtNumber.text = "8"
// Set the title of the object.
txtNumber.title = "Enter a number:"
// Set the distance of the object to the left.
txtNumber.left = 50
// Set the distance of the object up.
txtNumber.top = 50
// Set the width of the object. (in pixels)
txtNumber.width = 130
// BUTTON: Create Button object.
btnCreate = createButton()
// Determine the text on the object.
btnCreate.text = "Create"
// Determine its location by calculating it relative to the txtNumber object.
btnCreate.left = txtNumber.left
btnCreate.top = txtNumber.top + txtNumber.height + 10
// Set the function to run when the button is clicked.
btnCreate.onClick(createTable)
// LABEL: Create Label object.
lblTable = createLabel()
// Clear the contents of the object.
lblTable.text = ""
// Let the distance to the left be 30px to the right of the txtNumber object.
lblTable.left = txtNumber.left + txtNumber.width + 30
// Let the distance to the top be the same as the txtNumber object.
lblTable.top = txtNumber.top
}
// Function that creates the multiplication table when the button is clicked.
var createTable = function() {
// Clear the inside of the tag.
lblTable.text = ""
// repeat 10 times.
for (var i = 1; i <= 10; i++) {
// Create the view of the process. Example: 1 x 7 =
var process = i + " x " + txtNumber.text + " = "
// Calculate the result of the multiplication operation.
var result = num(txtNumber.text) * i
// Note: the num(text) function,
// parameter sent as text,
// returns the converted number.
// Add the action to the tag
lblTable.text = lblTable.text + process + result + "<br>"
// Note: The word <br> is in HTM (Hyper Text Markup) language,
// used to move to a lower line.
}
}
/*
DEVELOPMENT PROPOSAL:
- Have another one of the same, to the right of the lblTable object, and
Create a second multiplication table with one more of the desired number.
*/
</script>
</head>
<body>
<!-- HTML content -->
</body>
</html>