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

@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.