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