Skip to content

Latest commit

 

History

History
209 lines (157 loc) · 8.31 KB

README.md

File metadata and controls

209 lines (157 loc) · 8.31 KB
Raw

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

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

halloween-word-graveyard

Links

My Inspiration

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

Author

Acknowledgments-Attributions