Spaces:

nightfury
/

MorseCode

Running

App Files Files Community

nightfury commited on 20 days ago

Commit

2cc62f6

verified ·

1 Parent(s): a04cd9f

Create Index.html

Browse files

Files changed (1) hide show

Index.html +237 -0

Index.html ADDED Viewed

	@@ -0,0 +1,237 @@

+<!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>