-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathindex.html
199 lines (173 loc) · 16.4 KB
/
index.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
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
<!DOCTYPE html>
<html lang="en" dir="ltr">
<head>
<title>Triangle Calculator</title>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0" />
<meta name="description" content="The triangle calculator finds all triangle measurements – side lengths, triangle angles, area, perimeter, semiperimeter, heights, medians, inradius, and circumradius.">
<link rel="preload" href="./assets/fonts/inter-v12-latin-regular.woff2" as="font" crossorigin type="font/woff2">
<link rel="preload" href="./assets/fonts/inter-v12-latin-500.woff2" as="font" crossorigin type="font/woff2">
<link rel="preload" href="./assets/fonts/inter-v12-latin-600.woff2" as="font" crossorigin type="font/woff2">
<link rel="preload" href="./assets/fonts/inter-v12-latin-800.woff2" as="font" crossorigin type="font/woff2">
<script type="text/javascript">
window._ = document.getElementById.bind(document);
window.$ = document.querySelector.bind(document);
window.$$ = document.querySelectorAll.bind(document);
window.defaultSystem = "imperial";
localStorage.setItem("theme", "light");
</script>
<link rel="stylesheet" href="./assets/css/main.min.css" />
<script src="./assets/js/all-calculators.js" defer></script>
</head>
<body style="background-color: transparent !important; min-height: 0 !important">
<div style="width: 100%;">
<div style="width:350px;float:left;padding: 15px;">
<div class="calculator-settings">
<div class="calculator-setting" id="calculator_form">
<div class="calculator-content col">
<div class="calculator-content__geometry">
<svg width="272" height="169" viewBox="0 0 272 169" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M39.4382 168.25L136 1L232.562 168.25H39.4382Z" fill="#F5F3FF" stroke="#C4B5FD"></path>
<path fill-rule="evenodd" clip-rule="evenodd" d="M226.654 157.017C222.583 159.17 219.809 163.447 219.809 168.372C219.809 168.499 219.81 168.625 219.814 168.75H220.815C220.811 168.625 220.809 168.499 220.809 168.372C220.809 163.817 223.382 159.863 227.154 157.884L226.654 157.017Z" fill="#C4B5FD"></path>
<path fill-rule="evenodd" clip-rule="evenodd" d="M52.1838 168.75C52.1874 168.625 52.1892 168.499 52.1892 168.373C52.1892 163.447 49.4152 159.17 45.3442 157.018L44.8437 157.885C48.6159 159.863 51.1892 163.818 51.1892 168.373C51.1892 168.499 51.1872 168.625 51.1833 168.75H52.1838Z" fill="#C4B5FD"></path>
<path fill-rule="evenodd" clip-rule="evenodd" d="M142.871 11.9025C140.934 13.2864 138.561 14.1006 135.999 14.1006C133.437 14.1006 131.065 13.2864 129.127 11.9025L128.625 12.7723C130.711 14.2393 133.255 15.1006 135.999 15.1006C138.744 15.1006 141.287 14.2393 143.373 12.7723L142.871 11.9025Z" fill="#C4B5FD"></path>
<path d="M62.517 159H59.8807L63.8977 147.364H67.0682L71.0795 159H68.4432L65.5284 150.023H65.4375L62.517 159ZM62.3523 154.426H68.5795V156.347H62.3523V154.426Z" fill="#7C3AED"></path>
<path d="M201.511 159V147.364H206.17C207.027 147.364 207.741 147.491 208.312 147.744C208.884 147.998 209.314 148.35 209.602 148.801C209.89 149.248 210.034 149.763 210.034 150.347C210.034 150.801 209.943 151.201 209.761 151.545C209.58 151.886 209.33 152.167 209.011 152.386C208.697 152.602 208.337 152.756 207.932 152.847V152.96C208.375 152.979 208.79 153.104 209.176 153.335C209.566 153.566 209.883 153.89 210.125 154.307C210.367 154.72 210.489 155.212 210.489 155.784C210.489 156.402 210.335 156.953 210.028 157.438C209.725 157.919 209.277 158.299 208.682 158.58C208.087 158.86 207.354 159 206.483 159H201.511ZM203.972 156.989H205.977C206.663 156.989 207.163 156.858 207.477 156.597C207.792 156.331 207.949 155.979 207.949 155.54C207.949 155.218 207.871 154.934 207.716 154.688C207.561 154.441 207.339 154.248 207.051 154.108C206.767 153.968 206.428 153.898 206.034 153.898H203.972V156.989ZM203.972 152.233H205.795C206.133 152.233 206.432 152.174 206.693 152.057C206.958 151.936 207.167 151.765 207.318 151.545C207.473 151.326 207.551 151.062 207.551 150.756C207.551 150.335 207.402 149.996 207.102 149.739C206.807 149.481 206.386 149.352 205.841 149.352H203.972V152.233Z" fill="#7C3AED"></path>
<path d="M141.778 30.4375H139.29C139.244 30.1155 139.152 29.8295 139.011 29.5795C138.871 29.3258 138.691 29.1098 138.472 28.9318C138.252 28.7538 137.998 28.6174 137.71 28.5227C137.426 28.428 137.117 28.3807 136.784 28.3807C136.182 28.3807 135.657 28.5303 135.21 28.8295C134.763 29.125 134.417 29.5568 134.17 30.125C133.924 30.6894 133.801 31.375 133.801 32.1818C133.801 33.0114 133.924 33.7083 134.17 34.2727C134.42 34.8371 134.769 35.2633 135.216 35.5511C135.663 35.839 136.18 35.983 136.767 35.983C137.097 35.983 137.402 35.9394 137.682 35.8523C137.966 35.7652 138.218 35.6383 138.438 35.4716C138.657 35.3011 138.839 35.0947 138.983 34.8523C139.131 34.6098 139.233 34.3333 139.29 34.0227L141.778 34.0341C141.714 34.5682 141.553 35.0833 141.295 35.5795C141.042 36.072 140.699 36.5133 140.267 36.9034C139.839 37.2898 139.328 37.5966 138.733 37.8239C138.142 38.0473 137.473 38.1591 136.727 38.1591C135.689 38.1591 134.761 37.9242 133.943 37.4545C133.129 36.9848 132.485 36.3049 132.011 35.4148C131.542 34.5246 131.307 33.447 131.307 32.1818C131.307 30.9129 131.545 29.8333 132.023 28.9432C132.5 28.053 133.148 27.375 133.966 26.9091C134.784 26.4394 135.705 26.2045 136.727 26.2045C137.402 26.2045 138.027 26.2992 138.602 26.4886C139.182 26.678 139.695 26.9545 140.142 27.3182C140.589 27.678 140.953 28.1193 141.233 28.642C141.517 29.1648 141.699 29.7633 141.778 30.4375Z" fill="#7C3AED"></path>
<path d="M136.228 160.136C135.614 160.136 135.086 159.991 134.643 159.702C134.2 159.412 133.859 159.013 133.62 158.504C133.381 157.996 133.262 157.415 133.262 156.761C133.262 156.097 133.384 155.51 133.629 155.001C133.876 154.49 134.219 154.091 134.66 153.804C135.103 153.514 135.62 153.369 136.211 153.369C136.671 153.369 137.086 153.455 137.455 153.625C137.825 153.795 138.127 154.034 138.363 154.341C138.599 154.648 138.745 155.006 138.802 155.415H137.796C137.719 155.116 137.549 154.852 137.285 154.622C137.023 154.389 136.671 154.273 136.228 154.273C135.836 154.273 135.492 154.375 135.197 154.58C134.904 154.781 134.675 155.067 134.511 155.436C134.349 155.803 134.268 156.233 134.268 156.727C134.268 157.233 134.347 157.673 134.506 158.048C134.668 158.423 134.896 158.714 135.188 158.922C135.484 159.129 135.83 159.233 136.228 159.233C136.489 159.233 136.727 159.188 136.94 159.097C137.153 159.006 137.333 158.875 137.481 158.705C137.629 158.534 137.734 158.33 137.796 158.091H138.802C138.745 158.477 138.604 158.825 138.38 159.135C138.158 159.442 137.864 159.686 137.498 159.868C137.134 160.047 136.711 160.136 136.228 160.136Z" fill="#7C3AED"></path>
<path d="M175.585 99.1534C175.17 99.1534 174.794 99.0753 174.456 98.919C174.118 98.7599 173.849 98.5312 173.65 98.233C173.451 97.9318 173.352 97.5682 173.352 97.142C173.352 96.767 173.426 96.4631 173.574 96.2301C173.721 95.9943 173.919 95.8097 174.166 95.6761C174.413 95.5426 174.686 95.4432 174.984 95.3778C175.285 95.3097 175.588 95.2557 175.892 95.2159C176.289 95.1648 176.612 95.1264 176.859 95.1009C177.109 95.0724 177.291 95.0256 177.404 94.9602C177.521 94.8949 177.579 94.7812 177.579 94.6193V94.5852C177.579 94.1648 177.464 93.8381 177.234 93.6051C177.007 93.3722 176.662 93.2557 176.199 93.2557C175.718 93.2557 175.342 93.3608 175.069 93.571C174.797 93.7812 174.605 94.0057 174.494 94.2443L173.539 93.9034C173.71 93.5057 173.937 93.196 174.221 92.9744C174.508 92.75 174.821 92.5937 175.159 92.5057C175.5 92.4148 175.835 92.3693 176.164 92.3693C176.375 92.3693 176.616 92.3949 176.889 92.446C177.164 92.4943 177.43 92.5952 177.686 92.7486C177.944 92.902 178.159 93.1335 178.329 93.4432C178.5 93.7528 178.585 94.1676 178.585 94.6875V99H177.579V98.1136H177.528C177.46 98.2557 177.346 98.4077 177.187 98.5696C177.028 98.7315 176.816 98.8693 176.552 98.983C176.288 99.0966 175.966 99.1534 175.585 99.1534ZM175.738 98.25C176.136 98.25 176.471 98.1719 176.744 98.0156C177.02 97.8594 177.227 97.6577 177.366 97.4105C177.508 97.1634 177.579 96.9034 177.579 96.6307V95.7102C177.537 95.7614 177.443 95.8082 177.298 95.8509C177.156 95.8906 176.991 95.9261 176.804 95.9574C176.619 95.9858 176.439 96.0114 176.262 96.0341C176.089 96.054 175.949 96.071 175.841 96.0852C175.579 96.1193 175.335 96.1747 175.108 96.2514C174.883 96.3253 174.701 96.4375 174.562 96.5881C174.426 96.7358 174.358 96.9375 174.358 97.1932C174.358 97.5426 174.487 97.8068 174.745 97.9858C175.007 98.1619 175.338 98.25 175.738 98.25Z" fill="#7C3AED"></path>
<path d="M89.5568 99V90.2727H90.5625V93.4943H90.6477C90.7216 93.3807 90.8239 93.2358 90.9545 93.0597C91.0881 92.8807 91.2784 92.7216 91.5256 92.5824C91.7756 92.4403 92.1136 92.3693 92.5398 92.3693C93.0909 92.3693 93.5767 92.5071 93.9972 92.7827C94.4176 93.0582 94.7457 93.4489 94.9815 93.9545C95.2173 94.4602 95.3352 95.0568 95.3352 95.7443C95.3352 96.4375 95.2173 97.0384 94.9815 97.5469C94.7457 98.0526 94.419 98.4446 94.0014 98.723C93.5838 98.9986 93.1023 99.1364 92.5568 99.1364C92.1364 99.1364 91.7997 99.0668 91.5469 98.9276C91.294 98.7855 91.0994 98.625 90.9631 98.446C90.8267 98.2642 90.7216 98.1136 90.6477 97.9943H90.5284V99H89.5568ZM90.5455 95.7273C90.5455 96.2216 90.6179 96.6577 90.7628 97.0355C90.9077 97.4105 91.1193 97.7045 91.3977 97.9176C91.6761 98.1278 92.017 98.233 92.4205 98.233C92.8409 98.233 93.1918 98.1222 93.473 97.9006C93.7571 97.6761 93.9702 97.375 94.1122 96.9972C94.2571 96.6165 94.3295 96.1932 94.3295 95.7273C94.3295 95.267 94.2585 94.8523 94.1165 94.483C93.9773 94.1108 93.7656 93.8168 93.4815 93.6009C93.2003 93.3821 92.8466 93.2727 92.4205 93.2727C92.0114 93.2727 91.6676 93.3764 91.3892 93.5838C91.1108 93.7884 90.9006 94.0753 90.7585 94.4446C90.6165 94.8111 90.5455 95.2386 90.5455 95.7273Z" fill="#7C3AED"></path>
</svg>
</div>
<div class="input-wrapper row">
<label class="input col triangle-calculator,area-calculator,right-triangle-calculator,pythagorean-theorem-calculator ">
<p class="input__title">A</p>
<div class="input-field row">
<input type="text" class="input-field__input" placeholder="" id="angle_a" value="" />
<span class="input-field__hint">°</span>
</div>
</label> <label class="input col triangle-calculator,area-calculator,right-triangle-calculator,pythagorean-theorem-calculator ">
<p class="input__title">B</p>
<div class="input-field row">
<input type="text" class="input-field__input" placeholder="" id="angle_b" value="" />
<span class="input-field__hint">°</span>
</div>
</label> <label class="input col triangle-calculator,area-calculator,right-triangle-calculator,pythagorean-theorem-calculator ">
<p class="input__title">C</p>
<div class="input-field row">
<input type="text" class="input-field__input" placeholder="" id="angle_c" value="" />
<span class="input-field__hint">°</span>
</div>
</label> </div>
<div class="input-wrapper row">
<label class="input col triangle-calculator,area-calculator,right-triangle-calculator,pythagorean-theorem-calculator ">
<p class="input__title">a</p>
<div class="input-field row">
<input type="text" class="input-field__input" placeholder="" id="side_a" value="5" />
</div>
</label> <label class="input col triangle-calculator,area-calculator,right-triangle-calculator,pythagorean-theorem-calculator ">
<p class="input__title">b</p>
<div class="input-field row">
<input type="text" class="input-field__input" placeholder="" id="side_b" value="5" />
</div>
</label> <label class="input col triangle-calculator,area-calculator,right-triangle-calculator,pythagorean-theorem-calculator ">
<p class="input__title">c</p>
<div class="input-field row">
<input type="text" class="input-field__input" placeholder="" id="side_c" value="5" />
</div>
</label> </div>
</div>
<div class="calculator-content calculator-content--gray calculator-content--footer calculator-content--small row " >
<button class="button button--primary ml-auto" onclick="calculate(this); animateElements();" data-action="calculate" id="action-button">Calculate</button>
</div>
<script type="text/javascript" src="./assets/js/lib/math.min.js" async></script>
<script type="text/javascript" src="./assets/js/calculator.js" defer></script>
</div>
</div>
</div>
<div style="float:left;padding: 15px; overflow: scroll;">
<div class="calculator-result calculator-result--error col" id="error-box">
<div class="row">
<svg width="20" height="20" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg">
<path fill-rule="evenodd" clip-rule="evenodd" d="M10 18C14.4183 18 18 14.4183 18 10C18 5.58172 14.4183 2 10 2C5.58172 2 2 5.58172 2 10C2 14.4183 5.58172 18 10 18ZM8.70711
7.29289C8.31658 6.90237 7.68342 6.90237 7.29289 7.29289C6.90237 7.68342 6.90237 8.31658 7.29289 8.70711L8.58579 10L7.29289 11.2929C6.90237 11.6834 6.90237 12.3166 7.29289
12.7071C7.68342 13.0976 8.31658 13.0976 8.70711 12.7071L10 11.4142L11.2929 12.7071C11.6834 13.0976 12.3166 13.0976 12.7071 12.7071C13.0976 12.3166 13.0976 11.6834 12.7071
11.2929L11.4142 10L12.7071 8.70711C13.0976 8.31658 13.0976 7.68342 12.7071 7.29289C12.3166 6.90237 11.6834 6.90237 11.2929 7.29289L10 8.58579L8.70711 7.29289Z" fill="#F87171" class="dark:fill-red-200"></path>
</svg>
<p class="calculator-error__title">There was an error with your calculation.</p>
</div>
<div class="col" id="error-list"></div>
</div> <span id="calculator_result"><div class="calculator-result col">
<div class="result-table__wrapper">
<table class="result-table">
<thead class="dark">
<tr>
<th class="dark indigo" colspan="4" id="result_type">EQUILATERAL ACUTE TRIANGLE</th>
</tr>
</thead>
<tbody class="animate">
<tr>
<th>Side a</th>
<td id="result_a">5</td>
<th>Angle A</th>
<td id="result_A">60° = 1.047198 rad</td>
</tr>
<tr>
<th>Side b</th>
<td id="result_b">5</td>
<th>Angle B</th>
<td id="result_B">60° = 1.047198 rad</td>
</tr>
<tr>
<th>Side c</th>
<td id="result_c">5</td>
<th>Angle C</th>
<td id="result_C">60° = 1.047198 rad</td>
</tr>
<tr>
<th>Area</th>
<td id="result_S">10.82532</td>
<th>Height ha</th>
<td id="result_ha">4.330127</td>
</tr>
<tr>
<th>Perimeter p</th>
<td id="result_p">15</td>
<th>Height hb</th>
<td id="result_hb">4.330127</td>
</tr>
<tr>
<th>Semiperimeter s</th>
<td id="result_s">7.5</td>
<th>Height hc</th>
<td id="result_hc">4.330127</td>
</tr>
<tr>
<th>Median ma</th>
<td id="result_ma">4.330127</td>
<th>Inradius r</th>
<td id="result_r">1.443376</td>
</tr>
<tr>
<th>Median mb</th>
<td id="result_mb">4.330127</td>
<th>Circumradius R</th>
<td id="result_R">2.886751</td>
</tr>
<tr>
<th>Median mc</th>
<td id="result_mc">4.330127</td>
<th></th>
<td></td>
</tr>
</tbody>
</table>
</div>
</div></span>
</div>
</div>
<script async src="./assets/js/lib/math.min.js"></script>
<script defer src="./assets/js/functions.js"></script>
</body>
</html>