tiny worldle clone i built during a stream https://www.youtube.com/watch?v=K77xThbu66A

index.html

<h1>Wordle</h1>
<div id="grid"></div>
<style>
  body, html {
  	background: #111;
  	color: white;
  	font-family: sans-serif;
 	text-align: center;
 	text-transform: uppercase;
  }
  h1 {
  	font-size: 42px
  }
  .cell {
    width: 60px;
    height: 60px;
    line-height: 60px;
    border: 1px solid #aaa;
    display: inline-block;
    margin: 10px;
    font-size: 40px;
    font-weight: bold;
  }
</style>
<script src="index.js"></script>

index.js

'use strict'

let wordList = [
  'patio',
  'darts',
  'piano',
  'horse',
  'hello',
  'water',
  'pizza',
  'sushi',
  'crabs'
];
let randomIndex = Math.floor(Math.random() * wordList.length)
let secret = wordList[randomIndex]

let currentAttempt = ''
let history = []

let grid = document.getElementById('grid')
buildGrid()
updateGrid()
window.addEventListener('keydown', handleKeyDown)

function handleKeyDown(e) {
  let letter = e.key.toLowerCase()
  if (letter === 'enter') {
    if (currentAttempt.length < 5) {
      return
    }
    if (!wordList.includes(currentAttempt)) {
      alert('Not in my thesaurus')
      return
    }
    history.push(currentAttempt)
    currentAttempt = ''
  } else if (letter === 'backspace') {
    currentAttempt = currentAttempt.slice(0, currentAttempt.length - 1)
  } else if (/[a-z]/.test(letter)) {
    if (currentAttempt.length < 5) {
      currentAttempt += letter
    }
  }
  updateGrid()
}

function buildGrid() {
  for (let i = 0; i < 6; i++) {
    let row = document.createElement('div')
    for (let j = 0; j < 5; j++) {
      let cell = document.createElement('div')
      cell.className = 'cell'
      cell.textContent = ''
      row.appendChild(cell)
    }
    grid.appendChild(row)
  }
}


function updateGrid() {
  let row = grid.firstChild
  for (let attempt of history) {
    drawAttempt(row, attempt, false)
    row = row.nextSibling
  }
  drawAttempt(row, currentAttempt, true)
}

function drawAttempt(row, attempt, isCurrent) {
  for (let i = 0; i < 5; i++) {
    let cell = row.children[i]
    if (attempt[i] !== undefined) {
      cell.textContent = attempt[i]
    } else {
      // lol
      cell.innerHTML = '<div style="opacity: 0">X</div>'
    }
    if (isCurrent) {
      cell.style.backgroundColor = '#111'
    } else {
      cell.style.backgroundColor = getBgColor(attempt, i)
    }
  }
}

function getBgColor(attempt, i) {
  let correctLetter = secret[i]
  let attemptLetter = attempt[i]
  if (
    attemptLetter === undefined ||
    secret.indexOf(attemptLetter) === -1
  ) {
    return '#212121'
  }
  if (correctLetter === attemptLetter) {
    return '#538d4e'
  }
  return '#b59f3b'
}

todo.md

some of these are completed, others are up to you

• you provide five char guesses
• each guess must be a word
• when you press enter,
  • board
    • you see the status of your last guess
      • letters that are in wrong places are yellow
      • missing letters are grey
      • correct guesses + positions are green
      • shake the active row on word we don't know
  • keyboard
    • reflects same data
    • third row is enter [...] backspace
    • you can still input by typing
    • when you press enter, each letter animates into rotating from black to grey one
  • you only see past + active attempt
  • if you make too many attempts you probably die
  • initial visual state
    • all rows are empty
    • as i fill out my guess, background is black
    • filled out cells have slight border highight

FabianoLothor, one big issue with your adjustment is that you are not allowing people to use letters that have been invalidated... That is not a true rule of Wordle. If you start with "HORSE" and there's no S, You could still use the S again in another word. Sure, you already know that letter is wrong, but it may be that you want to use it anyway in another word that has different letters for more clues.

@DragonRydrz indeed.

Thanks for the feedback.

Actually I wasn't trying to achieve the same behaviors and visual of Wordle.

I did things to achieve my needs, my thought was that this could increase difficulty to the game and avoid misspelled words.