-
Notifications
You must be signed in to change notification settings - Fork 0
/
acceleration.html
182 lines (179 loc) · 10.2 KB
/
acceleration.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
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Acceleration</title>
<link rel="icon" href="favicon.ico" type="image/x-icon">
<link rel="stylesheet" href="assets/css/bootstrap.css">
<link rel="stylesheet" href="assets/css/style.css" type="text/css">
<link rel="stylesheet" href="assets/css/fontawesome.css">
<link rel="stylesheet" href="assets/fontawesome/css/brands.css">
<link rel="stylesheet" href="assets/fontawesome/css/solid.css">
</head>
<body class="bg-pcode">
<header>
<div class="header"></div>
</header>
<section class="container">
<div class="jumbotron jumbotron-fluid mt-1 mb-1 shadow p-3 jumbo-bg">
<div class="container">
<h1 class="display-4 text-center text-wrap">Uniform Acceleration Calculator</h1>
<p class="lead">Calculate the acceleration an object that is moving with uniform acceleration. You can calculate acceleration, the change in velocity and time.
</p>
<p>Start by adding two of the known variables to calculate the third.</p>
</div>
</div>
</section>
<section class="container border border-primary bg_cont">
<form name="acceleration_calc" id="acceleration_calc">
<!-- Acceleration Card -->
<div class="row d-flex justify-content-center">
<div class="card shadow-sm p-3 mt-1 mb-1" style="width: 18rem;">
<i class="fa-solid fa-forward fa-10x rounded mx-auto d-block mt-1 shadow-sm p-3"></i>
<div class="card-body">
<h4 class="text-center mb-n4">Acceleration (a)
<a tabindex="0" class="btn btn-link class" role="button" data-toggle="popover" data-trigger="focus" title="Acceleration (ms<sup>-2</sup>" data-content="Leave blank or enter the acceleration of the object. This is only in SI units!">
<i class="far fa-question-circle fa"></i>
</a>
</h4>
<p class="card-text"></p>
<label for="inputAcceleration">Acceleration (a)</label><br>
<input type="number" name="inputAcceleration" id="inputAcceleration" class="reset_form checkAcceleration" value="" min="0.0001" step="0.0001" autocomplete="off" aria-label="input value for acceleration in metres per second squared.">
<br>
<label for="aUnits">Units</label>
<br>
<select name="aUnits" id="aUnits" style="width:67px;">
<option value="mss" selected>ms⁻²</option>
</select>
</div>
</div>
<!-- Velocity Card -->
<div class="card shadow-sm p-3 mt-1 mb-1" style="width: 18rem;">
<i class="fa-solid fa-gauge-high fa-10x rounded mx-auto d-block mt-1 shadow-sm p-3"></i>
<div class="card-body">
<h4 class="text-center pb-1">ΔVelocity (Δv)
<a tabindex="0" class="btn btn-link" role="button" data-toggle="popover" data-trigger="focus" title="ΔVelocity (<em>final<sub>v</sub> -
initial<sub>v</sub></em>)<br>(ms<sup>-1</sup>, kmh<sup>-1</sup>, mph or
fts<sup>-1</sup>)" data-content="Leave blank or enter the change in velocity (Δv)
(<em>final<sub>v</sub> -
initial<sub>v</sub></em>) for the object. Don't forget to check the units!">
<i class="far fa-question-circle fa"></i>
</a>
</h4>
<p class="card-text"></p>
<label for="inputVelocity">ΔVelocity (Δv)</label><br>
<input type="number" name="inputVelocity" id="inputVelocity" class="reset_form checkVelocity" value="" min="0.01" max="299792458" step="0.01" autocomplete="off" aria-label="input value for the change in velocity in metres per second, kilometers per hour, miles per hour or feet per second.">
<br>
<label for="units">Units</label>
<br>
<select name="units" id="units" style="width:67px;">
<option value="kmh">kmh⁻¹</option>
<option value="ms" selected>ms⁻¹</option>
<option value="mph">mph</option>
<option value="fts">fts⁻¹</option>
</select>
</div>
</div>
<!-- Time Card -->
<div class="card shadow-sm p-3 mt-1 mb-1" style="width: 18rem;">
<i class="fa-solid fa-stopwatch fa-10x rounded mx-auto d-block mt-1 shadow-sm p-3"></i>
<div class="card-body">
<h4 class="text-center pb-1">Time (t)
<a tabindex="0" class="btn btn-link" role="button" data-toggle="popover" data-trigger="focus" title="Time (s, min, hr, days)" data-content="Leave blank or enter the time the object has travelled for. Don't forget to check the units!">
<i class="far fa-question-circle fa mb-1"></i>
</a>
</h4>
<p class="card-text"></p>
<label for="inputTime">Time (t)</label><br>
<input type="number" name="inputTime" id="inputTime" class="reset_form checkVelocity" value="" min="0.0001" step="0.0001" autocomplete="off" aria-label="input value for time in seconds, minutes, hours or days"><br>
<label for="unitsTime">Units</label><br>
<select name="unitsTime" id="unitsTime" style="width:60px;">
<option value="s" selected>s</option>
<option value="min">min</option>
<option value="hr">hr</option>
<option value="days">days</option>
</select>
</div>
</div>
</div>
<!-- row close -->
</form>
</section>
<!-- Table 1 Select Output SI-Units -->
<section class="container border border-success mt-1 mb-1 bg_cont">
<h5>Table 1: Results in SI units</h5>
<form name="si_acceleration_calc" id="si_acceleration_calc">
<h6>Select the SI unit you are solving for:</h6>
<div class="form-check form-check-inline">
<input class="form-check-input" type="radio" name="si_unit" id="si_mss" value="si_mss">
<label class="form-check-label" for="si_mss">Acceleration (ms<sup>-2</sup>)</label>
</div>
<div class="form-check form-check-inline">
<input class="form-check-input" type="radio" name="si_unit" id="si_ms" value="si_ms">
<label class="form-check-label" for="si_ms">ΔVelocity (ms<sup>-1</sup>)</label>
</div>
<div class="form-check form-check-inline">
<input class="form-check-input" type="radio" name="si_unit" id="si_s" value="si_s">
<label class="form-check-label" for="si_s">time (s)</label>
</div>
</form>
<h6 class="answer_color" id="si_acceleration_answer">Answer =</h6>
<h6 class="equation_color">Equation Used:</h6>
<p id="si_acceleration_equation"></p>
<button type="button" class="btn-sm btn-outline-danger mb-2" id="resetButton">Reset</button>
<a tabindex="0" class="btn btn-link" role="button" data-toggle="popover" data-trigger="focus" title="Reset Form" data-content="Reset the form to add new variables to calculate. The answer will remain here until you calculate a new set of variables.">
<i class="far fa-question-circle fa mb-2"></i>
</a>
<br>
<p><em>Table 1 provides the SI unit for either ms<sup>-2</sup>, Δms<sup>-1</sup>, or s. You
can change the
output accordingly and see the common unit conversions in Table 2.</em></p>
</section>
<!-- Table 2 Results Table -->
<section class="container border border-success mt-1 mb-2 bg_cont">
<h5>Table 2: Results with common units displayed</h5>
<table class="table table-sm">
<thead>
<tr>
<th scope="col" class="w33">Acceleration</th>
<th scope="col" class="w33">ΔVelocity</th>
<th scope="col" class="w33">Time</th>
</tr>
</thead>
<tbody>
<tr>
<td id="mss">ms<sup>-2</sup></td>
<td id="ms">ms<sup>-1</sup></td>
<td id="s">s</td>
</tr>
<tr>
<td></td>
<td id="kmh">kmh<sup>-1</sup></td>
<td id="min">min</td>
</tr>
<tr>
<td></td>
<td id="mph">mph</td>
<td id="hr">hr</td>
</tr>
<tr>
<td></td>
<td id="fts">fts<sup>-1</sup></td>
<td id="days">days</td>
</tr>
</tbody>
</table>
<p><em>Table 2 shows the results of all the calculations and various units available with all
conversions completed.</em>
</p>
</section>
<footer>
<div class="footer"></div>
</footer>
<script src="assets/scripts/jquery-3.6.1.min.js"></script>
<script src="assets/scripts/bootstrap.bundle.js"></script>
<script src="assets/scripts/include_content.js"></script>
<script src="assets/scripts/calculators/acceleration.js"></script>
</body>
</html>