DEV Community

Cover image for The idea of Adding a Dictionary to Wordgames like Wordle is hereby licensed GNU GPL 3.0
Danny Engelman
Danny Engelman

Posted on

The idea of Adding a Dictionary to Wordgames like Wordle is hereby licensed GNU GPL 3.0

https://choosealicense.com/licenses/gpl-3.0/

English is not my first language, half the time I am typing unknown words in Wordle.

So I might as well make it educational. Eesy, Peesy with native JavaScript Web Components!

Now https://mordle.github.io
displays an explanation for any typed word:

Mordle with Dictionary

I explained how to extend Wordle with your own code.

Adding a lookup to the Free Dictionary was a matter of adding a showWordMeaning method to do an API call and to inject the definition in the Wordle UI.

showWordMeaning(word) {
  let id = "mordle-word-meaning";
  let write = (definition, meaning = "") => {
    let definitionDIV = this.shadowRoot.querySelector(`#${id}`); // existing definition
    if (definitionDIV) definitionDIV.remove(); // erase existing definition
    this.shadowRoot
      .querySelector(`[letters="${word}"]`) // find word row
      .insertAdjacentElement(
        // add after word row
        "afterend",
        Object.assign(document.createElement("div"), {
          // create DIV
          id, // with properties
          innerHTML: `<div style='font-size:0.8em;background:var(--mordle-background,beige);padding:2px'><div>${definition}</div><div><i><b>${meaning}</b></i></div></div>`,
        })
      );
  };
  // let user know we're looking up the word
  write(
    `Looking up ${word}... (if the free dictionary is available)`
  );
  // public and free Dictionary; I don't know how many calls are allowed
  fetch(`//api.dictionaryapi.dev/api/v2/entries/en/` + word)
    .then((response) => response.json())
    .then((dictionary) => {
      try {
        // wrapped in try/catch to avoid errors
        // extract FIRST definition
        let { definition, example } =
          dictionary[0].meanings[0].definitions[0];
        write(definition, example);
      } catch (e) {
        write(`No definition found for: ${word}`);
        console.error(e);
        return;
      }
    });
}
Enter fullscreen mode Exit fullscreen mode

Discussion (0)