Step 3

Open the script.js file. Notice the fetchDefinition function, which in a way is the entry point to the application.

function fetchDefinition(event) {
  event.preventDefault();
  const wordToDefine = defineInput.value;
  fetch(`${dictionaryAPI}${wordToDefine}`)
    .then((response) => response.json())
    .then(data => displayFetchedData(data[0]))
    .catch(err => console.log(err));
}

The fetchDefinition sends a request to the Free Dictionary API. Once the response is received and converted to JSON, it passes the response data to the displayFetchedData function. The latter relies on several helper functions to update the UI.

I leave it to you to further explore the script.js. A noteworthy observation is how in Vanilla JavaScript, we need to grab the HTML elements that we are working with from the DOM or create and insert them back to the DOM. This approach will become tedious for building complex applications. JavaScript front-end libraries and frameworks, such as React, connect (bind) your JavaScript to HTML automatically. Therefore, you mainly focus on implementing the logic to update the state (data) of the application. The update to UI follows seamlessly.