-
Notifications
You must be signed in to change notification settings - Fork 0
/
index.html
148 lines (135 loc) · 6.67 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
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>English to Russian/Hebrew Letter Converter</title>
<!-- Add Bootstrap CSS -->
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha1/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-KyZXEAg3QhqLMpG8r+Knujsl7/1L_dstPt3HV5HzF6Gvk/e3s3SS+8x6Fp5y3lSk" crossorigin="anonymous">
</head>
<style>
body {
background-color: #f0f2f5;
font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
}
h1 {
color: #1d2124;
}
textarea {
resize: none;
}
button {
margin: 0 5px 5px 0;
}
.letter-button {
background-color: #007bff;
color: #ffffff;
border-color: #007bff;
}
.letter-button.russian {
background-color: #ffc107;
color: #212529;
border-color: #ffc107;
}
#randomTextButton {
background-color: #007bff;
}
#randomTextButton:hover {
background-color: #ffc107;
}
</style>
<div class="container mt-5">
<h1 class="text-center mb-4">Learn Russian Cyrillic/ Hebrew alphabet</h1>
<div class="row">
<div class="col-md-12">
<textarea id="textInput" placeholder="Enter your text here" rows="20" cols="80" class="form-control mb-3"></textarea>
</div>
<div class="col-md-12 text-center">
<button id="randomTextButton" class="btn btn-primary mb-3">Get New Random Text</button>
<div class="col-md-12 text-center">
<button id="toggleLanguageButton" class="btn btn-secondary mb-3">Toggle Language: Hebrew</button>
</div>
<div id="letterButtons" class="col-md-12 d-flex flex-wrap justify-content-center"></div>
</div>
</div>
</div>
<!-- Add Bootstrap JavaScript -->
<script src="https://cdn.jsdelivr.net/npm/@popperjs/core@2.11.6/dist/umd/popper.min.js" integrity="sha384-oBqDVmMz4fnFO9gybB3S3uJd7+xrnz0D4tF3ocvn8OyL/7z0pKfo8k7vD8RJqQ2+" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha1/dist/js/bootstrap.min.js" integrity="sha384-rbsA6n8h6B4re4FzLp4OUWn7iCwD97/qqhEAB14D8L/ye7M2mmlxID1tFQmKfn5W" crossorigin="anonymous"></script>
<script>
const englishToRussian = {
'A': 'А', 'a': 'а', 'B': 'Б', 'b': 'б', 'C': 'С', 'c': 'с', 'D': 'Д', 'd': 'д', 'E': 'Е', 'e': 'е', 'F': 'Ф', 'f': 'ф',
'G': 'Г', 'g': 'г', 'H': 'Х', 'h': 'х', 'I': 'И', 'i': 'и', 'J': 'Й', 'j': 'й', 'K': 'К', 'k': 'к', 'L': 'Л', 'l': 'л',
'M': 'М', 'm': 'м', 'N': 'Н', 'n': 'н', 'O': 'О', 'o': 'о', 'P': 'П', 'p': 'п', 'Q': 'К', 'q': 'к', 'R': 'Р', 'r': 'р',
'S': 'С', 's': 'с', 'T': 'Т', 't': 'т', 'U': 'У', 'u': 'у', 'V': 'В', 'v': 'в', 'W': 'В', 'w': 'в', 'X': 'КС', 'x': 'кс',
'Y': 'Ы', 'y': 'ы', 'Z': 'З', 'z': 'з',
};
const englishToHebrew = {
'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': 'ז', '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': 'ז'
};
let currentMapping = englishToRussian;
const buttonContainer = document.getElementById('letterButtons');
const toggleLanguageButton = document.getElementById('toggleLanguageButton');
const createButtons = (mapping) => {
buttonContainer.innerHTML = ''; // Clear existing buttons
for (const letter in mapping) {
if (letter === letter.toLowerCase()) { // Only process lowercase letters to avoid duplicate buttons
const upperLetter = letter.toUpperCase();
const button = document.createElement('button');
button.innerText = `${upperLetter}/${letter} -> ${mapping[upperLetter]}/${mapping[letter]}`;
button.className = 'btn letter-button'; // Add Bootstrap button class and custom class
// Add a toggle property to track the state of the button
button.toggle = false;
button.addEventListener('click', () => {
const input = document.getElementById('textInput');
const upperRegex = new RegExp(button.toggle ? mapping[upperLetter] : upperLetter, 'g');
const lowerRegex = new RegExp(button.toggle ? mapping[letter] : letter, 'g');
input.value = input.value.replace(upperRegex, button.toggle ? upperLetter : mapping[upperLetter]);
input.value = input.value.replace(lowerRegex, button.toggle ? letter : mapping[letter]);
// Toggle the button state after each click
button.toggle = !button.toggle;
// Change button color when it's in the Russian letter state
if (button.toggle) {
button.classList.add('russian');
} else {
button.classList.remove('russian');
}
});
buttonContainer.appendChild(button);
}
}
};
createButtons(currentMapping);
toggleLanguageButton.addEventListener('click', () => {
if (currentMapping === englishToRussian) {
currentMapping = englishToHebrew;
toggleLanguageButton.innerText = 'Toggle Language: Russian';
} else {
currentMapping = englishToRussian;
toggleLanguageButton.innerText = 'Toggle Language: Hebrew';
}
createButtons(currentMapping);
});
async function getRandomWikipediaText() {
const url = 'https://en.wikipedia.org/api/rest_v1/page/random/summary';
try {
const response = await fetch(url);
const data = await response.json();
const textarea = document.getElementById('textInput');
textarea.value = data.extract;
} catch (error) {
console.error('Error fetching random Wikipedia article:', error);
}
}
// Add an event listener to the "Get New Random Text" button
const randomTextButton = document.getElementById('randomTextButton');
randomTextButton.addEventListener('click', getRandomWikipediaText);
getRandomWikipediaText();
</script>
</body>
</html>