Wordle Challenge Attempt
View app
View GitHub repository
Wordle is an online game in which the player is given six attempts to uncover a secret, correct word, which is usually five letters long (but may be longer or less in other iterations). The screenshot above shows my own attempt at the New York Times version of the game, with one remaining chance to spare. The player wins if they guess the correct word. I had never played Wordle before when attempting to construct my own basic version of the game.
Colour code:
- Grey: Inputted letter does not feature in correct word
- Yellowish tinge: Inputted letter does feature in correct word, but not at the same position in word
- Green: Inputted letter features in correct word, and at the correct position in word
I set up the lettersquares and keyboard in the HTML (I could’ve used the QWERTY system, as the NYT version does, but settled on an alphabetic keyboard). Each keyboard letter is stored in the same variable, keys, first of all. An iteration through the keys variable gets the individual inputted letter, stored in the variable letter, plus discerns if the user has pressed Enter or Delete, both of which trigger appropriate functions. The updateGuessedWords function is also triggered, which increments the number of times the user attempts to uncover the correct word (in this version, it will only be once, but in professional versions such as the NYT‘s, it would be six).
Meanwhile, I set the correct, secret word as ‘raise’, in a variable called correctWord.
The functions that are the most important here are the handleSubmittedWord and checkLetter functions.
handleSubmittedWord:
If the user clicks enter, this triggers the handleSubmittedWord function. The function takes the current array of the inputted letters and stores it in a variable called currentWordArr. The join method is then used on this variable to convert it to a string, deleting any separators like commas along the way, and the result is stored in a variable called currentWord. A forEach method then iterates over each index element of the currentWordArr, which triggers a callback function that in turn triggers the checkLetter function on every letter of the submitted word. Meanwhile, the ID of each specific letter in the submitted word is stored in a variable called letterElement, which is then used to trigger the visual colour effect on each lettersquare, connected to the checkLetter function, and via asynchronous JS. If the currentWordArr‘s length is less than five letters and the user clicks Submit, a message tells them that the answer must be five letters. If the user guesses all the correct letters in the correct position, currentWord === correctWord, and a congratulations message appears.
checkLetter:
The checkLetter function takes two parameters, the aforementioned letter and the index point of each of those letters in the submitted word. The includes method, which determines whether a given value includes a certain value among the value’s elements, is used on the correctWord variable to test if that variable includes the letter parameter, and is converted to the variable isCorrectLetter, which now returns a Boolean (which the includes method is). If isCorrectLetter as a Boolean returns false, that means that no matches are found between the inputted letter and the letters of the correct word; this then triggers the grey colour mentioned above via return “rgb(58,58,60)”. However, black text on grey is hard to read, so I had to set up a for loop on each value – each letter – so as to iterate through each value and apply a white colour to the font. This turned out to be tricky, as the last letter in grey would not feature in white, so the way to do it was to set up an array called finalWordArray, which contains the numerical values of each letter in a submitted word, and iterated through it.
Meanwhile, if the inputted letter does feature in the correct word, whether or not in the correct position, the above is skipped, and the function instead takes the correctWord variable and returns the respective letter of each numeric point in the correct word (e.g. ‘r’ for 1, ‘a’ for 2, etc.) via the charAt method. The charAt method does this by taking the index point of each letter in correctWord as a parameter. This is then stored in a variable called letterInPosition. The letter parameter (the inputted letter) is then tested against this variable using strict equality, and if it is equal – that is, if the inputted letter matches the correct letter in the correct position in the correct word – it’s stored in a Boolean variable called ifLetterFeaturesInCorrectWord. If ifLetterFeaturesInCorrectWord returns true, the colour green is unleashed via return “rgb(83,141,78)”, denoting success. If ifLetterFeaturesInCorrectWord returns false, the yellowish tinge is unleashed via return “rgb(181,159,59)”, denoting that the inputted letter does feature in the correct word, but not in the correct position.
Project pseudocode:
