-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathindex.html
98 lines (92 loc) · 3.52 KB
/
index.html
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Live Morse Code Converter</title>
<style>
body {
font-family: Arial, sans-serif;
max-width: 800px;
margin: 20px auto;
padding: 20px;
background-color: #1a1a1a;
color: #ffffff;
}
.container {
display: flex;
flex-direction: column;
gap: 20px;
}
h1 {
color: #ff0000;
text-align: center;
text-shadow: 2px 2px 4px rgba(255, 0, 0, 0.3);
}
textarea {
padding: 10px;
font-size: 16px;
height: 100px;
background-color: #2d2d2d;
color: #ffffff;
border: 2px solid #ff0000;
border-radius: 5px;
resize: vertical;
}
textarea:focus {
outline: none;
box-shadow: 0 0 5px #ff0000;
}
#output, #morseOutput {
padding: 15px;
border: 2px solid #ff0000;
min-height: 100px;
background-color: #2d2d2d;
border-radius: 5px;
word-wrap: break-word;
}
</style>
</head>
<body>
<div class="container">
<h1>Live Morse Code Converter</h1>
<textarea id="input" placeholder="Type your text here..."></textarea>
<div id="output"></div>
<textarea id="morseInput" placeholder="Type your Morse code here..."></textarea>
<div id="morseOutput"></div>
</div>
<script>
const morseCode = {
'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 textToMorse = document.getElementById('input');
const morseOutput = document.getElementById('output');
const morseToText = document.getElementById('morseInput');
const textOutput = document.getElementById('morseOutput');
textToMorse.addEventListener('input', function() {
const text = this.value.toUpperCase();
const morse = text.split('').map(char => {
return morseCode[char] || char;
}).join(' ');
morseOutput.textContent = morse;
});
morseToText.addEventListener('input', function() {
const morse = this.value.trim().split(' ');
const text = morse.map(code => {
return Object.keys(morseCode).find(key => morseCode[key] === code) || code;
}).join('');
textOutput.textContent = text;
});
</script>
</body>
</html>