How to Create Wordle Game in HTML, CSS and Javascript ?

#javascript #beginners #wordle #programming

Wordle is a popular word-guessing game where players have to guess a five-letter word with a limited number of attempts. The game has become an online sensation with people spending hours trying to guess the word. If you are looking to create a Wordle game of your own, this article will guide you through the process using HTML, CSS, and JavaScript. Demo here Play Wordle game

The first step is to create the HTML structure for the game. Create a div that will hold the game and add an input field for the user to enter their guess. Also, add a button to submit the guess and a list element to display the guesses made by the user.

<div class="wordle-game">
  <h1>Wordle Game</h1>
  <p>Guess a 5-letter word:</p>
  <input type="text" id="guess" placeholder="Enter guess here">
  <button id="submit-btn">Submit</button>
  <ul id="guess-list"></ul>
</div>

Next, style the HTML elements using CSS. You can choose any style you want, but here is an example:

.wordle-game {
  text-align: center;
  margin: 20px auto;
  width: 50%;
  background-color: #f7f7f7;
  padding: 20px;
  border-radius: 10px;
}

h1 {
  font-size: 40px;
}

p {
  font-size: 25px;
}

input[type="text"] {
  padding: 10px;
  font-size: 20px;
  border: none;
  border-bottom: 2px solid #ccc;
  margin-bottom: 20px;
}

button {
  background-color: #4CAF50;
  color: white;
  padding: 10px 20px;
  border: none;
  border-radius: 5px;
  cursor: pointer;
  margin-bottom: 10px;
}

button:hover {
  background-color: #3e8e41;
}

ul {
  list-style: none;
  margin: 0;
  padding: 0;
  font-size: 20px;
}

li {
  margin-bottom: 10px;
}

Finally, add JavaScript code to make the game functional. The first step is to generate a random five-letter word that the user has to guess.

const words = ["apple", "banana", "cherry", "grape", "kiwi", "lemon", "melon", "orange", "peach", "pear", "plum", "strawberry"];

let word = words[Math.floor(Math.random() * words.length)];
console.log(word);

Next, add an event listener to the button that will trigger when the user clicks on it. Inside the event listener, check if the guess is correct or not, and add the guess to the list.

const submitBtn = document.getElementById("submit-btn");
const guessInput = document.getElementById("guess");
const guessList = document.getElementById("guess-list");

let attempts = 0;

submitBtn.addEventListener("click", function() {
  const guess = guessInput.value.toLowerCase();
  let result = "";
  attempts++;

  if (guess.length !== 5) {
    result = "Please enter a 5-letter word";
  } else if (guess === word) {
    result = "You win!";
    submitBtn.disabled = true;
  } else {
    const letters = word.split("");
    for (let i = 0; i < letters.length; i++) {
      if (guess.includes(letters[i])) {
        result += "O";
      } else