CodeNewbie Community ๐ŸŒฑ

Cover image for Restyling A Class Project
Misty
Misty

Posted on

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("");
};
Enter fullscreen mode Exit fullscreen mode

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;
};
Enter fullscreen mode Exit fullscreen mode

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...

Retro styled logo for "Guess the Word"

...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.

Guess the Spooky Word title in purple, on orange background. The word Spooky is rendered in a gradient from white on top to purple on the bottom.

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!

A mobile screenshot from the game, showing the updated "7 guesses" in place of where the title should be, and "You have 8 remaining guesses" appears below, where "7 guesses" should have appeared.

(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");
Enter fullscreen mode Exit fullscreen mode

to this:

const numGuesses = document.querySelector(".remaining span");
Enter fullscreen mode Exit fullscreen mode

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)

Collapse
 
mckennabramble profile image
McKenna Bramble

Hi Misty! The Spooky guess the word game is super cute! I love the ghosties.

Collapse
 
mistydb profile image
Misty Author

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! ๐Ÿ‘ป

Collapse
 
twosavoie profile image
Lisa Savoie

his is fantastic!!! I love it! You should post this in the Show and Tell channel.๐ŸŽƒ