Skip to content

feat: Add 10 new educational tools using Svelte 5 runes and shadcn components #546

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
Inglan merged 3 commits into from
Oct 1, 2025
Merged

feat: Add 10 new educational tools using Svelte 5 runes and shadcn components #546

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
3 commits
Select commit Hold shift + click to select a range
cc08ea5
Initial plan
Copilot Sep 30, 2025
c74d466
feat: Add 10 new educational tools using Svelte 5 runes and shadcn co…
Copilot Sep 30, 2025
48a061a
fix: Address UI feedback - update copy buttons, remove problematic fe…
Copilot Sep 30, 2025
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
40 changes: 40 additions & 0 deletions src/lib/navigation.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -67,6 +67,46 @@ export function createMainNavigation(
{
title: 'Stopwatch & Timer',
url: '/tools/stopwatch-timer'
},
{
title: 'QR Code Generator',
url: '/tools/qr-code-generator'
},
{
title: 'Base64 Converter',
url: '/tools/base64-converter'
},
{
title: 'JSON Formatter',
url: '/tools/json-formatter'
},
{
title: 'Color Picker',
url: '/tools/color-picker'
},
{
title: 'URL Tools',
url: '/tools/url-tools'
},
{
title: 'Hash Generator',
url: '/tools/hash-generator'
},
{
title: 'Lorem Generator',
url: '/tools/lorem-generator'
},
{
title: 'ASCII Art',
url: '/tools/ascii-art'
},
{
title: 'Markdown Preview',
url: '/tools/markdown-preview'
},
{
title: 'Regex Tester',
url: '/tools/regex-tester'
}
]
},
Expand Down
12 changes: 11 additions & 1 deletion src/routes/+page.svelte
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -15,7 +15,17 @@
{ name: 'Word Counter', url: '/tools/word-counter' },
{ name: 'Password Generator', url: '/tools/password-generator' },
{ name: 'Random Number Generator', url: '/tools/random-number-generator' },
{ name: 'Stopwatch & Timer', url: '/tools/stopwatch-timer' }
{ name: 'Stopwatch & Timer', url: '/tools/stopwatch-timer' },
{ name: 'QR Code Generator', url: '/tools/qr-code-generator' },
{ name: 'Base64 Converter', url: '/tools/base64-converter' },
{ name: 'JSON Formatter', url: '/tools/json-formatter' },
{ name: 'Color Picker', url: '/tools/color-picker' },
{ name: 'URL Tools', url: '/tools/url-tools' },
{ name: 'Hash Generator', url: '/tools/hash-generator' },
{ name: 'Lorem Generator', url: '/tools/lorem-generator' },
{ name: 'ASCII Art', url: '/tools/ascii-art' },
{ name: 'Markdown Preview', url: '/tools/markdown-preview' },
{ name: 'Regex Tester', url: '/tools/regex-tester' }
];
</script>

Expand Down
147 changes: 147 additions & 0 deletions src/routes/tools/ascii-art/+page.svelte
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,147 @@
<script lang="ts">
import { Button } from '$lib/components/ui/button/index.js';
import { Input } from '$lib/components/ui/input/index.js';
import {
Card,
CardContent,
CardDescription,
CardHeader,
CardTitle
} from '$lib/components/ui/card/index.js';

let inputText = $state('');
let output = $state('');

// Simple ASCII art fonts
const fonts = {
block: {
A: ['█████', '█ █', '█████', '█ █', '█ █'],
B: ['████ ', '█ █', '████ ', '█ █', '████ '],
C: ['█████', '█ ', '█ ', '█ ', '█████'],
D: ['████ ', '█ █', '█ █', '█ █', '████ '],
E: ['█████', '█ ', '███ ', '█ ', '█████'],
F: ['█████', '█ ', '███ ', '█ ', '█ '],
G: ['█████', '█ ', '█ ███', '█ █', '█████'],
H: ['█ █', '█ █', '█████', '█ █', '█ █'],
I: ['█████', ' █ ', ' █ ', ' █ ', '█████'],
J: ['█████', ' █', ' █', '█ █', '█████'],
K: ['█ █', '█ █ ', '███ ', '█ █ ', '█ █'],
L: ['█ ', '█ ', '█ ', '█ ', '█████'],
M: ['█ █', '██ ██', '█ █ █', '█ █', '█ █'],
N: ['█ █', '██ █', '█ █ █', '█ ██', '█ █'],
O: ['█████', '█ █', '█ █', '█ █', '█████'],
P: ['████ ', '█ █', '████ ', '█ ', '█ '],
Q: ['█████', '█ █', '█ █ █', '█ ██', '██ ██'],
R: ['████ ', '█ █', '████ ', '█ █ ', '█ █'],
S: ['█████', '█ ', '█████', ' █', '█████'],
T: ['█████', ' █ ', ' █ ', ' █ ', ' █ '],
U: ['█ █', '█ █', '█ █', '█ █', '█████'],
V: ['█ █', '█ █', '█ █', ' █ █ ', ' █ '],
W: ['█ █', '█ █', '█ █ █', '██ ██', '█ █'],
X: ['█ █', ' █ █ ', ' █ ', ' █ █ ', '█ █'],
Y: ['█ █', ' █ █ ', ' █ ', ' █ ', ' █ '],
Z: ['█████', ' █ ', ' █ ', ' █ ', '█████'],
' ': [' ', ' ', ' ', ' ', ' '],
'!': [' █ ', ' █ ', ' █ ', ' ', ' █ '],
'?': ['█████', ' █', ' ██ ', ' ', ' █ ']
}
};

