Skip to content

Commit cd5a5d8

Browse files
developer-yash03developer-yash03
committed
Added Birectional functionality that is Morse-to-Text
1 parent 0a9b6a4 commit cd5a5d8

2 files changed

Lines changed: 113 additions & 229 deletions

File tree

‎web-app/js/projects.js‎

Lines changed: 0 additions & 209 deletions
Original file line numberDiff line numberDiff line change
@@ -4664,215 +4664,6 @@ bestDisplay.textContent = bestScore;
46644664
// ============================================
46654665
// MORSE CODE TRANSLATOR
46664666
// ============================================
4667-
function getMorseCodeHTML() {
4668-
return `
4669-
<div class="project-content">
4670-
<h2>📻 Morse Code Translator</h2>
4671-
<div class="morse-container">
4672-
<div class="input-section">
4673-
<label for="textInput">Enter Text:</label>
4674-
<textarea id="textInput" rows="4" placeholder="Type your message here..."></textarea>
4675-
<button class="btn-translate" id="translateBtn">📻 Translate to Morse</button>
4676-
</div>
4677-
4678-
<div class="output-section">
4679-
<h3>Morse Code Output:</h3>
4680-
<div class="morse-output" id="morseOutput">
4681-
<p class="placeholder">Your morse code will appear here...</p>
4682-
</div>
4683-
</div>
4684-
4685-
<div class="morse-chart">
4686-
<h4>📊 Morse Code Reference Chart</h4>
4687-
<div class="chart-grid" id="morseChart"></div>
4688-
</div>
4689-
</div>
4690-
</div>
4691-
4692-
<style>
4693-
.morse-container {
4694-
padding: 2rem;
4695-
max-width: 800px;
4696-
margin: 0 auto;
4697-
}
4698-
4699-
.input-section {
4700-
margin-bottom: 2rem;
4701-
}
4702-
4703-
.input-section label {
4704-
display: block;
4705-
margin-bottom: 0.5rem;
4706-
font-size: 1.1rem;
4707-
font-weight: 600;
4708-
}
4709-
4710-
.input-section textarea {
4711-
width: 100%;
4712-
padding: 1rem;
4713-
font-size: 1.1rem;
4714-
border: 2px solid var(--border-color);
4715-
border-radius: 10px;
4716-
background: var(--bg-color);
4717-
color: var(--text-color);
4718-
resize: vertical;
4719-
font-family: inherit;
4720-
}
4721-
4722-
.btn-translate {
4723-
background: linear-gradient(135deg, var(--primary-color), var(--secondary-color));
4724-
color: white;
4725-
border: none;
4726-
padding: 1rem 2rem;
4727-
border-radius: 50px;
4728-
font-size: 1.1rem;
4729-
cursor: pointer;
4730-
margin-top: 1rem;
4731-
transition: var(--transition);
4732-
}
4733-
4734-
.btn-translate:hover {
4735-
transform: scale(1.05);
4736-
box-shadow: 0 5px 20px rgba(99, 102, 241, 0.4);
4737-
}
4738-
4739-
.output-section h3 {
4740-
margin-bottom: 1rem;
4741-
}
4742-
4743-
.morse-output {
4744-
background: var(--surface-color);
4745-
border: 2px solid var(--border-color);
4746-
border-radius: 10px;
4747-
padding: 1.5rem;
4748-
min-height: 100px;
4749-
margin-bottom: 2rem;
4750-
}
4751-
4752-
.morse-word {
4753-
display: inline-block;
4754-
margin: 0.5rem;
4755-
padding: 0.75rem 1rem;
4756-
background: var(--bg-color);
4757-
border-radius: 8px;
4758-
font-family: 'Courier New', monospace;
4759-
font-size: 1.2rem;
4760-
font-weight: bold;
4761-
color: var(--primary-color);
4762-
animation: fadeIn 0.3s ease;
4763-
}
4764-
4765-
.placeholder {
4766-
color: var(--text-secondary);
4767-
text-align: center;
4768-
font-style: italic;
4769-
}
4770-
4771-
.morse-chart {
4772-
margin-top: 3rem;
4773-
}
4774-
4775-
.morse-chart h4 {
4776-
margin-bottom: 1rem;
4777-
text-align: center;
4778-
}
4779-
4780-
.chart-grid {
4781-
display: grid;
4782-
grid-template-columns: repeat(auto-fill, minmax(80px, 1fr));
4783-
gap: 0.5rem;
4784-
}
4785-
4786-
.chart-item {
4787-
background: var(--surface-color);
4788-
border: 1px solid var(--border-color);
4789-
border-radius: 8px;
4790-
padding: 0.5rem;
4791-
text-align: center;
4792-
font-size: 0.9rem;
4793-
}
4794-
4795-
.chart-char {
4796-
font-weight: bold;
4797-
font-size: 1.1rem;
4798-
color: var(--primary-color);
4799-
}
4800-
4801-
.chart-morse {
4802-
font-family: 'Courier New', monospace;
4803-
color: var(--text-secondary);
4804-
margin-top: 0.25rem;
4805-
}
4806-
</style>
4807-
`;
4808-
}
4809-
4810-
function initMorseCode() {
4811-
const morseCode = {
4812-
'A': '.-', 'B': '-...', 'C': '-.-.', 'D': '-..', 'E': '.', 'F': '..-.',
4813-
'G': '--.', 'H': '....', 'I': '..', 'J': '.---', 'K': '-.-', 'L': '.-..',
4814-
'M': '--', 'N': '-.', 'O': '---', 'P': '.--.', 'Q': '--.-', 'R': '.-.',
4815-
'S': '...', 'T': '-', 'U': '..-', 'V': '...-', 'W': '.--', 'X': '-..-',
4816-
'Y': '-.--', 'Z': '--..', '0': '-----', '1': '.----', '2': '..---',
4817-
'3': '...--', '4': '....-', '5': '.....', '6': '-....', '7': '--...',
4818-
'8': '---..', '9': '----.', ' ': '/'
4819-
};
4820-
4821-
const textInput = document.getElementById('textInput');
4822-
const translateBtn = document.getElementById('translateBtn');
4823-
const morseOutput = document.getElementById('morseOutput');
4824-
const morseChart = document.getElementById('morseChart');
4825-
4826-
// Populate morse chart
4827-
Object.keys(morseCode).forEach(char => {
4828-
if (char !== ' ') {
4829-
const item = document.createElement('div');
4830-
item.className = 'chart-item';
4831-
item.innerHTML = `
4832-
<div class="chart-char">${char}</div>
4833-
<div class="chart-morse">${morseCode[char]}</div>
4834-
`;
4835-
morseChart.appendChild(item);
4836-
}
4837-
});
4838-
4839-
// Translate function
4840-
function translate() {
4841-
const text = textInput.value.toUpperCase();
4842-
if (!text.trim()) {
4843-
morseOutput.innerHTML = '<p class="placeholder">Please enter some text to translate!</p>';
4844-
return;
4845-
}
4846-
4847-
morseOutput.innerHTML = '';
4848-
const words = text.split(' ');
4849-
4850-
words.forEach((word, wordIndex) => {
4851-
let morseWord = '';
4852-
for (let char of word) {
4853-
if (morseCode[char]) {
4854-
morseWord += morseCode[char] + ' ';
4855-
}
4856-
}
4857-
4858-
if (morseWord.trim()) {
4859-
const wordEl = document.createElement('div');
4860-
wordEl.className = 'morse-word';
4861-
wordEl.textContent = morseWord.trim();
4862-
wordEl.style.animationDelay = `${wordIndex * 0.1}s`;
4863-
morseOutput.appendChild(wordEl);
4864-
}
4865-
});
4866-
}
4867-
4868-
translateBtn.addEventListener('click', translate);
4869-
textInput.addEventListener('keypress', (e) => {
4870-
if (e.key === 'Enter' && e.ctrlKey) {
4871-
translate();
4872-
}
4873-
});
4874-
}
4875-
48764667
// ============================================
48774668
// PRIME ANALYZER
48784669
// ============================================

