Restyling A Class Project

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!