Halloween Word Guess

Dust off your dictionaries, welcome to the Halloween Word Graveyard!

This is a challenging word guess with a s p o o k y word list and theme!

Words are derived from a curated spooky word list node package created in part by github user melissamcewen.

Table of contents

• Overview
  • The challenge
  • Screenshot
  • Links
• My process
  • Built with
  • What I learned
  • Continued development
  • Useful resources
• Author
• Acknowledgments-Attributions

Overview

The challenge

Users should be able to:

• Input words
• Guess using click or pressing enter
• Receive an error message when the letter input form is submitted if:
  • The input field is empty
  • More than one letter was submitted
  • If the letter is not in the English alphabet
• Get into the Halloween Spirit
• Learn a new spooky word or two
• Create some undead words

Screenshot

Links

• Live Site URL: Halloween Word Graveyard Live site
• Github URL: Halloween Word Graveyard Github Repo

My Inspiration

• Halloween!
• Creepy styling
• I was inspired by Kevin Powell's glitch screen for creepy loading
• I wanted to get a lil more js practice and API practice.
• Replacing ES5 JS with ES6!
• Creating a voice with the responses

My process

- Convert ES5 to ES6

- Spooky design

• changed background colors
• added video background and gradient from inspiration

- Update the font styles

- Configure an API async function using the spooky-words github page

• Go to spooky words github
• get the url for the different word lists
• create API (maybe)
• can there be more than 1 async/await?
  • If yes:
    • create an array with the list
    • add the arraies together to get a big list
    • use that pool
  • if no:
    • maybe different pages for each list?

- Add second span class in index

• Update the js to hide and add the span classes as needed
  • Second class should follow the same rules as remainingWordsSpan for the big change events
  • Otherwise it doesn't have to be tooled with
• I thought there would be a more elegant way to select 2+ elements with the same class? But in the time I had I couldn't figure out the issue and made a third class for the remaining paragraph.

- Update text responses

Partly Shelved / Sheleved for v2

- Functionality

• have answer reveled in both graveyard and message area
• hide text input area and message
• Now that I've added the lists together, I want to add the option to choose either word length or word list?
  • HTML option menu
  • it would open and hide when not active
  • wait for user input to do something
    • if user choses 8 letters then change word.length
    • users choses "teams" then tie response to getTeamsData and remove others from wordArray

- Add a "splash screen / loading screen"

• rewatch kevin powell CSS glitch screen
• find resource on delay loading
• how could i have it done just once tho and not every time? - on first visit load screen?

Built with

• Semantic HTML5 markup
• CSS custom properties
• CSS Library
• Flexbox
• JS
• APIs

What I learned

A ton but I'll try to keep it one for each language.

• HTML video background hero

  • I think I would have tried to wrap the whole video around the content. Instead of creating a hero section.

• CSS

  • Reduced motion blur and button accessibility. I also wonder how the coffins will be read on screen readers.

• JS

  • The huge async function is my proudest moment.

  code snippets

<!-- not wrapping the video tag is a win -->
<div class="hero">
      <video class="video-bg" autoplay muted loop src="video/hero-video.mp4" type="video/mp4"></video>
      .
      .
      .
 </div>     

/*so overused in this case but I think it adds to the eerieness. It wins CSS' MVP*/
text-shadow: 2px 4px 8px var(--l-orange);

// SO glad this even worked. I'm curious about wrapping the package up and doing some backend work
Promise.all([ 
  (async () => {
    ... 
   }
  ]);

Continued development

• I think I could make this into a react app where the words update automatically after hitting play again? Without a page refresh?
• Add some way to change the list users are playing from would be cool
• And max number of words option
• Max number of guesses
• Reveal a random letter hint
• Interested in added a dripping goo load animation.
  • was thinking of doing sometihng like this:
    • Add Full Screen Video foreground while window is loading with this Drippy Drip Animation Video
• Ghost Agency - Change button to this shape or something similar
• Would love to figure out how to reveal the letters from under the coffin. I tried:

const revealWordEnding = [];
   for (const letter of upperWord) {
        revealWordEnding.push(letter.toUpperCase());
        // console.log(revealWordEnding);
      }
    wordIP.innerText = revealWordEnding.join("");

but I can't understand how to remove the coffins. When I run the included log, they don't show in the array.

Useful resources

• Elementor Halloween Web Design - Def liked the assets and the video background idea!
• How to create a background video | HTML & CSS tutorial - Was also made aware of reduced motion
• Promise.all() - Helped me understand the multiple awaits in async function.
• How to handle multiple awaits in async function - I modeled the awaits after this function.
• How to make your fancy SVG button accessible - Didn't use it, but I thought it'd be helpful if I wanted to make a custom shape button
• Emoji Favicons > coffin - emoji favicon maker
• CSS Shake - Hover shake animation
• An Introduction to the Reduced Motion Media Query - Unfortunately, I wasn't able to figure out how to turn off the shake feature for reduced motion users. I left the code in however, in case someone gets it. I def wanted to include this resource as a future reminder.
• Other background options I considered
  • Option 1 Purple & Black
  • Opt 2 Orange & Black
  • Opt 3 Grey & Black Pumpkins
  • Opt 4 Cat eyes

Author

• Github - @sadiejay

Acknowledgments-Attributions

• Spooky Words npm package

• Color Scheme

• Rain Background

• Virtual Coffee Member Taiwo - Piqued my interested in backend dev and creating API's from node packages :eyes-emoji:

• Skillcrush - Helping me build the skeleton of the project :)