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 • Edited on

1 1

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

Code explanation

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

Top comments (0)

This post blew up on DEV in 2020:

js visualized

🚀⚙ JavaScript Visualized: the JavaScript Engine

As JavaScript devs, we usually don't have to deal with compilers ourselves. However, it's definitely good to know the basics of the JavaScript engine and see how it handles our human-friendly JS code, and turns it into something machines understand! 🥳

Happy coding!

👋 Kindness is contagious

Please leave a ❀ or a friendly comment on this post if you found it helpful!

Okay