-
Notifications
You must be signed in to change notification settings - Fork 791
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
updated the script.js file - removed the deprecated functions and opt…
…imized the code
- Loading branch information
1 parent
0f3b4eb
commit 9e606a6
Showing
1 changed file
with
40 additions
and
88 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -1,131 +1,83 @@ | ||
document.addEventListener('DOMContentLoaded', function () { | ||
|
||
// Declaring stuff | ||
myName = ""; // declaring a variable for my easter egg | ||
audioPlayer = document.getElementsByTagName('audio')[0]; | ||
let myName = ""; // declaring a variable for my easter egg | ||
const audioPlayer = document.querySelector('audio'); | ||
|
||
// ------ Functions ------ | ||
|
||
// Getting the letter sound and playing it. | ||
function setLetterSound(letterVariable) { | ||
var mp3Source = document.getElementById('mp3Source'); | ||
var oggSource = document.getElementById('oggSource'); | ||
mp3Source.src = 'sounds/mp3/' + letterVariable + '.mp3'; | ||
oggSource.src = 'sounds/ogg/' + letterVariable + '.ogg'; | ||
audioPlayer.src = `sounds/mp3/${letterVariable}.mp3`; | ||
} | ||
|
||
function setGenericSound() { | ||
var mp3Source = document.getElementById('mp3Source'); | ||
var oggSource = document.getElementById('oggSource'); | ||
mp3Source.src = 'sounds/mp3/like-glass.mp3'; | ||
oggSource.src = 'sounds/ogg/like-glass.ogg'; | ||
audioPlayer.src = 'sounds/mp3/like-glass.mp3'; | ||
} | ||
|
||
// Generating a new element to restart the CSS3 animation. | ||
function generateNewElement() { | ||
var elm = document.getElementById('big-char'); | ||
var newone = elm.cloneNode(true); | ||
const elm = document.getElementById('big-char'); | ||
const newone = elm.cloneNode(true); | ||
elm.parentNode.replaceChild(newone, elm); | ||
} | ||
|
||
// Running the HTML5 audio player | ||
function runAudioPlayer() { | ||
audioPlayer.load(); // pre loading the audi file | ||
// audioPlayer.currentTime = 0; // start the audio from the beginning | ||
audioPlayer.load(); // pre loading the audio file | ||
audioPlayer.play(); // play the audio | ||
} | ||
|
||
// Show and hide the about | ||
document.getElementById('hide-button').onclick = function () { | ||
document.getElementById('hide-button').addEventListener('click', function () { | ||
document.getElementById('about-cont').style.display = "none"; | ||
} | ||
document.getElementById('about-button').onclick = function () { | ||
}); | ||
|
||
document.getElementById('about-button').addEventListener('click', 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('show-keyboard-button').addEventListener('click', function () { | ||
document.getElementById('mobile-text-input').focus(); | ||
} | ||
}); | ||
|
||
document.addEventListener('keypress', function (event) { // Do stuff when you press any key in the document | ||
|
||
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"; | ||
} else if (event.charCode === 32) { | ||
letterOnScreen.innerHTML = "Space"; | ||
} else { | ||
letterOnScreen.innerHTML = String.fromCharCode(event.charCode); | ||
} | ||
const letterOnScreen = document.getElementById('big-char'); // get the element properties | ||
console.log(event.key); | ||
if (!/^[a-zA-Z0-9]$/.test(event.key)) { | ||
const specialChars = { | ||
'13': 'Enter', | ||
'32': 'Space', | ||
}; | ||
const specialChar = specialChars[event.keyCode] || event.key; | ||
letterOnScreen.innerHTML = specialChar; | ||
setGenericSound(); // Set the generic sound in the resources of the audio tag | ||
runAudioPlayer(); // Play sound | ||
generateNewElement(); // Generate new DOM element to restart the animation | ||
} 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 (lower case because the sound files are in lower case). | ||
letterOnScreen.innerHTML = event.key; | ||
const pressedLetter = event.key.toLowerCase(); // passing the pressed letter to the function to add it to sources (lower case because the sound files are in lower case). | ||
setLetterSound(pressedLetter); | ||
runAudioPlayer(); // Play sound | ||
generateNewElement(); // Generate new DOM element to restart the animation | ||
} | ||
|
||
runAudioPlayer(); // Play sound | ||
generateNewElement(); // Generate new DOM element to restart the animation | ||
|
||
// An easter egg, if you type my name | ||
myName += String.fromCharCode(event.charCode); | ||
myName += event.key; | ||
console.log(myName); | ||
if (myName === "avdhesh") { | ||
if (myName.toLowerCase() === "avdhesh") { | ||
alert('You typed my name!\n--------------------------------\nNow I will show you my website.'); | ||
window.open('https://avdhesh-portfolio.netlify.app/', '_blank'); | ||
} | ||
|
||
} | ||
|
||
}); | ||
|
||
// Mute button | ||
document.getElementById('mute-button').onclick = function () { | ||
if (audioPlayer.muted === false) { | ||
audioPlayer.muted = true; | ||
document.getElementById('mute-button').innerHTML = "Unmute Sounds"; | ||
console.log('sound muted'); | ||
} else { | ||
audioPlayer.muted = false; | ||
document.getElementById('mute-button').innerHTML = "Mute Sounds"; | ||
} | ||
} | ||
document.getElementById('mute-button').addEventListener('click', function () { | ||
audioPlayer.muted = !audioPlayer.muted; | ||
document.getElementById('mute-button').innerHTML = audioPlayer.muted ? "Unmute Sounds" : "Mute Sounds"; | ||
console.log('Sound ' + (audioPlayer.muted ? 'muted' : 'unmuted')); | ||
}); | ||
|
||
}); | ||
}); |