Build a Dictionary App in Tailwind CSS
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.
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 thefetch
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 > |
Output: