Hello, friends!
Or "Boo!", if you prefer. I'm a big fan of all things spooky in October, as you'll see. ๐ป๐๐ฎ
In the month since I posted, I finished my first big JavaScript project - a Guess the Word game which you can play by visiting this link!
The original styling that you can see in the rendition linked above was provided by Skillcrush, but I kind of want to play around with it and make it spooky!
In order to have a Guess the Word game, you first have to have a word for the user to guess! In the original, the list of possible words was provided by Skillcrush. I don't know what criteria they used for determining which words should appear on the list, but I want to use spooky words for my re-worked game. The original list has over 800 entries, but I settled on my own list of 100 spooky-adjacent words. (Some from the top of my head, some by way of thesaurus, some by way of popular Halloween song lyrics, etc.)
I could have just made the list of words an array that was hard-coded into the project, but I like the idea of being able to add to it or update it (even if I never do) by having a separate list to fetch using an API call.
Now that I have a list of spooky words, I want to use a spooky emoji or character to obfuscate the word. In the original, the simple, utilitarian "โ" is used. My original code snippet to hide the word is below:
const hideWord = function (word) {
const arrayWord = word.split("");
const hiddenWord = arrayWord.map(function (item) {
return `โ`;
})
wordInProgress.innerText = hiddenWord.join("");
};
I've refactored it a bit using some regex, and updated it to make it spooky!
const hideWord = function (word) {
const hiddenWord = word.replace(/[a-zA-Z]/g, "๐ป");
wordInProgress.innerText = hiddenWord;
};
I then added various emojis and updated some language in the responses in the JavaScript code.
The HTML file was pretty sparse, but I did also update the title and the "Play Again" button wording.
Then came the fun part - playing with the CSS! The original styling has super cute retro vibes, but they don't quite go with the spooky theme.
My first task was to find a spooky-ish font from Google Fonts - Creepster did the trick!
Because I'm using the ghost emoji to obfuscate the word, I was having a bit of difficulty getting the page to look good responsively. I hope I finally figured it out, though. It's the really long words that seemed to mess things up, so I may have replaced "superstition" and "otherworldly" in my word list, just in case. ๐
The hardest part was the logo. I considered just changing the colors of the original logo...
...but wanted to make something from scratch.
I didn't want anything too distracting, which meant some super fun CSS tricks weren't going to be the answer. I settled on a simple text gradient to highlight "Spooky" in the title.
I did so by wrapping "Spooky" in a span tag in the HTML, which had an undesired effect when I played the game. The JavaScript points to a span tag to update the number of guesses remaining, so it made things look a little silly after my first incorrect guess. Oops!
(You can see I also changed the color used in the gradient.)
So I went back to my JavaScript file and more precisely selected the remaining guesses span section from this:
const numGuesses = document.querySelector("span");
to this:
const numGuesses = document.querySelector(".remaining span");
Pretty straightforward fix once I realized what needed to be done. Which, admittedly, took a bit longer than I would have liked. A great learning experience!
Please feel free to play my Guess the Spooky Word Game. I wrote the list and still find it fun to try to figure out the words!
Have a great week!
Top comments (3)
This is fantastic!!! I love it! You should post this in the Show and Tell channel.๐
Hi Misty! The Spooky guess the word game is super cute! I love the ghosties.
Thank you! It was a lot of fun to do. My favorite part has been testing it on different browsers and seeing the difference in ghost emojis! ๐ป