Dictionary Application using JavaScript and API Source Code Free Download

Language

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

Dictionary Application using Pure JS and Dictionary API

Search Word Form

Dictionary Application using Pure JS and Dictionary API

Search Word Result

Dictionary Application using Pure JS and Dictionary API

Example #1

Dictionary Application using Pure JS and Dictionary API

Example #2

Dictionary Application using Pure JS and Dictionary API

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.

Add new comment