Wordle Workshop

Series Introduction

Lately, my five year old daughter has constantly been asking me to make paper Wordles for her. These challenges usually consist of simple, three-letter sight words that she can instantly recognize.One day, it suddenly occurred to me that maybe I should program a kid-friendly clone of Wordle so that I can stop drawing paper grids every morning! And now here we are…

Build the Game Grid

Before we touch any JavaScript, let’s first hard-code the markup and CSS for a basic 3×3 Wordle grid. If we do this manually up front, switchcing over to a dynamic version in the next episode will be a much simpler task.

Dynamic Grids With Vanilla JavaScript

Next, let’s turn the hard-coded grid we built into a dynamic one. We’ll start by using vanilla JavaScript to construct the necessary elements and throw them into the DOM.

Dynamic Grids With Alpine.js

Now that you know how to manually build up a DOM fragment, let’s save ourselves some time and instead pull in Alpine.js to do the job for us. It’s my favorite micro JavaScript framework, and will save us a great deal of time.

The Source of Truth

In this lesson, we’ll turn our grid into a source of truth for the game. To do so, we’ll define it as an array on our Alpine component. And because Alpine provides reactivity out of the box, when we modify this array, the HTML grid will automatically re-render to reflect the change.

Submit a Guess

Let’s next move on and validate the user’s submitted guess for each row. To allow for this, we should “listen” for when they press the “Enter” key. When they do, we can then compare the current row against the secret word they’re trying to guess.

Provide User Feedback

Currently, we’re just displaying an alert box to provide game feedback to the user. But of course, that’s only temporary. In this lesson, let’s add an output element to the page that can display any message we set on our component.

Conditional Tile Highlighting

Now, we get to the fun part. A key part of Wordle is the tile highlighting that indicates if your guessed word contains any matching letters. I think this shouldn’t be too hard to accomplish!

Refactor Sweep and the Delete Key

I’d like to accomplish two things in this next episode. First, we’ll do a quick refactoring sweep. Steps like this should be performed continuously as you build an app. Once that’s complete, we can move on to handling when the “Delete” key is pressed by the user.

Make it Look Professional

We still have more JavaScript to write, but let’s take a short break to focus on the design of our Wordle clone. It’s amazing when just a touch of CSS can make a page feel so much more professional.

Check the Dictionary

Next up, we can move on to word validation. At the moment, we accept any submission – which of course isn’t fair. So let’s figure out the simplest way to verify that the user’s submitted word is, in fact, a word!

Fix a Tile Highlighting Bug

I think we have a small tile highlighting bug in our code. What if we guess a word that contains two of the same letter? We might run into a situation where one tile is incorrectly marked as “present.” Let’s fix that!

Build the Keyboard

Our TryCat app is still missing one key feature. The Wordle keyboard is incredibly useful for deciding what your next guess will be. Let’s begin building a similar version in this episode.

Make the Keyboard Pretty

The current “design” of our keyboard will get the job done, but let’s take five minutes or so to make it look a bit more attractive and similar to what the official Wordle site provides.

Keyboard Highlighting

In this episode, let’s figure out how to make each key on our keyboard conditionally highlight to reflect the tile status for the corresponding key. This is a core feature of the actual Wordle game, so it’s important that we implement something similar.

Final Refactor Sweep

At this point, our project is feature complete. So let’s begin wrapping up by doing our final sweep through the codebase, performing any tweaks and refactors that jump out at us. Specifically, we’ll do a third pass through the tile highlighting logic to get it just right.

The Most Important Acceptance Test

It’s been two hours and some change, but I think we did what we set out to do. Now, it’s time for the final, and most important, acceptance test.You can play along at trycat.laracasts.com.