Skip to content

Commit 1fe18d1

Browse files
author
Andrew Marcuse
committed
ASCIIfy page
1 parent 7bf7538 commit 1fe18d1

6 files changed

Lines changed: 97 additions & 0 deletions

File tree

‎asciify.html‎

Lines changed: 13 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,13 @@
1+
<!doctype html>
2+
<html lang="en">
3+
<head>
4+
<meta charset="UTF-8" />
5+
<link rel="icon" type="image/svg+xml" href="/favicon.svg" />
6+
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
7+
<title>Asciify</title>
8+
</head>
9+
<body>
10+
<div id="app"></div>
11+
<script type="module" src="/src/asciify.ts"></script>
12+
</body>
13+
</html>

‎package-lock.json‎

Lines changed: 17 additions & 0 deletions
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎package.json‎

Lines changed: 3 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -15,5 +15,8 @@
1515
"tailwindcss": "^4.2.1",
1616
"typescript": "~5.9.3",
1717
"vite": "^7.3.1"
18+
},
19+
"dependencies": {
20+
"any-ascii": "^0.3.3"
1821
}
1922
}

‎src/asciify.ts‎

Lines changed: 59 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,59 @@
1+
import './style.css'
2+
import { renderHeader } from './components/header.ts'
3+
4+
document.querySelector<HTMLDivElement>('#app')!.innerHTML = `
5+
<main class="min-h-screen bg-base-200" data-theme="light">
6+
<section class="mx-auto flex max-w-5xl flex-col gap-8 px-4 py-8 md:px-8 md:py-12">
7+
${renderHeader()}
8+
9+
<section class="rounded-box border border-base-300 bg-base-100 p-8 shadow-sm">
10+
<h1 class="text-3xl font-bold">Asciify</h1>
11+
<p class="mt-3 text-base-content/70">Type text below to convert it to ASCII in your browser.</p>
12+
13+
<form class="mt-6 flex flex-col gap-4" action="#" method="post" onsubmit="return false;">
14+
<label class="form-control w-full">
15+
<div class="label">
16+
<span class="label-text">Input text</span>
17+
</div>
18+
<textarea id="input-text" class="textarea textarea-bordered min-h-40 w-full" placeholder="Paste or type text here"></textarea>
19+
</label>
20+
21+
<label class="form-control w-full">
22+
<div class="label">
23+
<span class="label-text">ASCII output</span>
24+
</div>
25+
<textarea id="output-text" class="textarea textarea-bordered min-h-40 w-full" readonly></textarea>
26+
</label>
27+
</form>
28+
</section>
29+
</section>
30+
</main>
31+
`
32+
33+
const inputText = document.querySelector<HTMLTextAreaElement>('#input-text')
34+
const outputText = document.querySelector<HTMLTextAreaElement>('#output-text')
35+
36+
type AnyAsciiFn = (value: string) => string
37+
let anyAsciiPromise: Promise<AnyAsciiFn> | undefined
38+
39+
const loadAnyAscii = (): Promise<AnyAsciiFn> => {
40+
if (!anyAsciiPromise) {
41+
anyAsciiPromise = import('any-ascii').then((module) => module.default)
42+
}
43+
44+
return anyAsciiPromise
45+
}
46+
47+
const updateOutput = async () => {
48+
if (!inputText || !outputText) {
49+
return
50+
}
51+
52+
const anyAscii = await loadAnyAscii()
53+
outputText.value = anyAscii(inputText.value)
54+
}
55+
56+
inputText?.addEventListener('input', () => {
57+
void updateOutput()
58+
})
59+
void updateOutput()

‎src/main.ts‎

Lines changed: 4 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -9,6 +9,10 @@ document.querySelector<HTMLDivElement>('#app')!.innerHTML = `
99
1010
<div class="hero rounded-box border border-base-300 bg-base-100 shadow-sm">
1111
<div class="hero-content flex-col py-10 w-full items-start">
12+
<div class="flex flex-row items-center">
13+
<a href="/asciify.html" class="btn btn-primary">Asciify</a>
14+
<div class="ps-2">convert text to plain ASCII</div>
15+
</div>
1216
<div class="flex flex-row items-center">
1317
<a href="/bytecount.html" class="btn btn-primary">Byte Count</a>
1418
<div class="ps-2">count which bytes are in a file</div>

‎vite.config.ts‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -10,6 +10,7 @@ export default defineConfig({
1010
main: resolve(__dirname, 'index.html'),
1111
bytecount: resolve(__dirname, 'bytecount.html'),
1212
runecount: resolve(__dirname, 'runecount.html'),
13+
asciify: resolve(__dirname, 'asciify.html'),
1314
},
1415
},
1516
},

0 commit comments

Comments
 (0)