guess-the-word

Guess The Word Game

Solution | Challenge

Deploy status

Overview

This challenge is great to advance your JavaScript skills. The challenge is to create a small game that tests your data management and DOM manipulation with JavaScript.

User Stories

• Create a guess the word game that matches the given design.
• Use HTML to create the basic structure.
• Use Vanilla JavaScript to add interactivity.
• Users can see a random scrambled word when the page is first loaded or after users click the random button.
• Users can enter one letter at a time. After each attempt, the input should automatically focus on the next input if it exists.
• Users can see the number of wrong answers (tries) and which answers are wrong (mistakes).
• Users can regenerate a new scrambled word by selecting the random button.
• Users can reset all inputs, mistakes, and tries by selecting the reset button.
• When the number of tries or mistakes reaches 6, the game should be reset.
• When the user completes the game, it should show a '🎉 Success' alert.
• The page should be responsive on different screen sizes.
• Deploy the solution and submit Repository URL and Demo URL.

Built With

• Vite
• BEM and CUBE CSS
• @hrc/input markup and styles:
  • Label
  • Radio
  • RadioGroup
• @hrc/spinner markup and styles:
  • SpinnerBase
  • RingSpinner
  • EllipsisSpinner
• fontsource fonts:
  • Outfit
• tabler icons
  • arrow-badge-left filled
  • arrow-badge-right filled
  • book-2
  • chart-bar
  • circle
  • filter-off
  • menu-deep
  • point filled
  • progress-help
  • reload
  • text-grammar
  • versions
  • writing-sign
  • x
• animista
  • blink: caret for letter inputs
• colorhexa
• Online Image Compressor and Squoosh for image and svg optimization
• Words API for mocked words
  • Sample data taken from Pricing section
• Boxy SVG to fix misspelled word in word-scramblle-logo.svg
• svgomg for optimization of svg assets

Editor Tools

• Kulala Language Server
• Kulala Formatter

Extra Features

• +7400 words to discover
• Insensitive case checking for entered letter
• Change color of used letters
• Border colors for correct and wrong entered letters
• Show correct word when winning or losing
• Hints section: see all letters that have been guessed
• Menu:
  • Definitions, for each discovered word. Includes Pagination
  • Difficulty, to change difficulty level: Easy, Normal, Hard, Master, Extreme, Insane, Why and Void
  • Stats, for discovered words

What I learned

• Create state management by using modules
• More secure data by using Map and WeakMap to encapsulate data for HTML elements
• Custom pagination system
• Custom tabs system
• Custom step-indicator library
• Usage of AbortController to remove event listeners

How To Use

To clone and run this application, you'll need Git, Node.js and pnpm installed on your computer. From your command line:

# Clone this repository
git clone https://github.com/Hdoc1509/dev-challenges

# install all required dependencies
cd dev-challenges
pnpm install --filter "@hdoc/dev-challenges" --filter guess-the-word...

# Run guess-the-word in dev-mode
cd vanilla/guess-the-word/
pnpm run dev --open