‎web-app/js/projects/morse-code.js‎

Lines changed: 113 additions & 20 deletions
Original file line numberDiff line numberDiff line change
@@ -4,15 +4,21 @@ function getMorseCodeHTML() {
44
<h2>📻 Morse Code Translator</h2>
55
<div class="morse-container">
66
<div class="input-section">
7-
<label for="textInput">Enter Text:</label>
7+
<div class="mode-toggle">
8+
<input type="radio" id="modeTextToMorse" name="translationMode" value="textToMorse" checked>
9+
<label for="modeTextToMorse">Text to Morse</label>
10+
<input type="radio" id="modeMorseToText" name="translationMode" value="morseToText">
11+
<label for="modeMorseToText">Morse to Text</label>
12+
</div>
13+
<label id="inputLabel" for="textInput">Enter Text:</label>
814
<textarea id="textInput" rows="4" placeholder="Type your message here..."></textarea>
915
<button class="btn-translate" id="translateBtn">📻 Translate to Morse</button>
1016
</div>
1117
1218
<div class="output-section">
13-
<h3>Morse Code Output:</h3>
19+
<h3>Translation Output:</h3>
1420
<div class="morse-output" id="morseOutput">
15-
<p class="placeholder">Your morse code will appear here...</p>
21+
<p class="placeholder">Your translation will appear here...</p>
1622
</div>
1723
</div>
1824
@@ -34,6 +40,33 @@ function getMorseCodeHTML() {
3440
margin-bottom: 2rem;
3541
}
3642
43+
.mode-toggle {
44+
display: flex;
45+
gap: 1rem;
46+
margin-bottom: 1.5rem;
47+
}
48+
49+
.mode-toggle input[type="radio"] {
50+
display: none;
51+
}
52+
53+
.mode-toggle label {
54+
padding: 0.5rem 1rem;
55+
border: 2px solid var(--primary-color);
56+
border-radius: 8px;
57+
cursor: pointer;
58+
font-weight: bold;
59+
color: var(--text-color);
60+
transition: var(--transition);
61+
margin-bottom: 0 !important;
62+
display: inline-block !important;
63+
}
64+
65+
.mode-toggle input[type="radio"]:checked + label {
66+
background: var(--primary-color);
67+
color: white;
68+
}
69+
3770
.input-section label {
3871
display: block;
3972
margin-bottom: 0.5rem;
@@ -149,13 +182,39 @@ function initMorseCode() {
149182
'S': '...', 'T': '-', 'U': '..-', 'V': '...-', 'W': '.--', 'X': '-..-',
150183
'Y': '-.--', 'Z': '--..', '0': '-----', '1': '.----', '2': '..---',
151184
'3': '...--', '4': '....-', '5': '.....', '6': '-....', '7': '--...',
152-
'8': '---..', '9': '----.', ' ': '/'
185+
'8': '---..', '9': '----.', '.': '.-.-.-', ',': '--..--', '?': '..--..',
186+
'!': '-.-.--', '-': '-....-', '/': '-..-.', '@': '.--.-.', '(': '-.--.',
187+
')': '-.--.-', ' ': '/'
153188
};
154189

155190
const textInput = document.getElementById('textInput');
156191
const translateBtn = document.getElementById('translateBtn');
157192
const morseOutput = document.getElementById('morseOutput');
158193
const morseChart = document.getElementById('morseChart');
194+
const modeTextToMorse = document.getElementById('modeTextToMorse');
195+
const modeMorseToText = document.getElementById('modeMorseToText');
196+
const inputLabel = document.getElementById('inputLabel');
197+
198+
// Switch Modes
199+
modeTextToMorse.addEventListener('change', () => {
200+
if (modeTextToMorse.checked) {
201+
inputLabel.textContent = 'Enter Text:';
202+
textInput.placeholder = 'Type your message here...';
203+
textInput.value = '';
204+
morseOutput.innerHTML = '<p class="placeholder">Your translation will appear here...</p>';
205+
translateBtn.innerHTML = '📻 Translate to Morse';
206+
}
207+
});
208+
209+
modeMorseToText.addEventListener('change', () => {
210+
if (modeMorseToText.checked) {
211+
inputLabel.textContent = 'Enter Morse Code:';
212+
textInput.placeholder = "Type morse code (separate letters with space, words with double spaces)...";
213+
textInput.value = '';
214+
morseOutput.innerHTML = '<p class="placeholder">Your translation will appear here...</p>';
215+
translateBtn.innerHTML = '📝 Translate to Text';
216+
}
217+
});
159218

160219
Object.keys(morseCode).forEach(char => {
161220
if (char !== ' ') {
@@ -172,29 +231,63 @@ function initMorseCode() {
172231
function translate() {
173232
const text = textInput.value.toUpperCase();
174233
if (!text.trim()) {
175-
morseOutput.innerHTML = '<p class="placeholder">Please enter some text to translate!</p>';
234+
morseOutput.innerHTML = '<p class="placeholder">Please enter something to translate!</p>';
176235
return;
177236
}
178237

179238
morseOutput.innerHTML = '';
180-
const words = text.split(' ');
181239

182-
words.forEach((word, wordIndex) => {
183-
let morseWord = '';
184-
for (let char of word) {
185-
if (morseCode[char]) {
186-
morseWord += morseCode[char] + ' ';
240+
if (modeMorseToText.checked) {
241+
// Morse to Text
242+
const reverseMorseCode = {};
243+
Object.keys(morseCode).forEach(key => {
244+
reverseMorseCode[morseCode[key]] = key;
245+
});
246+
247+
const words = text.trim().split(/(?:\s*\/\s*|\s{2,})/);
248+
249+
words.forEach((word, wordIndex) => {
250+
const chars = word.trim().split(/\s+/);
251+
let textWord = '';
252+
chars.forEach(char => {
253+
if (reverseMorseCode[char]) {
254+
textWord += reverseMorseCode[char];
255+
} else if (char) {
256+
textWord += '?';
257+
}
258+
});
259+
260+
if (textWord.trim()) {
261+
const wordEl = document.createElement('div');
262+
wordEl.className = 'morse-word';
263+
wordEl.style.fontFamily = 'inherit';
264+
wordEl.style.letterSpacing = '2px';
265+
wordEl.textContent = textWord.trim();
266+
wordEl.style.animationDelay = `${wordIndex * 0.1}s`;
267+
morseOutput.appendChild(wordEl);
187268
}
188-
}
269+
});
270+
} else {
271+
// Text to Morse
272+
const words = text.split(' ');
189273

190-
if (morseWord.trim()) {
191-
const wordEl = document.createElement('div');
192-
wordEl.className = 'morse-word';
193-
wordEl.textContent = morseWord.trim();
194-
wordEl.style.animationDelay = `${wordIndex * 0.1}s`;
195-
morseOutput.appendChild(wordEl);
196-
}
197-
});
274+
words.forEach((word, wordIndex) => {
275+
let morseWord = '';
276+
for (let char of word) {
277+
if (morseCode[char]) {
278+
morseWord += morseCode[char] + ' ';
279+
}
280+
}
281+
282+
if (morseWord.trim()) {
283+
const wordEl = document.createElement('div');
284+
wordEl.className = 'morse-word';
285+
wordEl.textContent = morseWord.trim();
286+
wordEl.style.animationDelay = `${wordIndex * 0.1}s`;
287+
morseOutput.appendChild(wordEl);
288+
}
289+
});
290+
}
198291
}
199292

200293
translateBtn.addEventListener('click', translate);

0 commit comments

Comments
 (0)