-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathDeltaWebDev_Task2.html
112 lines (91 loc) · 2.23 KB
/
DeltaWebDev_Task2.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
103
104
105
106
107
108
109
110
111
112
<!DOCTYPE html>
<html>
<head>
<script type="text/javascript">
function show() { document.getElementById('area').style.display = 'inline-block';
document.getElementById('submit').style.display = 'inline-block';}
function hide() { document.getElementById('area').style.display = 'none';
document.getElementById('submit').style.display = 'none';}
</script>
<style>
canvas {
border-bottom: 1px solid black;
border-left: 1px solid black;
}
</style>
</head>
<body>
<button onclick="show();">Click to add bar</button>
<input type="text" id="area" style="display: none;" size="16" placeholder=" Enter value below 500"></input>
<input type="submit" style="display: none;" value="Submit" onclick="bar()" id="submit">
<button onclick="sort();">Sort bars in ascending order</button>
<br><br>
<canvas id="myCanvas" width="1300" height="500" />
<script>
var j=0;
var a=0;
var scores = [-1, -1, -1, -1, -1, -1, -1, -1, -1, -1, -1, -1, -1, -1, -1, -1, -1, -1, -1, -1, -1];
function myfunction() {
clear();
var canvas = document.getElementById('myCanvas');
var ctx = canvas.getContext('2d');
var width = 30;
var currX = 40;
var base = 500;
for(var i=0;i<scores.length;i++){
if(scores[i]>-1) {
var h = scores[i];
ctx.fillStyle='#6CA6CD';
ctx.fillRect(currX, canvas.height - h, width, h);
ctx.strokeRect(currX, canvas.height - h, width, h+1);
ctx.font = "12px";
ctx.fillStyle="black";
if (scores[i]>19)
{ctx.strokeStyle="black";
ctx.fillText(scores[i], currX + 6, canvas.height + 15 - h);}
if (scores[i]<20&&scores[i]>=0)
{ctx.strokeStyle="black";
ctx.fillText(scores[i], currX + 6, canvas.height -5 - h);}
currX += width + 30; }
}
}
</script>
<script>
function bar() {
scores[j] = document.getElementById('area').value;
j += 1;
myfunction();
hide();
}
</script>
<script>
function sort() {
clear();
scores.sort(function(x, y){return x-y});
organize();
myfunction();
}
</script>
<script>
function clear() {
var canvas = document.getElementById('myCanvas');
var ctx = canvas.getContext('2d');
ctx.fillStyle="white";
ctx.fillRect(10, 0, 1300, 500);
}
</script>
<script>
function organize() {
a = 0;
for(i=0;i<scores.length;i++) {
if(scores[i]>-1) {
scores[a]=scores[i];
scores[i] = -1;
a += 1;
}
j=a;
}
}
</script>
</body>
</html>