Create Word Guessing App using Tailwind CSS

Last Updated : 07 Mar, 2024

A word-guessing app is an application that provides a hint to the user and asks them to guess the correct word based on that hint. It contains an input box to get the guessed word input from the user and a button to check whether the guess is correct or not. You have 5 guesses for each hint with a particular time limit.

ookk

Approach:

First, we make a folder where we put an HTML file and a JavaScript file. In the HTML file, we include a link to integrate Tailwind CSS.
Now use Tailwind CSS classes to style the word guessing app. We add ten hints and make them visually appealing to the reader, using the proper Tailwind CSS and also the one button by click on which we can know our answer is correct or not.
In the JavaScript file, we write the logic. When we write the answer, we receive congratulations message . If our answer is incorrect then guesses is left one by one and when five left is over game is over.
By following these steps, we create an word guessing app experience for users, where they can guess answer and see their results based on their inputs.

Example: The below code example will help you in creating a word guessing app using Tailwind CSS.

HTML

<!DOCTYPE html>
<html lang="en">
 
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content=
"width=device-width, initial-scale=1.0">
    <link rel="stylesheet" href=
"https://cdn.jsdelivr.net/npm/tailwindcss@2.2.19/dist/tailwind.min.css">
    <title>
        Word Guessing Game
    </title>
</head>
 
<body class="h-screen flex items-center justify-center 
    bg-gradient-to-b from-red-600 via-yellow-500 to-purple-800">
    <div id="app" class="text-center card p-6 bg-white 
        text-gray-800 w-96 rounded-lg shadow-md">
        <h1 class="text-3xl font-bold mb-6">
            Word Guessing Game
        </h1>
        <div class="mb-6">
            <p class="text-lg font-bold">
                Guess the word based on the 
                provided hint:
            </p>
            <p id="word" class="text-2xl font-bold mt-2"></p>
        </div>
        <div class="mb-6">
            <p class=" text-lg">Hint:</p>
            <p id="hint" class="text-xl font-bold mt-2"></p>
        </div>
        <div class="flex items-center justify-center mb-3">
            <label for="guess" class="text-lg mr-4">
                Your Guess:
            </label>
            <input type="text" id="guess"
                class="p-2 border border-gray-300 rounded-md 
                bg-white text-gray-800 focus:outline-none">
            <button onclick="checkGuess()" class=
                "bg-blue-500 text-white px-4 py-2 
                rounded-md ml-2">
                Check
            </button>
        </div>
        <p id="error" class="text-red-500 mb-3"></p>
        <div class="flex justify-between">
            <div>
                <p class="text-lg">
                    Guesses Left: 
                    <span id="guesses" class="font-bold">
                        5
                    </span>
                </p>
            </div>
            <div class="bg-gray-300 p-2 rounded-md">
                <p class="text-lg text-gray-800">
                    Time Left: 
                    <span id="timer" class="font-bold">
                        15
                    </span> 
                    seconds
                </p>
            </div>
        </div>
    </div>
 
    <script src="./script.js"></script>
</body>
 
</html>

Javascript

// script.js
 
// Define a list of words and hints for a guessing game
const words = [
    { word: "javascript", hint: "A programming language for the web" },
    { word: "giraffe", hint: "A tall African mammal" },
    { word: "pizza", hint: "A delicious Italian dish" },
    { word: "computer", hint: "An electronic device for processing data" },
    { word: "elephant", hint: "A large herbivorous mammal with tusks" },
    { word: "ocean", hint: "A vast body of saltwater" },
    { word: "mountain", hint: "A large landform that rises prominently" },
    { word: "sunflower", hint: "A tall plant with large yellow flowers" },
    { word: "jazz", hint: "A genre of music with improvisation and syncopation" },
    { word: "galaxy", hint: "A system of millions or billions of stars" }
];
 
// The player can use the hints to guess the words in the game
 
let currentWord, currentHint, guessesLeft, timer;
 
function startGame() {
    resetGame();
    updateWordAndHint();
 
    // Set up the timer
    timer = setInterval(() => {
        const timerElement = 
            document.getElementById("timer");
        const seconds = 
            parseInt(timerElement.textContent, 10);
 
        if (seconds === 0) {
            endGame("Time's up! You ran out of time.");
        } else {
            timerElement.textContent = seconds - 1;
        }
    }, 1000);
}
 
function updateWordAndHint() {
    const randomIndex = 
        Math.floor(Math.random() * words.length);
    currentWord = words[randomIndex].word;
    currentHint = words[randomIndex].hint;
 
    document.getElementById("word").textContent = 
        "_ ".repeat(currentWord.length);
    document.getElementById("hint").
        textContent = currentHint;
}
 
function checkGuess() {
    const guessInput = 
        document.getElementById("guess");
    const userGuess = 
        guessInput.value.toLowerCase();
    const error = 
        document.getElementById('error');
 
    if (userGuess === currentWord) {
        error.innerHTML = "";
        endGame("Congratulations! You guessed the correct word.");
    } 
    else if(userGuess === ""){
        error.innerHTML = 
            "Please enter a input text."
    }
    else {
        guessesLeft--;
        if (guessesLeft === 0) {
            endGame("Sorry, you're out of guesses!");
        } else {
            document.getElementById("guesses").
                textContent = guessesLeft;
            error.innerHTML = 
                "Incorrect guess. Try again!";
        }
    }
    guessInput.value = "";
}
 
function resetGame() {
    guessesLeft = 5;
    document.getElementById("guesses").
        textContent = guessesLeft;
 
    // Reset the timer to 30 seconds
    document.getElementById("timer").
        textContent = 15;
 
    clearInterval(timer);
}
 
function endGame(message) {
    clearInterval(timer);
    // Display a flash message with the correct answer
    const flashMessage = 
        document.createElement("div");
    flashMessage.className = 
        `fixed top-0 left-0 w-full h-full flex items-center 
        justify-center bg-black bg-opacity-75 text-white text-2xl`;
    flashMessage.innerHTML = 
        `<p>
            ${message}
        </p>
        <p>
            Correct answer: ${currentWord}
        </p>`;
    document.body.appendChild(flashMessage);
 
    // Remove the flash message after 1 seconds
    setTimeout(() => {
        flashMessage.remove();
        startGame();
    }, 1000);
}
 
// Start the game when the page loads
window.onload = startGame;