Create a file named styles.css:

body {    font-family: Arial, sans-serif;    display: flex;    justify-content: center;    align-items: center;    height: 100vh;    margin: 0;    background-color: #f0f0f0;}.container {    text-align: center;}#game-board {    display: grid;    grid-template-columns: repeat(5, 40px);    gap: 10px;    margin-bottom: 20px;}.cell {    width: 40px;    height: 40px;    display: flex;    justify-content: center;    align-items: center;    border: 1px solid #ddd;    font-size: 18px;}.correct {    background-color: #6aaa64;    color: white;}.present {    background-color: #c9b458;    color: white;}.absent {    background-color: #787c7e;    color: white;}

Create a file named script.js:

const possibleWords = [\\'apple\\', \\'brave\\', \\'crane\\', \\'dough\\', \\'eagle\\']; // List of possible wordsconst targetWord = possibleWords[Math.floor(Math.random() * possibleWords.length)]; // Random target wordconst gameBoard = document.getElementById(\\'game-board\\');const guessInput = document.getElementById(\\'guess-input\\');const submitBtn = document.getElementById(\\'submit-btn\\');const message = document.getElementById(\\'message\\');function createBoard() {    for (let i = 0; i < 6; i  ) { // 6 rows for 6 guesses        for (let j = 0; j < 5; j  ) { // 5 columns for 5 letters            const cell = document.createElement(\\'div\\');            cell.classList.add(\\'cell\\');            gameBoard.appendChild(cell);        }    }}function checkGuess(guess) {    const cells = gameBoard.querySelectorAll(\\'.cell\\');    const targetWordArray = targetWord.split(\\'\\');    const guessArray = guess.split(\\'\\');    let index = 0;    for (let i = 0; i < 5; i  ) {        if (guessArray[i] === targetWordArray[i]) {            cells[index].classList.add(\\'correct\\');        } else if (targetWordArray.includes(guessArray[i])) {            cells[index].classList.add(\\'present\\');        } else {            cells[index].classList.add(\\'absent\\');        }        cells[index].textContent = guessArray[i];        index  ;    }}function handleSubmit() {    const guess = guessInput.value.toLowerCase();    if (guess.length !== 5 || !possibleWords.includes(guess)) {        message.textContent = \\'Invalid word. Try again.\\';        return;    }    checkGuess(guess);    guessInput.value = \\'\\';    // Additional game logic (e.g., end game if correct guess or number of attempts) can be added here}createBoard();submitBtn.addEventListener(\\'click\\', handleSubmit);

You can also directly clone: https://github.com/prince-dev007/wordle-game

Read More About Wordle Game

","image":"http://www.luping.net/uploads/20241001/172777969166fbd36b7819f.jpg","datePublished":"2024-11-01T09:51:21+08:00","dateModified":"2024-11-01T09:51:21+08:00","author":{"@type":"Person","name":"luping.net","url":"https://www.luping.net/articlelist/0_1.html"}}
"If a worker wants to do his job well, he must first sharpen his tools." - Confucius, "The Analects of Confucius. Lu Linggong"
Online tools
Software tutorial
Site navigation
Programming
Front page > Programming > Create a Wordle Game in HTML,CSS, and JS

Create a Wordle Game in HTML,CSS, and JS

Published on 2024-11-01
Browse:958

Create a Wordle Game in HTML,CSS, and JS

Create a file named index.html:



    
    
    Wordle Game
    


    

        
Wordle Game

Create a file named styles.css:

body {
    font-family: Arial, sans-serif;
    display: flex;
    justify-content: center;
    align-items: center;
    height: 100vh;
    margin: 0;
    background-color: #f0f0f0;
}

.container {
    text-align: center;
}

#game-board {
    display: grid;
    grid-template-columns: repeat(5, 40px);
    gap: 10px;
    margin-bottom: 20px;
}

.cell {
    width: 40px;
    height: 40px;
    display: flex;
    justify-content: center;
    align-items: center;
    border: 1px solid #ddd;
    font-size: 18px;
}

.correct {
    background-color: #6aaa64;
    color: white;
}

.present {
    background-color: #c9b458;
    color: white;
}

.absent {
    background-color: #787c7e;
    color: white;
}

Create a file named script.js:

const possibleWords = ['apple', 'brave', 'crane', 'dough', 'eagle']; // List of possible words
const targetWord = possibleWords[Math.floor(Math.random() * possibleWords.length)]; // Random target word

const gameBoard = document.getElementById('game-board');
const guessInput = document.getElementById('guess-input');
const submitBtn = document.getElementById('submit-btn');
const message = document.getElementById('message');

function createBoard() {
    for (let i = 0; i 




You can also directly clone: https://github.com/prince-dev007/wordle-game



Read More About Wordle Game
Release Statement This article is reproduced at: https://dev.to/devops_den/create-a-wordle-game-in-htmlcss-and-js-4d17?1 If there is any infringement, please contact [email protected] to delete it
Latest tutorial More>
ClassificationMore>
Learn japanese Learn Korean Learn Chinese Learn foreign language Game Common problem Technology peripherals AI Software tutorial Programming Article

Study Chinese

ToolMore>
Image base64 decoding
Chinese Pinyin
Unicode encoding
JS obfuscation encryption compression
URL hexadecimal encryption tool
UTF-8 encoding conversion tool
Online Ascii encoding and decoding tools
MD5 encryption tool
Hash/Hash text online encryption and decryption tool
Online SHA encryption

Disclaimer: All resources provided are partly from the Internet. If there is any infringement of your copyright or other rights and interests, please explain the detailed reasons and provide proof of copyright or rights and interests and then send it to the email: [email protected] We will handle it for you as soon as possible.

Copyright© 2022 湘ICP备2022001581号-3