This repository was archived by the owner on Jan 24, 2024. It is now read-only.
-
Notifications
You must be signed in to change notification settings - Fork 1
/
Copy pathtriangle_graphing.html
81 lines (81 loc) · 2.71 KB
/
triangle_graphing.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
<!--
/**
* file: triangle_graphing.html
* type: Hyper-Text-Markup-Language
* author: karbytes
* date: 10_JULY_2023
* license: PUBLIC_DOMAIN
*/
-->
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>TRIANGLE_GRAPHING</title>
<link rel="stylesheet" href="karbytes_aesthetic.css">
<script src="triangle_graphing.js"></script>
<style>
div {
border-color: #ff00ff;
border-width: 2px;
border-style: solid;
padding: 10px;
margin: 10px;
border-radius: 5px;
}
</style>
</head>
<body onload="initialize_application()">
<div>
<h1>TRIANGLE_GRAPHING</h1>
<p>Select integer values for three unique coordinate pairs which will be used to construct a triangle on a Cartesian grid.</p>
</div>
<!-- input field # 1 of 7 -->
<div>
<p>STEP_0: Select a horizontal position (i.e. x-axis value) for point A from the list below.</p>
<p id="a_x_menu_container" class="console">#a_x_menu_container</p>
</div>
<!-- input field # 2 of 7 -->
<div>
<p>STEP_1: Select a vertical position (i.e. y-axis value) for point A from the list below.</p>
<p id="a_y_menu_container" class="console">#a_y_menu_container</p>
</div>
<!-- input field # 3 of 7 -->
<div>
<p>STEP_2: Select a horizontal position (i.e. x-axis value) for point B from the list below.</p>
<p id="b_x_menu_container" class="console">#b_x_menu_container</p>
</div>
<!-- input field # 4 of 7 -->
<div>
<p>STEP_3: Select a vertical position (i.e. y-axis value) for point B from the list below.</p>
<p id="b_y_menu_container" class="console">#b_y_menu_container</p>
</div>
<!-- input field # 5 of 7 -->
<div>
<p>STEP_4: Select a horizontal position (i.e. x-axis value) for point C from the list below.</p>
<p id="c_x_menu_container" class="console">#c_x_menu_container</p>
</div>
<!-- input field # 6 of 7 -->
<div>
<p>STEP_5: Select a vertical position (i.e. y-axis value) for point C from the list below.</p>
<p id="c_y_menu_container" class="console">#c_y_menu_container</p>
</div>
<!-- input field # 7 of 7 -->
<div>
<p>STEP_6: Click the GENERATE button to validate the point values and to construct their respective triangle.</p>
<p id="generate_button_container" class="console">#generate_button_container</p>
</div>
<!-- output field # 1 of 3 -->
<div id="canvas_container">
<p>#canvas_container</p>
</div>
<!-- output field # 2 of 3 -->
<div id="output">
<p>#output</p>
</div>
<!-- output field # 3 of 3 -->
<div id="events_log" class="console" >
<p>#events_log</p>
</div>
</body>
</html>