Skip to content

Commit 9d6dad1

Browse files
benhovingabenhovinga
committed
Initial commit
0 parents  commit 9d6dad1

3 files changed

Lines changed: 158 additions & 0 deletions

File tree

‎app.js‎

Lines changed: 72 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,72 @@
1+
/**
2+
* Programmer Math Practice App
3+
*
4+
* A tool to help junior developers practice some basic programming math.
5+
* @author Benjamin P.C. Hovinga
6+
* @copyright Copyright 2025 Benjamin P.C. Hovinga
7+
* @license MIT
8+
*
9+
* *This program does not contain AI generated code.*
10+
*/
11+
12+
13+
14+
function App() {
15+
console.clear();
16+
console.info('Starting App...')
17+
18+
// Save the pointers for the selection elements.
19+
const convertFromElements = document.getElementsByName('convertFrom');
20+
const convertToElements = document.getElementsByName('convertTo');
21+
22+
// Set the default states of the app.
23+
const conversionOptions = ['dec', 'bin', 'hex'];
24+
let convertFrom = conversionOptions[0];
25+
let convertTo = conversionOptions[1];
26+
convertFromElements[0].checked = true;
27+
convertToElements[0].disabled = true;
28+
convertToElements[1].checked = true;
29+
30+
// When 'convertFrom' changes.
31+
document.getElementById('convertFrom').addEventListener('change', function(event) {
32+
// Update the selected value.
33+
convertFrom = event.target.value;
34+
console.info(`User updated 'convertFrom': '${convertFrom}'`);
35+
36+
// Disable the sister option in 'convertTo'.
37+
convertToElements.forEach(function (element, index) {
38+
// Reset disabled elements.
39+
element.disabled = false;
40+
41+
// When we get to the sister option.
42+
if (element.value === convertFrom) {
43+
// Disable sister option.
44+
element.disabled = true;
45+
46+
// Change the selection if both 'to' and 'from' are selected.
47+
if (convertFrom === convertTo) {
48+
if (index >= 2) {
49+
// Move to top position.
50+
convertToElements[0].checked = true;
51+
convertTo = conversionOptions[0];
52+
} else {
53+
// Move to next position.
54+
convertToElements[index + 1]. checked = true;
55+
convertTo = conversionOptions[index + 1];
56+
}
57+
console.debug(`Program updated 'convertTo': '${convertTo}'`)
58+
}
59+
}
60+
});
61+
});
62+
63+
// When 'Convert To' changes.
64+
document.getElementById('convertTo').addEventListener('change', function(event) {
65+
// Update the selected value
66+
convertTo = event.target.value;
67+
console.info(`User updated 'convertTo': '${convertTo}'`);
68+
});
69+
}
70+
71+
// Start the app when the DOM is ready.
72+
window.addEventListener('DOMContentLoaded', App);

‎index.html‎

Lines changed: 64 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,64 @@
1+
<!DOCTYPE html>
2+
<html lang="en">
3+
<head>
4+
<meta charset="UTF-8">
5+
<meta name="viewport" content="width=device-width, initial-scale=1.0">
6+
<title>Programmer Math Practice App</title>
7+
<link rel="stylesheet" href="styles.css" />
8+
</head>
9+
<body>
10+
<h1>Programmer Math Practice</h1>
11+
<p>This is a tool you can use to practice converting between <strong>decimal</strong>, <strong>binary</strong>, and <strong>hexadecimal</strong> values.</p>
12+
13+
<!-- App -->
14+
<!--
15+
Abbreviations
16+
dec = decimal
17+
bin = binary
18+
hex = hexadecimal
19+
-->
20+
<form id="practiceApp">
21+
<!-- Convert from selector -->
22+
<fieldset id="convertFrom">
23+
<legend>Convert From</legend>
24+
25+
<input type="radio" id="fromDec" name="convertFrom" value="dec" />
26+
<label for="fromDec">Decimal</label><br />
27+
28+
<input type="radio" id="fromBin" name="convertFrom" value="bin" />
29+
<label for="fromBin">Binary</label><br />
30+
31+
<input type="radio" id="fromHex" name="convertFrom" value="hex" />
32+
<label for="fromHex">Hexadecimal</label><br />
33+
34+
</fieldset>
35+
36+
<!-- Convert to selector -->
37+
<fieldset id="convertTo">
38+
<legend>Convert To</legend>
39+
40+
<input type="radio" id="toDec" name="convertTo" value="dec" />
41+
<label for="toDec">Decimal</label><br />
42+
43+
<input type="radio" id="toBin" name="convertTo" value="bin" />
44+
<label for="toBin">Binary</label><br />
45+
46+
<input type="radio" id="toHex" name="convertTo" value="hex" />
47+
<label for="toHex">Hexadecimal</label>
48+
49+
</fieldset>
50+
51+
<!-- Quiz section -->
52+
<div>
53+
<span id="question">[RANDOM_VALUE]</span> = <input type="text" id="userGuess" placeholder="Your guess here" /><br />
54+
<input type="button" id="submitBtn" value="Submit" />
55+
</div>
56+
</form>
57+
58+
59+
<footer>
60+
<p>Made with ❤️ in 🍁 by <a target="_blank" rel="author" href="https://ben.hovinga.ca">Benjamin P.C. Hovinga</a>.</p>
61+
</footer>
62+
<script src="app.js"></script>
63+
</body>
64+
</html>

‎styles.css‎

Lines changed: 22 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,22 @@
1+
* {
2+
font-family: Helvetica, Arial, sans-serif;
3+
font-family:'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
4+
}
5+
6+
footer {
7+
font-size: xx-small;
8+
color: gray;
9+
padding: 1rem 0;
10+
margin: 1rem 0;
11+
text-align: center;
12+
}
13+
14+
legend {
15+
background-color:#555555;
16+
color: white;
17+
padding: 3px 6px;
18+
}
19+
20+
input {
21+
margin: 0.4rem;
22+
}

0 commit comments

Comments
 (0)