DEV Community

Cover image for Build Your Own Spanish Dictionary App Using Public APIs
Parvez
Parvez

Posted on

Build Your Own Spanish Dictionary App Using Public APIs

#webdev #programming #javascript #beginners

Language learning is booming, and if you're building tools for learners, nothing is more helpful than a solid dictionary app. In this post, we’ll walk through how to create a simple Spanish-English dictionary web app using public APIs — and I’ll show you a great resource that can enhance your project.

*Tech Stack *

  • HTML + CSS (basic UI)
  • JavaScript (fetch data from API)
  • Optional: Node.js/Express backend

*Bonus: * A live Spanish dictionary reference 📚

Our main goal

We’ll create a simple interface where users can type a Spanish word and get its meaning, part of speech, and pronunciation using dictionary data. We'll also point to a live dictionary site that can serve as a reference or external lookup tool.

Step 1: Setup Your HTML 

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8" />
  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  <title>Spanish Dictionary App</title>
</head>
<body>
  <h1>Spanish Dictionary</h1>
  <input type="text" id="wordInput" placeholder="Type a Spanish word..." />
  <button onclick="lookupWord()">Search</button>
  <div id="result"></div>
</body>
<script src="app.js"></script>
</html>
Enter fullscreen mode Exit fullscreen mode

Step 2: JavaScript to Fetch Meaning

We’ll use a public dictionary API like Free Dictionary API or any Spanish language endpoint you prefer. Here’s a basic fetch:

async function lookupWord() {
  const word = document.getElementById("wordInput").value.trim();
  const resultDiv = document.getElementById("result");

  resultDiv.innerHTML = "Looking up...";

  try {
    const res = await fetch(`https://api.dictionaryapi.dev/api/v2/entries/es/${word}`);
    const data = await res.json();

    if (data.title === "No Definitions Found") {
      resultDiv.innerHTML = "No meaning found.";
      return;
    }

    const entry = data[0];
    const meaning = entry.meanings[0].definitions[0].definition;
    const partOfSpeech = entry.meanings[0].partOfSpeech;

    resultDiv.innerHTML = `
      <h2>${entry.word}</h2>
      <p><strong>Part of Speech:</strong> ${partOfSpeech}</p>
      <p><strong>Meaning:</strong> ${meaning}</p>
      <p><a href="https://spanish-dictionary.com/${entry.word}" target="_blank">
        More about "${entry.word}" on Spanish-Dictionary.com
      </a></p>
    `;
  } catch (error) {
    console.error(error);
    resultDiv.innerHTML = "Error fetching the word.";
  }
}
Enter fullscreen mode Exit fullscreen mode

Why Add External Lookup?

While APIs give us structured data, sometimes learners want more — like conjugations, usage examples, regional variants, or audio pronunciation. That’s where a live site like Spanish Dictionary becomes super valuable.

*Bonus: Features You Can Add *

  • Word of the day
  • Flashcard generator using dictionary data
  • Audio pronunciation using Google TTS
  • Word frequency insights
  • Etymology for linguistics nerds

*Conclusion *

With just a few lines of code and a public API, you can spin up a Spanish dictionary web app in no time. But for a complete language learning experience, it’s great to combine your tool with a full-featured site like Spanish dictionary — which offers deep insights, human-friendly definitions, and real usage.

Top comments (0)