Create a Dictionary App using HTML CSS and JavaScript

Last Updated : 20 Nov, 2023

In this article, we will be building a very simple Dictionary app with the help of an API, HTML, CSS, and JavaScript. Users can search for word definitions by entering a word in the input field and clicking the search button. The application makes an API request to fetch the word’s definition and displays it along with the part of speech and an example if available. It uses HTML, CSS, JavaScript, and the DictionaryAPI to provide a simple and interactive way to look up word meanings online.

Preview

Approach

Utilizes HTML CSS and JavaScript to create an interactive web-based Digital Dictionary.
Users enter a word in the input field and click a search button, triggering a JavaScript function. This function handles user input validation and sends an API request to DictionaryAPI to retrieve word definitions.
Upon receiving the API response, it updates the webpage with the word’s definition, part of speech, and example (if available).
The use of asynchronous JavaScript ensures smooth user interaction, while the FontAwesome icons and SVG add visual elements. Overall, this approach integrates front-end technologies, API integration, and user input handling to create a functional digital dictionary.

Example: This example describes the basic implementation of the dictionary using HTML, CSS, and Javascript.

HTML

<!DOCTYPE html> 
<html lang="en"> 
  
<head> 
    <meta charset="UTF-8"> 
    <meta name="viewport" 
          content="width=device-width, 
                    initial-scale=1.0"> 
    <link rel="stylesheet" 
          href="style.css"> 
    <link rel="stylesheet" 
          href= 
"https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.3/css/all.min.css" /> 
    <title>Dictionary Application</title> 
</head> 
  
<body> 
    <h2>Digital Dictionary</h2> 
    <div class="section1"> 
        <input type="text" 
               class="inputValue"
               placeholder="Search..."> 
        <button class="btn" 
                onclick="handleClick()"> 
            <i class="fa fa-spinner fa-spin"></i> 
            <svg xmlns="http://www.w3.org/2000/svg"
                 height="1em" 
                 class="search" 
                 viewBox="0 0 512 512"> 
                <style> 
                    svg { 
                        fill: #ffffff 
                    } 
                </style> 
                <path d= 
"M416 208c0 45.9-14.9 88.3-40 122.7L502.6 457.4c12.5 12.5 12.5 32.8 0 45.3s-32.8 12.5-45.3 0L330.7 376c-34.4 25.2-76.8 40-122.7 40C93.1 416 0 322.9 0 208S93.1 0 208 0S416 93.1 416 208zM208 352a144 144 0 1 0 0-288 144 144 0 1 0 0 288z" /> 
            </svg> 
        </button> 
    </div> 
    <div class="section2"
         style="display: none;"> 
        <h2 class="value"></h2> 
        <h4>Parts of speech:</h4> 
        <p class="partOfSpeech"></p> 
        <h4>Definition:</h4> 
        <p class="definition"></p> 
        <h4 class="exampleLabel"> 
              Example: 
          </h4> 
        <p class="example"></p> 
    </div> 
    <script src="script.js"></script> 
</body> 
  
</html>

CSS

/*style.css*/
@import url( 
"https://fonts.googleapis.com/css2?family=Pacifico&display=swap"); 
@import url( 
"https://fonts.googleapis.com/css2?family=Poppins:ital,wght@0,200;0,400;0,600;0,800;1,300&display=swap"); 
  
* { 
    padding: 0; 
    margin: 0; 
    box-sizing: border-box; 
} 
  
h2 { 
    text-align: center; 
    font-size: 3em; 
    font-family: "Pacifico", cursive; 
    color: #4db33d; 
    padding: 0.5em; 
} 
  
.section1 { 
    display: flex; 
    justify-content: center; 
    align-items: center; 
} 
  
.btn { 
    padding: 10px 12px; 
    padding-bottom: 6px; 
    line-height: 20px; 
    outline: none; 
    border: none; 
    background: #4db33d; 
    cursor: pointer; 
    color: white; 
    border-radius: 4px; 
    margin-left: 10px; 
    transition: all 0.4s; 
    height: 34.325px; 
} 
  
.btn i { 
    display: none; 
    margin-bottom: 6.5px; 
} 
  
.btn:hover { 
    background-color: #3e9031; 
} 
  
.inputValue { 
    line-height: 20px; 
    padding: 7px; 
    border: 1px solid #afabab; 
    border-radius: 4px; 
    width: 250px; 
    outline: none; 
    font-size: 15px; 
} 
  
.section2 { 
    max-width: 370px; 
    width: calc(100% - 20px); 
    margin: auto; 
} 
  
.section2 .value { 
    cursor: pointer; 
    text-align: left; 
    margin: 0; 
    padding: 0; 
    color: black; 
    text-decoration: underline; 
    font-size: 35px; 
} 
  
h4 { 
    color: #4DB33D; 
} 
  
.section2 p { 
    text-align: justify; 
}

Javascript

// script.js 
const handleClick = async () => { 
    const inputValue = 
        document.querySelector('.inputValue').value; 
    if (!inputValue || inputValue == '') { 
        alert("Please Enter any word to Search"); 
        return; 
    } 
    document.querySelector('.fa.fa-spinner.fa-spin') 
        .style.display = "block"; 
    document.querySelector('.search') 
        .style.display = 'none'; 
    const url = 
"https://...example.com" + inputValue; 
    try { 
        const response = await fetch(url); 
        const result = await response.text(); 
        const responseObject = JSON.parse(result); 
        document.querySelector('.section2') 
            .style.display = "block"; 
        document.querySelector('.value') 
            .innerText = inputValue; 
        document.querySelector('.partOfSpeech') 
            .innerText = responseObject[0]. 
                meanings[0].partOfSpeech; 
        document.querySelector('.definition') 
            .innerText = 
            responseObject[0].meanings[0] 
                .definitions[0].definition; 
        if (responseObject[0].meanings[0] 
            .definitions[0].example) { 
            document.querySelector('.exampleLabel') 
                .style.display = "block"; 
            document.querySelector('.example') 
                .style.display = "block"; 
            document.querySelector('.example') 
                .innerText = responseObject[0] 
                    .meanings[0].definitions[0].example; 
        } else { 
            document.querySelector('.exampleLabel') 
                .style.display = "none"; 
            document.querySelector('.example') 
                .style.display = "none"; 
        } 
  
    } catch (error) { 
        console.log(error); 
        alert("Please Check Your Spelling! Try Again!"); 
        document.querySelector('.section2') 
            .style.display = "none"; 
    } 
    document.querySelector('.fa.fa-spinner.fa-spin') 
        .style.display = "none"; 
    document.querySelector('.search') 
        .style.display = 'block'; 
} 
  
inputElement.addEventListener('input', function () { 
    const inputValue = 
        document.querySelector('.inputValue').value; 
    if (/[^a-zA-Z0-9]/.test(inputValue)) { 
        alert("Only Alphanumeric characters are allowed."); 
        inputElement.value = inputValue 
            .replace(/[^a-zA-Z0-9]/g, ''); 
    } 
});