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 =
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(
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:
Recommended Articles