-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy path06-counter.htm
110 lines (72 loc) · 3.43 KB
/
06-counter.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
<!DOCTYPE html>
<html>
<head>
<title>Counter</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:
- Every second, the number on the label is increased by one
and resetting it when the button (Button) is clicked.
WORKING LOGIC:
- When the button is clicked, the function that will perform the reset is activated.
- Another function that increases the number by one,
It's built into the loop() function, which is run every second.
*/
// Display number.
var lblNumber
// Reset button.
var btnIncrease
// First running function.
var start = function() {
page.color = "lightblue"
// LABEL: Create a label object. Parameters: left, top
lblNumber = createLabel(50, 50)
that.text = "0"
// Write the text centered within its own width.
that.textAlign = "center"
// Make the text size 40px.
that.fontSize = 40
// BUTTON: Create a button object. Parameters: left, top
btnIncrease = createButton(50, 120)
that.text = "Reset"
that.onClick(resetTheNumber)
// Let's make the lblNumber object compatible with btnIncrease.
// Make the text color the same as the color of the button.
lblNumber.textColor = btnIncrease.color
// Make the width of the text the same as the width of the button.
lblNumber.width = btnIncrease.width
// NOTE: In this example, to write fast code
// some short spellings are used.
// NOTE: that variable carries the last created object.
}
// Function running every second. (It is run automatically.)
var loop = function() {
// Increment the number by 1.
increaseTheNumber()
}
// Function that increases the number by 1 when the button is clicked.
var increaseTheNumber = function() {
// Sum the value in the Label object by 1 and write it back.
lblNumber.text = num(lblNumber.text) + 1
// NOTE: The .text property of the object displays the information it contains.
// Converted to automatically text data type (string).
}
// Function that makes the number 0 when the button is clicked.
var resetTheNumber = function() {
// Set the value in the Label object to "0".
lblNumber.text = "0"
}
/*
DEVELOPMENT SUGGESTIONS:
- Increasing number; in hour format, it can be displayed in minutes and seconds (00:00).
- Think, design and try to develop what else can be improved.
*/
</script>
</head>
<body></body>
</html>