Index.html

<!DOCTYPE html>
<html>
<head>
    <title>Morse Code Decoder</title>
    <style>
        body {
            font-family: sans-serif;
            display: flex;
            flex-direction: column;
            align-items: center;
            padding: 20px;
        }

        .container {
            width: 80%;
            max-width: 600px;
        }

        textarea, input {
            width: 100%;
            padding: 8px;
            margin-bottom: 10px;
            box-sizing: border-box;
        }

        button {
            padding: 10px 20px;
            background-color: #4CAF50;
            color: white;
            border: none;
            cursor: pointer;
        }

        button:hover {
            background-color: #3e8e41;
        }

        #led {
            width: 50px;
            height: 50px;
            border-radius: 50%;
            background-color: gray;
            margin-top: 10px;
        }

        .alphabet-container {
            display: flex;
            flex-wrap: wrap;
            justify-content: center;
            margin-top: 20px;
        }

        .alphabet-letter {
            width: 30px;
            height: 30px;
            display: flex;
            align-items: center;
            justify-content: center;
            border: 1px solid #ccc;
            margin: 5px;
            cursor: pointer;
            user-select: none; /* Prevent text selection on click */
        }

        .alphabet-letter:hover {
            background-color: #f0f0f0;
        }
        #status {
            margin-top: 10px;
            font-style: italic;
        }

    </style>
</head>
<body>

    <div class="container">
        <h1>Morse Code Decoder</h1>

        <label for="morseInput">Morse Code Input:</label>
        <textarea id="morseInput" rows="4"></textarea>

        <button onclick="decodeMorse()">Decode</button>

        <label for="decodedText">Decoded Text:</label>
        <textarea id="decodedText" rows="4" readonly></textarea>

        <h2>LED Output</h2>
        <div id="led"></div>

        <h2>Alphabet Input</h2>
        <div class="alphabet-container" id="alphabetContainer">
        </div>

        <p id="status">Ready</p>
    </div>

    <script>
        const MORSE_CODE_DICT = {
            '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': '--..', '1': '.----', '2': '..---', '3': '...--',
            '4': '....-', '5': '.....', '6': '-....', '7': '--...', '8': '---..',
            '9': '----.', '0': '-----', ', ': '--..--', '.': '.-.-.-', '?': '..--..',
            '/': '-..-.', '-': '-....-', '(': '-.--.', ')': '-.--.-'
        };

        const dotDuration = 200; // milliseconds
        const dashDuration = dotDuration * 3;
        const spaceDuration = dotDuration * 7;
        const letterSpaceDuration = dotDuration * 3;

        const morseInput = document.getElementById("morseInput");
        const decodedText = document.getElementById("decodedText");
        const led = document.getElementById("led");
        const alphabetContainer = document.getElementById("alphabetContainer");
        const status = document.getElementById("status");

        // Generate alphabet buttons
        const alphabet = "ABCDEFGHIJKLMNOPQRSTUVWXYZ";
        for (let i = 0; i < alphabet.length; i++) {
            const letter = alphabet[i];
            const letterDiv = document.createElement("div");
            letterDiv.classList.add("alphabet-letter");
            letterDiv.textContent = letter;
            letterDiv.addEventListener("click", function() {
                if (MORSE_CODE_DICT[letter]) {
                   morseInput.value += MORSE_CODE_DICT[letter] + " "; // Add space after each letter
                } else {
                   alert("Morse Code not found for this Character")
                }
            });
            alphabetContainer.appendChild(letterDiv);
        }

        function decodeMorse() {
            const morseCode = morseInput.value.toUpperCase().trim();
            status.textContent = "Decoding..."; // Start decoding

            if (!morseCode) {
                status.textContent = "Please enter Morse code.";
                return;
            }

            try {
                const decoded = morseToText(morseCode);
                decodedText.value = decoded;
                status.textContent = "Decoding Complete" // Success!
                displayLED(morseCode);
            } catch (error) {
                decodedText.value = error; // Display Error
                status.textContent = `Error: ${error}`;
                turnOffLED(); // Turn off led
            }

        }

        function morseToText(morseCode) {
           morseCode = morseCode.replace("/", " / "); // Handle word separators
            const words = morseCode.split(" / ");
            let text = "";
            for (const word of words) {
                const letters = word.split(" ");
                for (const letter of letters) {
                    let found = false;
                    for (const key in MORSE_CODE_DICT) {
                        if (MORSE_CODE_DICT[key] === letter) {
                            text += key;
                            found = true;
                            break;
                        }
                    }
                    if (!found && letter) {
                        throw `Invalid Morse code: ${letter}`; // Throw exception for non found letters
                    }
                }
                text += " ";
            }
            return text.trim();
        }

        function displayLED(morseCode) {
            let i = 0;
            function animate() {
                if (i < morseCode.length) {
                    const symbol = morseCode[i];
                    if (symbol === '.') {
                        turnOnLED();
                      setTimeout(() => {
                            turnOffLED();
                            setTimeout(() => {
                                i++;
                                animate();
                            }, dotDuration);
                        }, dotDuration);
                    } else if (symbol === '-') {
                        turnOnLED();
                        setTimeout(() => {
                            turnOffLED();
                            setTimeout(() => {
                                i++;
                                animate();
                            }, dotDuration);
                        }, dashDuration);
                    } else if (symbol === ' ') {
                        setTimeout(() => {
                            i++;
                            animate();
                        }, letterSpaceDuration);
                    }
                    else if (symbol === '/') {
                        setTimeout(() => {
                            i++;
                            animate();
                        }, spaceDuration);
                    }

                } else {
                    turnOffLED();
                }
            }
            animate();
        }

        function turnOnLED() {
            led.style.backgroundColor = "yellow";
        }

        function turnOffLED() {
            led.style.backgroundColor = "gray";
        }
    </script>

</body>
</html>