Guess the keys
February 5th, 2018
keypress event that might end up being reused one day in a bigger project.
There was a lot more going on under the hood than meets the eye, and I learned a
new thing or two in the process. So I thought it was time to write another post!
I was inspired to create this game by a
keypress workshop we did in my
it’s already 4 weeks!). I wanted to take it to the next level. I firmly believe,
and I am not at all unique, that it is important to push oneself to create, and
more important, create new things applying what one has learned. It’s the only
way to truly understand the subject matter, AND to make it stick. Practice
makes a better programmer definitely applies. Sometimes I can’t think of what
I should create next, so using our workshops as base inspirations definitely
empty to break the code up, and much of which is CSS in JS. Then there is the
input validation. There
are two parts to the game.
The first part is to guess the keys you should press in order that a
phrase from a song appears in a colored box with a dashed border above the text
Answer. This can be achieved two ways. You can either press keys over the
document (browser window) to make the colored box with phrases from songs
appear, or you can type directly into the input field.
The second part consists of rendering
Your input is correct! above
Answer, and replacing
You guessed correctly. It is ...! There are only a certain number of
song phrases, and each corresponds to a certain
keypresses are equivalent to a string that makes up a name or
word. If you correctly type that sequence into the input field and press
return, you will receive a message letting you know that you guessed correctly
followed by the answer. In addition, after you press
input field is disabled, and you can no longer type into it. You can
keep on typing into the input with incorrect characters after inputting the
correct string, but nothing happens. When you think you have the right answer,
make sure to press the
If you type the correct
keypresses or sequence of
to the document, you will render the
song phrases to the page.
However, when you press the
return key, you will receive the
Wrong input. Try again! in the colored box, and
Answer will be replaced with the error message
You guessed incorrectly. Try again!.
How I achieved this game via
five important highlights.
input.valuecondition not equal to the answer.
else statement/conditionnot equal to the answer.
input.value conditionnot equal to the answer to the
input.value conditionequal to answer in
page refresh codeto
click eventfor button.
At first I didn’t add an
input value condition to the
keypress listener. So I had all these conditions for the k
and then an
else statement which simply returned the error message
Wrong input. Try again!, but no condition against the correct answer
which is supposed to be typed into the
input. So I added another
else if condition after the first
if and subsequent
else if conditions for the individual
keypresses associated with
the songs that checked against an
incorrect input value which would
result in the error message
Wrong input. Try again! rendered
to the colored box, and the error message
You guessed incorrectly. Try again! that replaces the text
else if statement is then followed by the final
else statement which returns the confirmation messages
Your input is correct! and
You guessed correctly. It is ...! I added a
disabled.true property to the
input if the answer is
correct and the user
presses return after
This is so that no
incorrect characters can be rendered to the
colored box after the correct answer has been
inputted and the
return key has been pressed. Lastly, I had to add a way to
refresh the page so that
disabled.true is erased and the
user can type in the
input field again.
I didn’t share code here on purpose because that would spoil the game for you! Please do check it out on Github, and give it a whirl! And let me know what you think!