This simple project is a Dictionary Application. It is a web-based application that allows users to search for word definitions. This project was mainly developed using Pure JavaScript and Dictionary API. It has a simple and pleasant user interface using a Custom Stylesheet (CSS) script for the design of the page layout. This Dictionary Application is easy-to-use.

How does this Dictionary Application work?

This Dictionary Application is a straightforward application that provides the searched word definitions as the primary purpose. The application is using a Free Dictionary API (https://dictionaryapi.dev/). The users can simply enter the word they wanted to check and upon submitting the form or clicking the Search Button, the result will be queried from the API using JavaScript Fetch API and return the different definitions of the word in every part of speech of a searched word. The result wrapper panel also includes or contains the search word and its phonetic. In case the search word does not have any phonetic, the phonetic text field will be shown blank and if the searched word is unrecognized by the Dictionary API, the application will return a dialog message or box that says "The word entered is Unknown".

Features and functionalities

This project contains the following features and functionalities:

• Search Word Form
  
• Search Word Result Wrapper
  
• Display the first list item result of the word FROM Dictionary API
  
• Display the different definitions in each word's part of speech (noun, verb, etc.)
  

Technologies

This Dictionary Application was developed using the following technologies:

• VS Code Editor
  
• HTML
  
• CSS
  
• JavaScript
  
• JS Fetch API
  
• Free Dictionary API (https://dictionaryapi.dev/)
  
• Google Font
  

How does the Free Dictionary API work or be implemented?

Here's the JS code I used for getting the searched word definitions and other details using JS Fetch API and Free Dictionary API.

1. // Form Selector
   
2. const
   
   form =
   
   document.getElementById
   
   (
   
   'search-word-form'
   
   )
   
3. // result wrapper selector
   
4. const
   
   resultWrapper =
   
   document.getElementById
   
   (
   
   'result-wrapper'
   
   )
   
5. 
   
6. //Result word and phonetic element
   
7. const
   
   result =
   
   document.createElement
   
   (
   
   'div'
   
   )
   
8. result.id
   
   =
   
   'result'
   
9. result.innerHTML
   
   =
   
   `<
   
   h3 id=
   
   "result-word-text"
   
   ></
   
   h3>
   
10. <
    
    h5 id=
    
    "result-word-phonetic"
    
    ></
    
    h5>
    
11. <
    
    hr>
    
    `;
    
12. 
    
13. // https://dictionaryapi.dev/ API for dictionary
    
14. const
    
    dictAPI =
    
    `https:
    
    //api.dictionaryapi.dev/api/v2/entries/en/`
    
15. 
    
16. // Search Word
    
17. form.addEventListener
    
    (
    
    'submit'
    
    ,
    
    function
    
    (
    
    e)
    
    {
    
18. e.preventDefault
    
    (
    
    )
    
19. // get the search word
    
20. var
    
    search =
    
    document.getElementById
    
    (
    
    'search-word'
    
    )
    
    .value
    
21. // join search word to dictionary API URL
    
22. var
    
    apiURL =
    
    `${
    
    dictAPI}
    
    ${
    
    search}
    
    `
    
23. 
    
24. // Get word deails
    
25. fetch(
    
    apiURL)
    
26. .then
    
    (
    
    response =>
    
    {
    
27. // return response data as JSON
    
28. return
    
    response.json
    
    (
    
    )
    
29. }
    
    )
    
30. .then
    
    (
    
    data =>
    
    {
    
31. // search word recognized
    
32. 
    
33. // update result wrapper to empty temporarily
    
34. resultWrapper.innerHTML
    
    =
    
    ``
    
35. // Clone result elements
    
36. var
    
    res =
    
    result.cloneNode
    
    (
    
    true
    
    )
    
37. // display searched word
    
38. res.querySelector
    
    (
    
    '#result-word-text'
    
    )
    
    .innerText
    
    =
    
    data[
    
    0
    
    ]
    
    .word
    
39. 
    
40. // display searched word phonetic
    
41. if
    
    (
    
    !!
    
    data[
    
    0
    
    ]
    
    .phonetic
    
    )
    
    {
    
42. res.querySelector
    
    (
    
    '#result-word-phonetic'
    
    )
    
    .innerText
    
    =
    
    data[
    
    0
    
    ]
    
    .phonetic
    
43. }
    
    else
    
    {
    
44. if
    
    (
    
    !!
    
    data[
    
    0
    
    ]
    
    .phonetics
    
    )
    
    {
    
45. Object
    
    .values
    
    (
    
    data[
    
    0
    
    ]
    
    .phonetics
    
    )
    
    .map
    
    (
    
    phonetic=>
    
    {
    
46. if
    
    (
    
    !!
    
    phonetic.text
    
    )
    
    {
    
47. res.querySelector
    
    (
    
    '#result-word-phonetic'
    
    )
    
    .innerText
    
    =
    
    phonetic.text
    
48. return
    
    false
    
    ;
    
49. }
    
50. }
    
    )
    
51. }
    
52. }
    
53. Object
    
    .values
    
    (
    
    data[
    
    0
    
    ]
    
    .meanings
    
    )
    
    .map
    
    (
    
    meaning =>
    
    {
    
54. var
    
    meanings =
    
    ``
    
55. // display searched word part of speech
    
56. meanings =
    
    `<
    
    h5 class
    
    =
    
    "partOfSpeech"
    
    >
    
    ${
    
    meaning.partOfSpeech
    
    }
    
    </
    
    h5>
    
    `
    
57. Object
    
    .values
    
    (
    
    meaning.definitions
    
    )
    
    .map
    
    (
    
    definition =>
    
    {
    
58. // display searched word meaning
    
59. meanings+=
    
    `<
    
    p class
    
    =
    
    "meaning"
    
    >
    
    ${
    
    definition.definition
    
    }
    
    </
    
    p>
    
    `
    
60. }
    
    )
    
61. res.innerHTML
    
    +=
    
    `<
    
    div class
    
    =
    
    "result-item"
    
    >
    
    ${
    
    meanings}
    
    </
    
    div>
    
    `
    
62. }
    
    )
    
63. //updating the result wrapper with the actual result
    
64. resultWrapper.appendChild
    
    (
    
    res)
    
65. }
    
    )
    
66. .catch
    
    (
    
    err=>
    
    {
    
67. // show dialog box if entered or searched word in unknown
    
68. alert(
    
    "The word entered is Unknown."
    
    )
    
69. console.error
    
    (
    
    err)
    
70. }
    
    )
    
71. }
    
    )
    

Snapshots

Here are some snapshots of this Dictionary APP page layout and examples.

Page UI

Search Word Form

Search Word Result

Example #1

Example #2

The Dictionary Application complete source code zip file is available on this website and it is free to download. Feel free and modify the source code to do some experiments or to enhance the application. This simple project was mainly developed for educational purposes only.

How to Run?

1. Download the provided source code zip file. (download button is located below)
   
2. Extract the downloaded source code zip file.
   
3. Locate the index.html file in the extracted source code directory.
   
4. Browse the index file with your preferred browser.
   

DEMO VIDEO

That's it! I hope this Dictionary Application using JavaScript and Free Dictionary API Source Code will help you with what you are looking for and will be useful for your current and future web application projects.

Explore more on this website for more Tutorials and Free Source Codes.

Enjoy Coding =)

Note: Due to the size or complexity of this submission, the author has submitted it as a .zip file to shorten your download time. After downloading it, you will need a program like Winzip to decompress it.

Virus note: All files are scanned once-a-day by SourceCodester.com for viruses, but new viruses come out every day, so no prevention program can catch 100% of them.

FOR YOUR OWN SAFETY, PLEASE:

1. Re-scan downloaded files using your personal virus checker before using it.

2. NEVER, EVER run compiled files (.exe's, .ocx's, .dll's etc.)--only run source code.

Download