Morse Code Sandbox

Inspiration

I wanted to build a fun, nostalgic tool that makes Morse code interactive and easy to understand — no AI, no backend, just pure frontend logic.

What it does

Morse Code Sandbox lets you type text and convert it into Morse code. It shows the code, plays beeping sounds, and animates each symbol. You can also paste Morse code and decode it back into text.

How we built it

Single promt:

Create a single-page web app called “Morse Code Sandbox”.

Features:

One input field where the user can enter any text (letters, numbers, punctuation). A button labeled "Encode to Morse" that: Converts the input to Morse code using standard timing (. for dot, - for dash, / for space between words). Displays the Morse code string visually. Plays the Morse code with sound and animation: Short beep and flash for dot . Long beep and flash for dash - Slight pause between characters A second button labeled "Decode from Morse": Accepts Morse code input (e.g., .... . .-.. .-.. ---) Outputs the decoded plain text.

Optional Enhancements:

A “Play/Pause” toggle to hear the Morse sequence with sound. Flashing dot/dash animations (e.g., blinking div or circle). Tone settings (frequency, speed) using the Web Audio API. Download Morse as .wav or .mp3.

Technical:

Use Tailwind CSS for layout and styling. Use JavaScript for timing and sound playback (Web Audio API). No external API or AI required. Client-side only. Design it clean, fun, and retro — make it feel like a digital telegraph tool.

Built With

• react
• typescript
• vite