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.
- 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.
- Vite
- BEM and CUBE CSS
- @hrc/input markup and styles:
- @hrc/spinner markup and styles:
- fontsource fonts:
- tabler icons
- 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
- +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
Hintssection: see all letters that have been guessedMenu:Definitions, for each discovered word. IncludesPaginationDifficulty, to change difficulty level:Easy,Normal,Hard,Master,Extreme,Insane,WhyandVoidStats, for discovered words
- 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
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