function generateAsciiArt() {
if (!inputText.trim()) {
output = '';
return;
}

const selectedFont = fonts.block;
const text = inputText.toUpperCase();
const lines: string[] = [];

// Get the height of the font (number of rows)
const fontHeight = Object.values(selectedFont)[0].length;

// Initialize lines array
for (let i = 0; i < fontHeight; i++) {
lines.push('');
}

// Process each character
for (let charIndex = 0; charIndex < text.length; charIndex++) {
const char = text[charIndex];
const charPattern = selectedFont[char] || selectedFont[' '];

// Add each line of the character to the corresponding line
for (let lineIndex = 0; lineIndex < fontHeight; lineIndex++) {
lines[lineIndex] += charPattern[lineIndex];
// Add space between characters (except for the last character)
if (charIndex < text.length - 1) {
lines[lineIndex] += ' ';
}
}
}

output = lines.join('\n');
}

function copyToClipboard() {
if (output) {
navigator.clipboard.writeText(output);
}
}

function clearAll() {
inputText = '';
output = '';
}

// Auto-generate ASCII art when input changes
$effect(() => {
generateAsciiArt();
});
</script>

<div class="flex h-full flex-col items-center justify-center gap-4 p-4">
<Card class="w-full max-w-4xl">
<CardHeader>
<CardTitle>ASCII Art Generator</CardTitle>
<CardDescription>Convert text into ASCII art</CardDescription>
</CardHeader>
<CardContent class="space-y-4">
<div class="grid grid-cols-1 gap-4">
<div>
<label for="text" class="mb-2 block text-sm font-medium">Text to Convert:</label>
<Input
id="text"
bind:value={inputText}
placeholder="Enter text (letters, spaces, !, ? supported)"
maxlength="20"
class="w-full"
/>
</div>
</div>

