KenjaminButton

Building Wordle: A Clone with Vanilla JS and Robust Testing

A fully functional Wordle game clone built purely with HTML, CSS, and JavaScript, featuring comprehensive test coverage using Jest.

JavaScript
HTML
CSS
Jest
Testing
TDD
Game Development
Frontend
UI
Mon Apr 01 2024 00:00:00 GMT+0000 (Coordinated Universal Time)

Remember the daily Wordle craze? I decided to dive deep and build my own version from scratch! Check out this fully functional Wordle Clone, meticulously crafted using only fundamental web technologies: HTML, CSS, and vanilla JavaScript.

This project was more than just replicating gameplay; it was an exercise in professional development practices. Key goals included:

  • Clean, Modular Code: Separating concerns between game logic (game.js) and UI handling (ui.js).
  • Robust Testing: Implementing a comprehensive test suite using Jest to cover core game mechanics and UI interactions, aiming for high test coverage (game.test.js, ui.test.js).
  • Accurate UI/UX: Recreating the familiar Wordle interface, including the color-coded feedback system and a responsive virtual keyboard with specific key styling (functional backspace, custom widths for return/space keys).

Building this involved tackling state management, DOM manipulation, event handling, and asynchronous operations (like fetching word definitions) without relying on external frameworks. The emphasis on testing ensured reliability and made refactoring much safer.

Explore the game logic and test suites yourself over on the GitHub repository. Challenge yourself with the live version and see if you can guess the word!