Displaying Word Definitions

Once we have the API data, we need to put it on the page. Each word can have multiple meanings (noun, verb, exclamation, etc.), and each meaning has a list of definitions. Let’s look at how the code builds that structure in the DOM.

Clearing the Section

Before we render new results, clearDefinitionsSection removes whatever was there before and returns the section element so other functions can append to it:

const clearDefinitionsSection = () => {
  const definitionsSection = document.getElementById("definitions");
  definitionsSection.innerHTML = "";
  return definitionsSection;
};

The Helper Functions

Each piece of the definitions UI has its own small helper. That keeps the main displayWordDefinition function readable, because all it has to do is put the pieces together.

The section heading:

const createDefinitionsHeading = () => {
  const definitionsHeading = document.createElement("h1");
  definitionsHeading.classList.add("text-2xl", "font-semibold");
  definitionsHeading.innerText = "Definitions";
  return definitionsHeading;
};

A container <div> for each part of speech:

const createDefinitionDiv = () => {
  const definitionDiv = document.createElement("div");
  definitionDiv.classList.add("bg-sky-50");
  return definitionDiv;
};

The part-of-speech label (e.g., “Noun”, “Verb”):

const createPartOfSpeechElement = (partOfSpeech) => {
  const partOfSpeechName = document.createElement("p");
  partOfSpeechName.classList.add(
    "px-4", "py-2", "font-semibold", "text-white", "bg-sky-600",
  );
  partOfSpeechName.innerText = partOfSpeech;
  return partOfSpeechName;
};

The <ul> and individual <li> items:

const createDefinitionsList = () => {
  const definitionsList = document.createElement("ul");
  definitionsList.classList.add(
    "p-2", "ml-6", "font-light", "list-disc", "text-sky-700",
  );
  return definitionsList;
};

const createDefinitionItem = (definitionObj) => {
  const definitionsItem = document.createElement("li");
  definitionsItem.innerText = definitionObj.definition;
  return definitionsItem;
};

Each helper follows the same pattern: create an element, style it, set its content, and return it.

The Orchestrating Function

displayWordDefinition loops over each meaning, creates the part-of-speech label and its list of definitions, and appends everything to the section:

const displayWordDefinition = (meanings) => {
  const definitionsSection = clearDefinitionsSection();

  const definitionsHeading = createDefinitionsHeading();
  definitionsSection.appendChild(definitionsHeading);

  meanings.forEach((meaning) => {
    const definitionDiv = createDefinitionDiv();
    definitionsSection.appendChild(definitionDiv);

    const { partOfSpeech, definitions } = meaning;

    const partOfSpeechName = createPartOfSpeechElement(partOfSpeech);
    definitionDiv.appendChild(partOfSpeechName);

    const definitionsList = createDefinitionsList();
    definitionDiv.appendChild(definitionsList);

    const definitionListItems = definitions.map(createDefinitionItem);
    definitionsList.append(...definitionListItems);
  });
};

Look at the last two lines inside the loop. definitions.map(createDefinitionItem) creates all the <li> elements and returns them in an array. Then append(...definitionListItems) uses the spread operator to pass each item as a separate argument, so all of them are added to the list in one call.