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:
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;
}
});
}
Top comments (0)