Matrix alphabet highlighting

Question

I'm working on a JavaScript project where I need to create a matrix of alphabet letters displayed in a table. I want to implement a feature where users can enter text, and the letters in the matrix matching this text will be highlighted. How can I achieve this functionality using HTML, CSS, and JavaScript? Specifically, I'd like to generate a matrix of letters and enable highlighting cells that match the user-entered text in the matrix. Can you provide guidance or code snippets to help me implement this feature?

i tried with javascript but it doent work at all

Answer 1

Here's my implementation.

You'll have to tweak it a little if you want to include capital letters.

If you want numbers and symbols just add new grid items for each one.

let input = document.querySelector("input");

/**
Remove highlight on all letters. 
@param except - letters to ignore
*/
function clearAllHighlights(except = '') {
  if (!except) {
    return;
  }

  let gridItems = document.querySelectorAll(".grid .highlight");

  if (!gridItems) {
    return;
  }

  gridItems.forEach((gridItem) => {
    if (!except.includes(gridItem.dataset.letter)) {
      gridItem.classList.remove('highlight');
    }
  });
}

function highlightLetter(letter = '') {
  if (!letter) {
    return;
  }

  let letterDiv = document.querySelector(`.grid div[data-letter="${letter}"]`);

  if (!letterDiv) {
    return;
  }

  letterDiv.classList.add('highlight');
}

input.addEventListener("input", () => {
  input.value = input.value.toLowerCase();

  clearAllHighlights(input.value);

  for (let i = 0; i < input.value.length; i++) {
    highlightLetter(input.value[i]);
  }
});

div {
  display: flex;
  flex-flow: column nowrap;
  justify-content: center;
  align-items: center;
}

.grid {
  display: grid;
  grid-template: repeat(5, auto)/ repeat(5, auto);
  grid-auto-flow: row;
}

.grid>div {
  height: 50px;
  width: 50px;
}

.grid .highlight {
  background: orange;
}

<div>
  <div class="grid">
    <div data-letter="a">a</div>
    <div data-letter="b">b</div>
    <div data-letter="c">c</div>
    <div data-letter="d">d</div>
    <div data-letter="e">e</div>
    <div data-letter="f">f</div>
    <div data-letter="g">g</div>
    <div data-letter="h">h</div>
    <div data-letter="i">i</div>
    <div data-letter="j">j</div>
    <div data-letter="k">k</div>
    <div data-letter="l">l</div>
    <div data-letter="m">m</div>
    <div data-letter="n">n</div>
    <div data-letter="o">o</div>
    <div data-letter="p">p</div>
    <div data-letter="q">q</div>
    <div data-letter="r">r</div>
    <div data-letter="s">s</div>
    <div data-letter="t">t</div>
    <div data-letter="u">u</div>
    <div data-letter="v">v</div>
    <div data-letter="w">w</div>
    <div data-letter="x">x</div>
    <div data-letter="y">y</div>
    <div data-letter="z">z</div>
  </div>

  <input type="text" placeholder="Type stuff">
</div>