The first project I released post-bootcamp was the Visual ITU alphabet. Created by the International Telecommunications Union (ITU) in 1926, amateur (ham) radio operators use the ITU alphabet to communicate their FCC radio call signs and other information. I always had a tough time remembering the word that was associated to the letter and wanted to create a site that would unite the word and a visual symbol to aid in memorization.
While I included arrows for left and right navigation through the alphabet, I wanted to allow a user to be able to change the letter directly. I didn't want the input to look like a form right away; I wanted the user to click the letter and be given an input box. This was probably the easy part of the feature to implement, since I elected to have the elements available to be displayed or hidden as needed.
document.getElementById('display-letter').addEventListener('click', () => {
changeDisplayLetter()
})
const changeDisplayLetter = () => {
displayLetter.classList.add("hidden")
changeLetter.classList.remove("hidden")
changeLetterInput.placeholder = currentLetter.letter
changeLetterInput.focus()
changeLetterInput.select()
}
The tricky part that gave me trouble was how to accept the input given since I was not styling this as a form with a Submit
button. It's pretty common to hit the Enter
key when you fill in a form, so that was the first implementation I completed. While working on this code, I found that you can now use event.key
where I had previously learned event.keyCode
.
changeLetterInput.addEventListener('keyup', (event) => {
const keyPressed = event.key
if (keyPressed === 'Enter') {
updateDisplayLetter(event)
}
})
I realized that it also quite common to "click out" of an input field and expect that input to have an effect on the page. I really wanted focusout
to be the answer, but it never fired in my testing. I realized that simply clicking away wasn't quite the same action. I started to work with blur
instead and it seemed to work great!
changeLetterInput.addEventListener('blur',(event) => {
updateDisplayLetter(event)
})
Things were working well with the display changing content except that my input box was showing the previous letter choice, in lowercase if I entered it that way, when I clicked again to change the letter. No problem, I'll just clear out the input box once the letter has been entered and looked up in the object containing all the letters. But this code below kept throwing errors in the console:
changeLetter.classList.add("hidden")
displayLetter.classList.remove("hidden")
displayAlpha()
changeLetterInput.value = ""
I added some strategic console.log
statements and some breakpoints to debug. I realized that when I clicked out of the input box, the blur
event was being called a second time. The letter variable wasn't filled in, since there was no change occurring, and an error was thrown. By checking whether I had already added the hidden
class back into <div>
that contained the input element, I stopped the second check from occurring and provided a smoother experience for the user.
changeLetterInput.addEventListener('blur',(event) => {
// invoke only if the blur occurs when the input is display
if (!changeLetter.classList.contains("hidden")) {
updateDisplayLetter(event)
}
})
I had created a separate branch for this feature, so I also had the opportunity to create a pull request in GitHub to merge this new code for Netlify to build out to the live site. This feature makes it much easier to go to the letter you can't remember, or to spell things out for yourself. Give it a try!!
https://visual-itu.netlify.app/
I really enjoyed the process of investigating JavaScript events, working through an issue, creating a pull request and publishing a new working feature to my application. There are a few more defined features I am looking forward to implementing soon!
Top comments (0)