Skip to content

Commit 3fb6131

Browse files
sionlerouxsionleroux
committed
Initial commit: a basic web form to count digit occurrences in a range
Basic, minimalist design using unmodified sscaffold. Interactivity using Alpine.js. Bespoke countDigitOccurances function to do the actual work because I couldn't find any simple lib or other solution for it that seemed quick enough to implement. For the small range of numbers I'm interested in performance doesn't really matter, so the simplest approach works fine. Would've been cool if you didn't have to initialise all the digits to 0 first, i.e. increment or set to 1 if non-existing, but it doesn't matter that much, whatever.
0 parents  commit 3fb6131

1 file changed

Lines changed: 72 additions & 0 deletions

File tree

‎count-digits.html‎

Lines changed: 72 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,72 @@
1+
<!DOCTYPE html>
2+
<html>
3+
<head>
4+
<meta charset="UTF-8" />
5+
<meta name="viewport" content="width=device-width" />
6+
<title>Count Digits</title>
7+
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/sscaffold-css@0.1.1/sscaffold.min.css" integrity="sha256-tNrNp6fPTVnhpywTjgNV4jCx6W9d1wuALpwVmAQEYcs=" crossorigin="anonymous">
8+
<style type="text/css" media="screen">
9+
[x-cloak] {
10+
display: none !important;
11+
}
12+
</style>
13+
</head>
14+
<body>
15+
<script src="https://unpkg.com/alpinejs" defer></script>
16+
<main x-data="{ from: 1, to: 5, counts: {} }">
17+
<section>
18+
<h1>Count Digits</h1>
19+
<p>Enter a range of numbers to count the occurances of each digit.</p>
20+
<div>
21+
<fieldset class="row">
22+
<label class="column" for="from">From: <input type="number" min="0" x-model="from" /></label>
23+
<label class="column" for="to">To: <input type="number" min="0" x-model="to" /></label>
24+
</fieldset>
25+
<button @click="counts = countDigitOccurances(from, to)" >Count</button>
26+
</div>
27+
<table x-cloak x-show="Object.keys(counts).length > 0" x-transition>
28+
<thead>
29+
<tr>
30+
<th>Digit</th>
31+
<th>Occurances</th>
32+
</tr>
33+
</thead>
34+
<tbody>
35+
<template x-for="[digit, occurances] in Object.entries(counts)">
36+
<tr>
37+
<td x-text="digit"></td>
38+
<td x-text="occurances"></td>
39+
</tr>
40+
</template>
41+
</tbody>
42+
</table>
43+
</section>
44+
</main>
45+
<footer>
46+
Last updated by <a href="https://www.sionleroux.com/">Siôn le Roux</a> on <time datetime="2024-06-05">5 June 2024</time>.
47+
</footer>
48+
<script charset="utf-8">
49+
function countDigitOccurances(from, to) {
50+
const counts = { // If you don't do this all increments result in NaN
51+
0: 0,
52+
1: 0,
53+
2: 0,
54+
3: 0,
55+
4: 0,
56+
5: 0,
57+
6: 0,
58+
7: 0,
59+
8: 0,
60+
9: 0,
61+
};
62+
for (let num = from; num <= to; num++) {
63+
num.toString().split("").forEach((digit) => {
64+
counts[digit]++
65+
})
66+
}
67+
// Remove zero-counted elements before returning
68+
return Object.fromEntries(Object.entries(counts).filter(([, x]) => x > 0))
69+
}
70+
</script>
71+
</body>
72+
</html>

0 commit comments

Comments
 (0)