-
Notifications
You must be signed in to change notification settings - Fork 0
/
script.js
executable file
·183 lines (158 loc) · 6.82 KB
/
script.js
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
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
const alphabet = {"`":"a0","1":"a1","2":"a2","3":"a3","4":"a4","5":"a5","6":"a6","7":"a7","8":"as0","9":"as1","0":"as2","-":"as3","=":"as4","q":"as5","w":"as6","e":"as7","r":"b0","t":"b1","y":"b2","u":"b3","i":"b4","o":"b5","p":"b6","[":"b7","]":"c1",'\\':"c2","a":"c3","s":"c4","d":"c5","f":"c6","g":"c7","h":"c8","j":"cs1","k":"cs2","l":"cs3",";":"cs4","\'":"cs5","z":"cs6","x":"cs7","c":"d1","v":"d2","b":"d3","n":"d4","m":"d5",",":"d6",".":"d7","/":"ds1","|":"ds2","Q":"ds3","W":"ds4","E":"ds5","R":"ds6","T":"ds7","Y":"e1","U":"e2","I":"e3","O":"e4","P":"e5","A":"e6","S":"e7","D":"f1","F":"f2","G":"f3","H":"f4","J":"f5","K":"f6","L":"f7","Z":"fs1","X":"fs2","C":"fs3","V":"fs4","B":"fs5","N":"fs6","M":"fs7","~":"g1","!":"g2","@":"g3","#":"g4","$":"g5","%":"g6","^":"g7","&":"gs1","*":"gs2","(":"gs3",")":"gs4","_":"gs5","+":"gs6","{":"gs7"}
function row(i, c) {
const r = alphabet[c] || c
return '<tr><th scope="row">' + i + '</th><td>' + c + '</td><td>' + r + '</td></tr>'
// setLetterSound(c);
// runAudioPlayer(); // Play sound
// generateNewElement(); // Generate new DOM element to restart the animation
}
function changeEventHandler(event) {
const tbody = document.getElementsByTagName('tbody')[0]
tbody.innerHTML = ''
for (let i = 0, l = event.target.value.length; i < l; i++) {
tbody.innerHTML += row(i+1, event.target.value[i])
}
}
function loadEventHandler() {
document.getElementsByTagName('input')[0].oninput = changeEventHandler
}
// https://plainjs.com/javascript/events/running-code-when-the-document-is-ready-15/
if (document.readyState !== 'loading') loadEventHandler()
else if (document.addEventListener) document.addEventListener('DOMContentLoaded', loadEventHandler)
// Declaring stuff
myName = ""; // declaring a variable for my easter egg
// audioPlayer = document.getElementsByTagName('audio')[0];
// ------ Functions ------
// Getting the letter sound and playing it.
function setLetterSound(letterVariable) {
var mp3Source = document.getElementById(letterVariable);
console.log(mp3Source);
console.log(mp3Source.src);
audioPlayer = document.getElementById(letterVariable);
console.log(audioPlayer);
// var oggSource = document.getElementById('oggSource');
// mp3Source.src = 'soundsiv/' + letterVariable +'.mp3';
// oggSource.src = 'soundsiv/' + letterVariable +'.ogg';
}
function setGenericSound() {
var mp3Source = document.getElementById('like-glass');
// var oggSource = document.getElementById('oggSource');
// mp3Source.src = 'soundsiv/like-glass.mp3';
// oggSource.src = 'soundsiv/like-glass.ogg';
}
// Generating a new element to restart the CSS3 animation.
function generateNewElement() {
var elm = document.getElementById('big-char');
var newone = elm.cloneNode(true);
elm.parentNode.replaceChild(newone, elm);
}
// Running the HTML5 audio player
function runAudioPlayer() {
audioPlayer.pause();
// alert('done');
audioPlayer.load(); // pre loading the audi file
// audioPlayer.currentTime = 0; // start the audio from the beginning
audioPlayer.play(); // play the audio
}
// Show and hide the about
// document.getElementById('hide-button').onclick = function() {
// document.getElementById('about-cont').style.display = "none";
// }
/*
document.getElementById('about-button').onclick = function() {
document.getElementById('about-cont').style.display = "block";
}
*/
// On mobile, when the user taps on "Show Keyboard" move the focus to the hidden input
/*
document.getElementById('show-keyboard-button').onclick = function() {
document.getElementById('mobile-text-input').focus();
}
*/
document.onkeypress = function(event){ // Do stuff when you press any key in the document
letterOnScreen = document.getElementById('big-char'); // get the element properties
console.log(event.charCode);
if ( // if use pressed on any of these characters which are not numbers or letters
event.charCode === 13||
event.charCode === 32||
event.charCode === 92||
event.charCode === 96||
event.charCode === 61||
event.charCode === 43||
event.charCode === 45||
event.charCode === 33||
event.charCode === 64||
event.charCode === 35||
event.charCode === 36||
event.charCode === 37||
event.charCode === 94||
event.charCode === 38||
event.charCode === 42||
event.charCode === 40||
event.charCode === 41||
event.charCode === 95||
event.charCode === 91||
event.charCode === 93||
event.charCode === 34||
event.charCode === 39||
event.charCode === 47||
event.charCode === 63||
event.charCode === 62||
event.charCode === 44||
event.charCode === 60||
event.charCode === 46||
event.charCode === 59||
event.charCode === 58||
event.charCode === 123||
event.charCode === 124||
event.charCode === 125||
event.charCode === 126
) {
if (event.charCode === 13) { // getting the Enter key
// letterOnScreen.innerHTML = "Enter";
changeEventHandler(event);
// alert('hi');
} else if (event.charCode === 32) {
// changeEventHandler(event);
// letterOnScreen.innerHTML = "Space";
} else {
letterOnScreen.innerHTML = String.fromCharCode(event.charCode);
}
setLetterSound(event.charCode); // Set the generic sound in the resources of the audio tag
runAudioPlayer(); // Play sound
// generateNewElement(); // Generate new DOM element to restart the animation
changeEventHandler(event);
} else {
// letterOnScreen.innerHTML = String.fromCharCode(event.charCode); // getting the pressed character
// pressedLetter = String.fromCharCode(event.charCode).toLowerCase(); // passing the pressed letter to the function to add it to sources
setLetterSound(event.charCode);
runAudioPlayer(); // Play sound
// generateNewElement(); // Generate new DOM element to restart the animation
changeEventHandler(event);
}
/*
// An easter egg, if you type my name
myName += String.fromCharCode(event.charCode);
console.log(myName);
if (myName==="mahdi") {
alert('You typed my name!\n--------------------------------\nNow I will show you my website.');
window.open('http://mahdif.com','_blank');
}
*/
}
/*
// Mute button
document.getElementById('mute-button').onclick = function() {
if (audioPlayer.muted === false) {
audioPlayer.muted = true;
document.getElementById('mute-button').innerHTML = "Unmute Sounds";
} else {
audioPlayer.muted = false;
document.getElementById('mute-button').innerHTML = "Mute Sounds";
}
}
*/
//load page with cursor in input field (focus)
$(document).ready(function(){
document.getElementById("big-char").focus();
});