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


The idea of Adding a Dictionary to Wordgames like Wordle is hereby licensed GNU 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!

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
      .querySelector(`[letters="${word}"]`) // find word row
        // add after word row
        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
    `Looking up ${word}... (if the free dictionary is available)`
  // public and free Dictionary; I don't know how many calls are allowed
  fetch(`//` + word)
    .then((response) => response.json())
    .then((dictionary) => {
      try {
        // wrapped in try/catch to avoid errors
        // extract FIRST definition
        let { definition, example } =
        write(definition, example);
      } catch (e) {
        write(`No definition found for: ${word}`);
Enter fullscreen mode Exit fullscreen mode

Top comments (0)

Visualizing Promises and Async/Await 🤯

async await

☝️ Check out this all-time classic DEV post