<div class="flex gap-2">
<Button onclick={generateAsciiArt} disabled={!inputText.trim()}>Generate ASCII Art</Button>
<Button variant="outline" onclick={clearAll}>Clear</Button>
{#if output}
<Button variant="secondary" onclick={copyToClipboard}>Copy ASCII Art</Button>
{/if}
</div>

{#if output}
<div>
<h3 class="mb-2 text-lg font-semibold">ASCII Art:</h3>
<div class="overflow-auto rounded border bg-black p-4 text-green-400">
<pre class="font-mono text-sm whitespace-pre">{output}</pre>
</div>
</div>
{/if}

<div class="text-muted-foreground space-y-1 text-sm">
<p><strong>Supported characters:</strong> A-Z, space, !, ?</p>
<p><strong>Tip:</strong> Keep text short (max 20 characters) for best results</p>
<p><strong>Note:</strong> ASCII art works best with monospace fonts</p>
</div>
</CardContent>
</Card>
</div>
107 changes: 107 additions & 0 deletions src/routes/tools/base64-converter/+page.svelte
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,107 @@
<script lang="ts">
import { Button } from '$lib/components/ui/button/index.js';
import {
Card,
CardContent,
CardDescription,
CardHeader,
CardTitle
} from '$lib/components/ui/card/index.js';
import { Textarea } from '$lib/components/ui/textarea/index.js';
import { Tabs, TabsContent, TabsList, TabsTrigger } from '$lib/components/ui/tabs/index.js';

let inputText = $state('');
let outputText = $state('');
let error = $state('');

function encode() {
try {
error = '';
outputText = btoa(inputText);
} catch (e) {
error = 'Failed to encode. Please check your input.';
outputText = '';
}
}

function decode() {
try {
error = '';
outputText = atob(inputText);
} catch (e) {
error = 'Invalid Base64 input. Please check your input.';
outputText = '';
}
}

function clearAll() {
inputText = '';
outputText = '';
error = '';
}

function copyToClipboard() {
if (outputText) {
navigator.clipboard.writeText(outputText);
}
}
</script>

<div class="flex h-full flex-col items-center justify-center gap-4 p-4">
<Card class="w-full max-w-4xl">
<CardHeader>
<CardTitle>Base64 Encoder/Decoder</CardTitle>
<CardDescription>Encode text to Base64 or decode Base64 back to text</CardDescription>
</CardHeader>
<CardContent class="space-y-4">
<Tabs value="encode" class="w-full">
<TabsList class="grid w-full grid-cols-2">
<TabsTrigger value="encode">Encode</TabsTrigger>
<TabsTrigger value="decode">Decode</TabsTrigger>
</TabsList>

<TabsContent value="encode" class="space-y-4">
<div>
<Textarea
bind:value={inputText}
placeholder="Enter text to encode to Base64..."
class="min-h-[150px]"
/>
</div>
<Button onclick={encode} disabled={!inputText.trim()}>Encode to Base64</Button>
</TabsContent>

<TabsContent value="decode" class="space-y-4">
<div>
<Textarea
bind:value={inputText}
placeholder="Enter Base64 text to decode..."
class="min-h-[150px]"
/>
</div>
<Button onclick={decode} disabled={!inputText.trim()}>Decode from Base64</Button>
</TabsContent>
</Tabs>
Comment on lines +57 to +84
Copy link
Contributor

@coderabbitai coderabbitai bot Oct 1, 2025

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

⚠️ Potential issue | 🔴 Critical

Allow the tabs to switch so the Decode tool is usable.

<Tabs value="encode"> locks the component to the Encode tab; clicking “Decode” never changes the active tab, so the decoding workflow can’t be reached. Use defaultValue="encode" (or bind value to state) so the tab set can update on user interaction.

-			<Tabs value="encode" class="w-full">
+			<Tabs defaultValue="encode" class="w-full">
📝 Committable suggestion

‼️ IMPORTANT
Carefully review the code before committing. Ensure that it accurately replaces the highlighted code, contains no missing lines, and has no issues with indentation. Thoroughly test & benchmark the code to ensure it meets the requirements.

Suggested change
<Tabs value="encode" class="w-full">
<TabsList class="grid w-full grid-cols-2">
<TabsTrigger value="encode">Encode</TabsTrigger>
<TabsTrigger value="decode">Decode</TabsTrigger>
</TabsList>
<TabsContent value="encode" class="space-y-4">
<div>
<Textarea
bind:value={inputText}
placeholder="Enter text to encode to Base64..."
class="min-h-[150px]"
/>
</div>
<Button onclick={encode} disabled={!inputText.trim()}>Encode to Base64</Button>
</TabsContent>
<TabsContent value="decode" class="space-y-4">
<div>
<Textarea
bind:value={inputText}
placeholder="Enter Base64 text to decode..."
class="min-h-[150px]"
/>
</div>
<Button onclick={decode} disabled={!inputText.trim()}>Decode from Base64</Button>
</TabsContent>
</Tabs>
<Tabs defaultValue="encode" class="w-full">
<TabsList class="grid w-full grid-cols-2">
<TabsTrigger value="encode">Encode</TabsTrigger>
<TabsTrigger value="decode">Decode</TabsTrigger>
</TabsList>
<TabsContent value="encode" class="space-y-4">
<div>
<Textarea
bind:value={inputText}
placeholder="Enter text to encode to Base64..."
class="min-h-[150px]"
/>
</div>
<Button onclick={encode} disabled={!inputText.trim()}>Encode to Base64</Button>
</TabsContent>
<TabsContent value="decode" class="space-y-4">
<div>
<Textarea
bind:value={inputText}
placeholder="Enter Base64 text to decode..."
class="min-h-[150px]"
/>
</div>
<Button onclick={decode} disabled={!inputText.trim()}>Decode from Base64</Button>
</TabsContent>
</Tabs>
🤖 Prompt for AI Agents 
In src/routes/tools/base64-converter/+page.svelte around lines 57 to 84, the
Tabs component is hard-locked to the Encode tab because it uses a static
value="encode", preventing users from switching to Decode; change it to use
defaultValue="encode" or bind the Tabs value to component state (e.g.,
bind:value={activeTab}) so the tab selection can update on user interaction, and
ensure any existing encode/decode handlers use the same bound state if needed.


<div class="flex gap-2">
<Button variant="outline" onclick={clearAll}>Clear All</Button>
{#if outputText}
<Button variant="secondary" onclick={copyToClipboard}>Copy Result</Button>
{/if}
</div>

{#if error}
<div class="text-destructive bg-destructive/10 rounded border p-3">
{error}
</div>
{/if}

{#if outputText}
<div>
<h3 class="mb-2 text-lg font-semibold">Result:</h3>
<Textarea value={outputText} readonly class="bg-muted min-h-[150px]" />
</div>
{/if}
</CardContent>
</Card>
</div>
Loading