Build a Dictionary App in Tailwind CSS

Last Updated : 05 Mar, 2024

The Dictionary App is a simple web application built using Tailwind CSS for styling. It allows users to enter a word, search for its definition, and clear the input field. The app fetches definitions from a dictionary API and displays them on the page.

Screenshot-2024-02-26-161303

Approach :

Create an HTML file and include the necessary Tailwind CSS CDN link in the head section. Define the main container for the game using Tailwind CSS classes to style it.
Inside the main container, create an input field for the user to enter a word. Add two buttons: one for searching the word and another for clearing the input field.
Attach event listeners to the search and clear buttons using JavaScript.When the search button is clicked, get the value from the input field, trim it, and call the fetchDefinition function.
When the clear button is clicked, clear the input field and the definition display.
Define the fetchDefinition function that takes the word as a parameter.Inside this function, use the fetch API to make a GET request to the dictionary API with the word. Parse the response as JSON and check if the title is ‘No Definitions Found’. If so, display a message indicating no definition was found. If a definition is found, extract the definition from the response and display it.

Example: Implementation to design a Dictionary App in Tailwind CSS

HTML

<!DOCTYPE html>
<html lang="en">
 
<head>
    <meta charset="UTF-8">
    <meta name="viewport"
          content="width=device-width, initial-scale=1.0">
    <title>The Dictionary App</title>
    <link href=
"https://cdn.jsdelivr.net/npm/tailwindcss@2.2.19/dist/tailwind.min.css"
          rel="stylesheet">
</head>
 
<body class="bg-gray-100 min-h-screen flex 
             flex-col justify-center items-center">
    <div class="max-w-md w-full p-8 bg-white rounded-lg 
                shadow-lg border-2 border-green-400">
        <h1 class="text-3xl font-semibold text-center mb-8">
              Dictionary App
          </h1>
        <div class="mb-4">
            <label for="word-input"
                   class="block text-sm font-medium 
                          text-gray-700">
                  Enter a Word:
              </label>
            <input type="text" id="word-input"
                class="w-full border border-gray-300 
                       rounded-md py-2 px-3 
                       focus:outline-none 
                       focus:border-blue-500">
        </div>
        <div id="definition"
             class="text-lg font-semibold mb-4">
          </div>
        <button id="search-btn"
            class="px-6 py-3 bg-blue-500 text-white 
                   rounded-md hover:bg-blue-600 
                   focus:outline-none">
              Search
          </button>
        <button id="clear-btn"
                class="px-6 py-3 ml-4 bg-red-500 
                       text-white rounded-md 
                       hover:bg-red-600 focus:outline-none">
              Clear
          </button>
    </div>
    <script>
        document.getElementById('search-btn')
              .addEventListener('click', () => {
            const word = 
                  document.getElementById('word-input').value.trim();
            if (word !== '') {
                fetchDefinition(word);
            }
        });
        document.getElementById('clear-btn')
              .addEventListener('click', () => {
            document.getElementById('word-input').value = '';
            document.getElementById('definition').textContent = '';
        });
        async function fetchDefinition(word) {
            try {
                const response = await fetch(
`https://api.dictionaryapi.dev/api/v2/entries/en/${word}`);
                const data = await response.json();
                if (data.title && data.title === 'No Definitions Found') {
                        document.getElementById('definition').textContent = 
                      'No definition found for this word.';
                } else {
                    const definition = data[0].meanings[0]
                        .definitions[0].definition;
                    document.getElementById('definition').textContent = 
                          `Definition: ${definition}`;
                }
            } catch (error) {
                console.error('Error fetching definition:', error);
                document.getElementById('definition').textContent = 
                      'An error occurred while fetching definition.';
            }
        }
    </script>
</body>
 
</html>