Wordle Clone using JavaScript
6 min readMay 6, 2024
Welcome back ❤
Back at it again! So, I think I’m getting old… I’m constantly reading or playing Wordle (Wordle — The New York Times (nytimes.com)) now. Like an old woman. Disgusted with myself. I’m obsessed with Wordle now, so obsessed that I wanted to create a clone of it using JavaScript. Here are the steps I’ve taken to create the clone:
First, create HTML and CSS files, along with two JavaScript files named script.js and words.js (to hold the words used in the game).
Here’s my HTML and CSS code:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Wordle</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<h1> Wordle Clone </h1>
<div id="game-board">
</div>
<div id="keyboard-cont">
<div class="first-row">
<button class="keyboard-button">q</button>
<button class="keyboard-button">w</button>
<button class="keyboard-button">e</button>
<button class="keyboard-button">r</button>
<button class="keyboard-button">t</button>
<button class="keyboard-button">y</button>
<button class="keyboard-button">u</button>
<button class="keyboard-button">i</button>
<button class="keyboard-button">o</button>
<button class="keyboard-button">p</button>
</div>
<div class="second-row">
<button class="keyboard-button">a</button>
<button class="keyboard-button">s</button>
<button class="keyboard-button">d</button>
<button class="keyboard-button">f</button>
<button class="keyboard-button">g</button>
<button class="keyboard-button">h</button>
<button class="keyboard-button">j</button>
<button class="keyboard-button">k</button>
<button class="keyboard-button">l</button>
</div>
<div class="third-row">
<button class="keyboard-button">Del</button>
<button class="keyboard-button">z</button>
<button class="keyboard-button">x</button>
<button class="keyboard-button">c</button>
<button class="keyboard-button">v</button>
<button class="keyboard-button">b</button>
<button class="keyboard-button">n</button>
<button class="keyboard-button">m</button>
<button class="keyboard-button">Enter</button>
</div>
</div>
<script src="script.js" type="module"></script>
</body>
</html>
**where the only thing needed is a title in the body and a div section that holds the ID of “game-board” and a div section that holds buttons for the A-Z and delete and enter. **Be sure to link your JS code and CSS in your HTML file.
In your CSS file, add this line of code:
h1{
text-align: center;
}
//to center our h1 title
#game-board {
display: flex;
align-items: center;
flex-direction: column;
}
// center the board
.letter-box {
border: 2px solid gray;
border-radius: 3px;
margin: 2px;
font-size: 2.5rem;
font-weight: 700;
height: 3rem;
width: 3rem;
display: flex;
justify-content: center;
align-items: center;
text-transform: uppercase;
}
//sets height, width and border for each box on the board
.filled-box {
border: 2px solid black;
}
//adds border in the box when its filled with a letter
.letter-row {
display: flex;
}
#keyboard-cont {
margin: 1rem 0;
display: flex;
flex-direction: column;
align-items: center;
}
#keyboard-cont div {
display: flex;
}
.second-row {
margin: 0.5rem 0;
}
.keyboard-button {
font-size: 1rem;
font-weight: 700;
padding: 0.5rem;
margin: 0 2px;
cursor: pointer;
text-transform: uppercase;
}
//formating for the buttons at the bottom of the screen, text-transformation to uppercase forces the letters to appear uppercaseIn your words.js code, add this code:
Copy the code found in this repo: https://github.com/Morgenstern2573/wordle_clone/blob/master/build/words.js
In your script.js file, add this code:
import { WORDS } from "./words.js";
// import words from the words.js file to add into the variable WORDS
const NUMBER_OF_GUESSES = 6;
let guessesRemaining = NUMBER_OF_GUESSES;
let currentGuess = [];
let nextLetter = 0;
let rightGuessString = WORDS[Math.floor(Math.random() * WORDS.length)]
console.log(rightGuessString)
// create a global var called number of guesses, guessesremaining, cureent guess, nextletter. create a var called rightguessstring that picks a random word from the array of words from words.js. log the random word to your console.
function initBoard() {
let board = document.getElementById("game-board");
for (let i = 0; i < NUMBER_OF_GUESSES; i++) {
let row = document.createElement("div")
row.className = "letter-row"
for (let j = 0; j < 5; j++) {
let box = document.createElement("div")
box.className = "letter-box"
row.appendChild(box)
}
board.appendChild(row)
}
}
initBoard()
// create a function "initBoard" that creates a row for each guess (6 guesses) and it creates 5 boxes for each row. For every box, it appends it to a row.
// the function will then add each row to the board, where each row is given the class of letter-row and each box is labelled letter-box.
document.addEventListener('keyup', (e)=>{
if (guessesRemaining === 0) {
return
}
let pressedKey = String(e.key)
if (pressedKey === "Backspace" && nextLetter !== 0) {
deleteLetter()
return
}
if (pressedKey === "Enter") {
checkGuess()
return
}
let found = pressedKey.match(/[a-z]/gi)
if (!found || found.length > 1) {
return
} else {
insertLetter(pressedKey)
}
})
//add an event listener whenever a key is released.
// if the user is out of guesses, stop the function.
// if the backspace is pressed and its not the first letter, run the delete letter function.
// if the user selects enter, run the checkGuess function.
// If the user selects any button outside of A-Z or its longer than the 5 letters cap of the wordle game, stop the function
function insertLetter (pressedKey) {
if (nextLetter === 5) {
return
}
pressedKey = pressedKey.toLowerCase()
let row = document.getElementsByClassName("letter-row")[6 - guessesRemaining]
let box = row.children[nextLetter]
box.textContent = pressedKey
box.classList.add("filled-box")
currentGuess.push(pressedKey)
nextLetter += 1
}
//this function checks if here's still space in the guess for this letter,
// finds the appropriate row, and puts the letter in the box.
function deleteLetter(){
let row = document.getElementsByClassName("letter-row")[6- guessesRemaining]
let box = row.children[nextLetter - 1]
box.textContent = ""
box.classList.remove("filled-box")
currentGuess.pop()
nextLetter -=1
}
// this function will gets the correct row, finds the last box and empties it, and then resets the nextLetter counter.
function checkGuess(){
let row = document.getElementsByClassName("letter-row")[6-guessesRemaining]
let guessString = ''
let rightGuess = Array.from(rightGuessString)
for(const val of currentGuess){
guessString += val
}
if (guessString.length !=5){
alert("Not enough letters!")
return
}
if(!WORDS.includes(guessString)){
alert("Word not in list!")
return
}
for(let i=0; i<5; i++){
let letterColor = ''
let box = row.children [i]
let letter = currentGuess[i]
let letterPosition = rightGuess.indexOf(currentGuess[i])
// is lettin the current guess
if(letterPosition === -1){
letterColor = 'grey'
} else {
// now, letter is definitely in word
// if letter index and right guess index are the same
// letter is in the right position
if(currentGuess[i] === rightGuess[i]){
//shade green
letterColor = 'green'
} else{
//shade yellow
letterColor = 'yellow'
}
rightGuess[letterPosition] = "#"
}
let delay = 250 * i
setTimeout(()=> {
//shade box
box.style.backgroundColor = letterColor
shadeKeyBoard(letter,letterColor)
}, delay)
}
if(guessString === rightGuessString){
alert("You guessed right! Game over!")
guessesRemaining = 0
return
} else {
guessesRemaining -= 1
currentGuess = []
nextLetter = 0
if(guessesRemaining === 0){
alert("You've run out of guesses! Game over!")
alert(`The right word was: "${rightGuessString}"`)
}
}
}
// this check function will make sure the guess is 5 letters
// make sure the guess is a valid list
// checks each letter of the word and shades them with gray(incorrect letter), yellow(right letter, wrong placing) and green(right letter and position)
// if you get the correct word then the user gets alerted you're correct!
function shadeKeyBoard(letter,color){
for (const elem of document.getElementsByClassName("keyboard-button")){
if(elem.textContent === letter){
let oldColor = elem.style.backgroundColor
if(oldColor === 'green'){
return
//shadeKeyBoard function gets the letters on the screen for mobile users or for the users that doesnt want to type on their desktop.
// So it finds the ket that matches the letter.
// If the key is already green, do nothing
// If the key is currently yellow, only allow it to become green
// else shade the key grayThat’s how you build my new current obsession. Add some more features to it! I plan on adding some AWS services to this code, such as SMS notifications, or adding disaster recovery methods so you don’t lose your progress when you’re in the middle of winning, or losing (for you losers).
Here’s how my code looks like. I’ve already started playing, and yes, I got it right in 5 tries (big brain energy). Go to Wordle (burblebgw.netlify.app) to play my clone game.
