| <!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; |
| } |
| |
| .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; |
| 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"); |
| |
| |
| 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] + " "; |
| } else { |
| alert("Morse Code not found for this Character") |
| } |
| }); |
| alphabetContainer.appendChild(letterDiv); |
| } |
| |
| function decodeMorse() { |
| const morseCode = morseInput.value.toUpperCase().trim(); |
| status.textContent = "Decoding..."; |
| |
| if (!morseCode) { |
| status.textContent = "Please enter Morse code."; |
| return; |
| } |
| |
| try { |
| const decoded = morseToText(morseCode); |
| decodedText.value = decoded; |
| status.textContent = "Decoding Complete" |
| displayLED(morseCode); |
| } catch (error) { |
| decodedText.value = error; |
| status.textContent = `Error: ${error}`; |
| turnOffLED(); |
| } |
| |
| } |
| |
| function morseToText(morseCode) { |
| morseCode = morseCode.replace("/", " / "); |
| 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}`; |
| } |
| } |
| 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> |
