If you have ever had the pleasure of playing the New York Times' Spelling Bee game, you know what it's like to stare intently at seven random letters and wrack your brain for the perfect pangram, a word that uses each letter at least once.
But while the Spelling Bee app is elegantly designed, it limits users to a single daily puzzle - not enough for most word game addicts. So, I applied my elementary understanding of Javascript to build a Pangram Cracker of my own. Here's what I learned.
Creating a data set
Without access to the New York Times' dataset of Spelling Bee puzzles, I knew my first step would be to spend some time with a dictionary and generate an array of puzzle objects.
Each puzzle object would need an id, name, list of valid answers, list of valid pangrams, and a challenge letter that would render in the middle of the screen:
(some valids not included to keep this puzzle object readable)
Adding Event Listeners
For users to be able to submit answers and choose a different puzzle, I knew I would need two Event Listeners, one for a submit event (Submit button) and one for a click event (New Puzzle button).
As per MDN, the addEventListener() method "sets up a function that will be called whenever the specified event is delivered to the target." For the New Puzzle button, I set up an anonymous function that would reassign the value of currentPuzzle and render it to the screen:
For the Submit button, I knew I would need some way of checking the submitted answer against the list of valid answers. Time to call on the .forEach() method.
Iterating over an array using .forEach()
The .forEach() method executes a provided function once for each element in an array (thanks again, MDN). This method allowed me to check a submitted answer against each valid answer, and if there was a match, update the user's score and add the answer to the Answer List.
Iterating over an array using .every()
In addition to checking for valid answers, I also wanted to check for pangrams and to return an alert if the submitted answer failed both checks. The .every() method tests whether all elements in the array pass the test implemented by the provided function and returns a Boolean value (true or false).
Non-technical Takeaways
OK, so I got the app working and learned a few Javascript methods in the process. Great! But the truth is, I built this app a few weeks ago, when Javascript was the only language I knew. Since then, I have learned more methods, dabbled with React, and come to realize how much more dynamic and user-friendly the app could be. So what?
My first non-technical takeaway is to use the tools available to you. There is an adage in creative writing that says "write what you know". I think the same applies to software development. There are many languages with which to build a simple word-game app, and many methods within those languages to employ. Don't be paralyzed by your suspicions that there is a DRYer, more performant, more elegant way to solve the problem in front of you. In hindsight, I might have benefited from using the .includes() method, ternary operators instead of if...else statements, or even building the app in an entirely different language. By all means, search for solutions outside your comfort zone, but don't be afraid to just start with what you know.
My second non-technical takeaway is to leverage your interests as motivational fuel. All projects involve getting stuck and figuring out how to get un-stuck. If you have the freedom to choose what you are building, choose something that you are naturally interested in (like word games, for me). It might just give you the motivation you need to blast through roadblocks and learn something.
Top comments (0)