![Cover image for Commit8 //JavaScript Fundamentals [Guess the Word Game]](https://community.codenewbie.org/images/Uix5jmZclnHJZmvS_F2WYWXB-up93JDgNk1b0FhuTx0/rs:fill:1000:420/g:sm/mb:500000/ar:1/aHR0cHM6Ly9jb21t/dW5pdHkuY29kZW5l/d2JpZS5vcmcvcmVt/b3RlaW1hZ2VzL3Vw/bG9hZHMvYXJ0aWNs/ZXMvaGU2dHM2MWRx/OXEycTk4YXUzNXAu/anBn)
Picture of Guess the Word Game
I am learning with Skillcrush. Please check them out and consider signing up if you're looking to break into tech! Receive $250 off your course by using the link above. Use the coupon code: TWIXMIXY
NOTE: this discount is for Break Into Tech + Get Hired package exclusively. It's the same program I am participating in!
Now we move on to working on a project! This will be a bit more difficult to blog, from my perspective, because it's more about practice and not learning terms and functionality.
I still mostly struggle with interpreting the instructions to exactly what I should type. Mostly I am able to get the gist of it and use my user guides to find solutions that work for me.
Select Elements & Add Placeholders
For the first section, we declared a lot of variables tied back to the HTML, so we can manipulate those aspects of the website going forward.
We also wrote a function for the placeholders for where the letters will go.
Finally we created an event listener for the button, so we can begin inputting letters.
// The unordered list where the player’s guessed letters will appear
const letters = document.querySelector(".guessed-letters");
// The button with the text “Guess!” in it
const guessButton = document.querySelector(".guess");
// The text input where the player will guess a letter
const guessLetter = document.querySelector(".letter");
// The empty paragraph where the word in progress will appear
const wordProgress = document.querySelector(".word-in-progress");
// The paragraph where the remaining guesses will display
const remainingGuesses = document.querySelector(".remaining");
// The span inside the paragraph where the remaining guesses will display
const remainingGuessesSpan = document.querySelector(".remaining span");
// The empty paragraph where messages will appear when the player guesses a letter
const messages = document.querySelector(".message");
// The hidden button that will appear prompting the player to play again
const hiddenButton = document.querySelector(".play-again hide");
const word = "magnolia";
// console.log(word);
// Display symbole as placeholder for the letters
const updateWIP = function (word) {
const updateWIPLetters = [];
for (const letter of word) {
console.log(letter);
updateWIPLetters.push("●");
}
wordProgress.innerText = updateWIPLetters.join("");
}
updateWIP(word);
guessButton.addEventListener("click", function (e) {
e.preventDefault();
const guess = guessLetter.value;
console.log(guess);
letterInput.value = "";
});
Accept & Validate Player Guesses
I couldn't get it to function at first, so I went through the code line by line compared to the solution code to fix it. I also ended up switching all of my variable names to what the solution code had, so it would be easier to debug.
Now it is actively catching the array letters! I'm not sure if I was just missing a ; or if updating my variables to match fixed it. I also may have just needed to clear my console before proceeding.
New things learned:
const acceptedLetter = /[a-zA-Z]/, so that we can validate a letter is being inputted. We will had to write code to make sure numbers or more than one character wasn't accepted.
.match(), so that we could make sure the input matched the criteria.
// The unordered list where the player’s guessed letters will appear
const guessedLettersElement = document.querySelector(".guessed-letters");
// The button with the text “Guess!” in it
const guessLetterButton = document.querySelector(".guess");
// The text input where the player will guess a letter
const letterInput = document.querySelector(".letter");
// The empty paragraph where the word in progress will appear
const wordInProgress = document.querySelector(".word-in-progress");
// The paragraph where the remaining guesses will display
const remainingGuessesElement = document.querySelector(".remaining");
// The span inside the paragraph where the remaining guesses will display
const remainingGuessesSpan = document.querySelector(".remaining span");
// The empty paragraph where messages will appear when the player guesses a letter
const message = document.querySelector(".message");
// The hidden button that will appear prompting the player to play again
const playAgainButton = document.querySelector(".play-again");
const word = "magnolia";
const guessedLetters = [];
// console.log(word);
// Display symbole as placeholder for the letters
const placeholder = function (word) {
const placeholderLetters = [];
for (const letter of word) {
console.log(letter);
placeholderLetters.push("●");
}
wordInProgress.innerText = placeholderLetters.join("");
}
placeholder(word);
guessLetterButton.addEventListener("click", function (e) {
e.preventDefault();
// empty message element
message.innerText = "";
// grabbing what was entered in the input
const guess = letterInput.value;
// make sure that it is a single letter
const goodGuess = validateInput(guess);
// console.log(goodGuess);
if (goodGuess) {
makeGuess(guess);
}
letterInput.value = "";
});
const validateInput = function (input) {
// this is to make sure the player inputs a letter and no other special characters
const acceptedLetter = /[a-zA-Z]/;
if (input.length === 0) {
// Is the input empty?
message.innerText = "Please enter a letter.";
} else if (input.length > 1) {
// Did you type more than one letter?
message.innerText = "Please enter a single letter.";
} else if (!input.match(acceptedLetter)) {
// Did you type a number or special character?
message.innerText = "Please enter a letter from the alphabet."
} else {
// We finally got a single letter, yay!
return input;
}
};
const makeGuess = function (guess) {
guess = guess.toUpperCase();
if (guessedLetters.includes(guess)) {
message.innerText = "You already guessed that letter. Try again!";
} else {
guessedLetters.push(guess);
console.log(guessedLetters);
}
};
Display Word & Guessed Letters
I was able to write out some of the code on my own, but am still heavily relying on the solution code. Again I think I just need to keep on practicing and potentially return to some of my older lessons to better get this understanding under my belt.
New things learned:
const wordArray = wordUpper.split("");, this is to split the letters into a string array so they can be displayed as letters already guessed
wordInProgress.innerText = revealWord.join("");, this is to join the letters together where the word in progress appears
const updateWordInProgress = function (guessedLetters) {
const wordUpper = word.toUpperCase();
const wordArray = wordUpper.split("");
// console.log(wordArray);
const revealWord = [];
for (const letter of wordArray) {
if (guessedLetters.includes(letter)) {
revealWord.push(letter.toUpperCase());
} else {
revealWord.push("●");
}
}
// console.log(revealWord);
wordInProgress.innerText = revealWord.join("");
checkIfWin();
};
const checkIfWin = function () {
if (word.toUpperCase() === wordInProgress.innerText) {
message.classList.add("win");
message.innerHTML = `<p class="highlight">You guessed the correct word! Congrats!</p>`;
}
}
A lot more aspects are functional now. Time to wrap this up and have some fun!
Fetch Words & Remaining Guesses
New things learned:
const wordArray = words.split("\n"); - the "\n" is for a line break, if I recall correctly.
trim() - is to remove any extra whitespace around the word
Basically this step was connecting the API to the game, so that we had more than one word available for playing!
Play It Again!
This last step was all about making it so the user could play the game again without having to refresh the screen.
Once I got the hang of it I added a couple components that I wanted to hide/reset once the game was over.
I found that the user could still enter in letters technically after the game was over, even though the "Play Again" button was presented. So I made it so that the form input fields were hidden completely and then reset once the button was clicked.
GitHub Repo for Guess the Word Game
Go ahead and check it out. Let me know what you think!
You play the game live here: www.twixmixy.com/guess-the-word-main/
I put my back out this week weight lifting on Monday, so it took me longer to wrap this up than what I wanted to. Taking measures to rest and make sure I heal up before getting back in the gym and on skates. Which will also mean that I'm not on my computer as much.
Thanks for checking out my work. If you have any thoughts, I'd love to hear from you. Comment below!
Top comments (0)