-
Notifications
You must be signed in to change notification settings - Fork 1
/
Copy pathrounding.html
35 lines (35 loc) · 2.14 KB
/
rounding.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
<!DOCTYPE html>
<html>
<head>
<title>Round any Number to X</title>
<script src="js/script.js"></script>
<link rel="stylesheet" href="css/style.css" type="text/css"></link>
</head>
<body onload="setStartValues()">
<label for="roundThis">Number to round:</label>
<input type="number" id="roundThis" />
<br />
<label for="roundTo">Round to nearest:</label>
<input type="number" id="roundTo" required="required" min="1" onchange="CheckGoal(this, event)" />
<br />
<button id="btnRound" onclick="RoundNumbers()">Round!</button>
<span id="answerSpan"></span>
<br />
<br />
<span id="expandCollapseSpan" onclick="ShowNarrative()">+ </span><span id="narrSpan" onclick="ShowNarrative()">Show Narrative</span>
<br />
<div id="narrative" class="narrativeHide">
<ol>
<li>I started by looking at what the inputs and outputs needed to be. "Make [number] round to the nearest [target]" means two numbers would be the input, and the output should show the nearest multiple of the target in a way the user can understand.</li>
<br />
<li>The most obvious thing is to keep up with the quotient of the number divided by the target so I can know which multiple of the target to use. Looking at the remainder in decimal form will determine whether to round up or down. If rounding up, then the quotient will need to be incremented before multiplying. Otherwise, simply multiply the target by the quotient.</li>
<br />
<li>After multiplication, the product needs to be checked for a zero value. If so, the function should return the target.</li>
<br />
<li>Rounding negative numbers threw me for a loop at first. In particular, -1 rounded to the nearest 2 resulted in 2 instead of -2. While using the absolute value was definitely the answer, I tried it in too many places (in the middle of if statements, arithmetic, etc.) before realizing that I could just perform it on the quotient and check the number for a negative at the end.</li>
<br />
<li>After that worked, I went back to add data validation such as no blank inputs and error checking/handling such as positive integers as the target.</li>
</ol>
</div>
</body>
</html>