Build A Dictionary App in HTML CSS & JavaScript

14

Build A Dictionary App in HTML CSS & JavaScript

Hey friends, today in this blog, you’ll learn how to Build A Dictionary App in HTML CSS & JavaScript. In the earlier blog, I have shared how to Build A Currency Converter App in HTML CSS & JavaScript, and now it’s time to create a Dictionary App in Vanilla JavaScript.

As you all know, what is a dictionary and what it does do. In this project (Dictionary App in JavaScript), at first, on the webpage, there is only a search input and when you enter any existing word and press enter then there is shown a loading text of “Searching the meaning of…..”.

If the searched word exists then there is shown the meaning, example, synonyms, etc. of the searched word with a slide animation else there is shown a message of “Can’t find the meaning of ……”. There is also a pronunciation icon to pronounce your searched word.

If you are feeling difficulty with what I’m saying then you can watch a demo or full video tutorial of this project (Dictionary App in JavaScript).

Video Tutorial of English Dictionary App in JavaScript

 
In the video, you have seen the demo of a dictionary app and how I created it using HTML CSS & Vanilla JavaScript. I hope you liked this project and understood the basic codes of this dictionary app. You can use this project concept to make it more useful with your creativity.

To create this project, there is used API with the fetch() method of JavaScript so, if you’re too beginner in JavaScript then it may be difficult to understand you but if you liked this project and want to get source codes or files then you can easily copy or download it from the bottom of this page and learn how it is made.

But before you download the codes, let’s understand the JavaScript codes and concepts behind creating this dictionary app. At first, I got the user searched input, and then using the fetch API method I sent a get request to an API (dictionaryapi.dev) with passing the user searched word.

If the searched word exists then API returns an object of the searched word which holds many details (definition, example, synonyms) of the word else it returns a message of “Can’t find the definitions”. Once I fetched the data from API then I inserted each data into a particular HTML element.

You might like this:

Dictionary App in JavaScript [Source Codes]

To create this project (Dictionary App in JavaScript). First, you need to create three Files: HTML, CSS & JavaScript File. After creating these files just paste the following codes into your file. You can also download the source code files of this Dictionary App from the given download button.

First, create an HTML file with the name of index.html and paste the given codes in your HTML file. Remember, you’ve to create a file with .html extension.

<!DOCTYPE html>
<!-- Coding By CodingNepal - youtube.com/codingnepal -->
<html lang="en" dir="ltr">
  <head>
    <meta charset="utf-8">  
    <title>Dictionary App in JavaScript | CodingNepal</title>
    <link rel="stylesheet" href="style.css">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <!-- CDN Link for Icons -->
    <link rel="stylesheet" href="https://fonts.googleapis.com/icon?family=Material+Icons">
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.3/css/all.min.css"/>
  </head>
  <body>
    <div class="wrapper">
      <header>English Dictionary</header>
      <div class="search">
        <input type="text" placeholder="Search a word" required spellcheck="false">
        <i class="fas fa-search"></i>
        <span class="material-icons">close</span>
      </div>
      <p class="info-text">Type any existing word and press enter to get meaning, example, synonyms, etc.</p>
      <ul>
        <li class="word">
          <div class="details">
            <p>__</p>
            <span>_ _</span>
          </div>
          <i class="fas fa-volume-up"></i>
        </li>
        <div class="content">
          <li class="meaning">
            <div class="details">
              <p>Meaning</p>
              <span>___</span>
            </div>
          </li>
          <li class="example">
            <div class="details">
              <p>Example</p>
              <span>___</span>
            </div>
          </li>
          <li class="synonyms">
            <div class="details">
              <p>Synonyms</p>
              <div class="list"></div>
            </div>
          </li>
        </div>
      </ul>
    </div>

    <script src="script.js"></script>

  </body>
</html>

Second, create a CSS file with the name of style.css and paste the given codes in your CSS file. Remember, you’ve to create a file with .css extension.

/* Import Google Font - Poppins */
@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@400;500;600;700&display=swap');
*{
  margin: 0;
  padding: 0;
  box-sizing: border-box;
  font-family: 'Poppins', sans-serif;
}
body{
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 100vh;
  background: #4D59FB;
}
::selection{
  color: #fff;
  background: #4D59FB;
}
.wrapper{
  width: 420px;
  border-radius: 7px;
  background: #fff;
  padding: 25px 28px 45px;
  box-shadow: 7px 7px 20px rgba(0, 0, 0, 0.05);
}
.wrapper header{
  font-size: 28px;
  font-weight: 500;
  text-align: center;
}
.wrapper .search{
  position: relative;
  margin: 35px 0 18px;
}
.search input{
  height: 53px;
  width: 100%;
  outline: none;
  font-size: 16px;
  border-radius: 5px;
  padding: 0 42px;
  border: 1px solid #999;
}
.search input:focus{
  padding: 0 41px;
  border: 2px solid #4D59FB;
}
.search input::placeholder{
  color: #B8B8B8;
}
.search :where(i, span){
  position: absolute;
  top: 50%;
  color: #999;
  transform: translateY(-50%);
}
.search i{
  left: 18px;
  pointer-events: none;
  font-size: 16px;
}
.search input:focus ~ i{
  color: #4D59FB;
}
.search span{
  right: 15px;
  cursor: pointer;
  font-size: 18px;
  display: none;
}
.search input:valid ~ span{
  display: block;
}
.wrapper .info-text{
  font-size: 13px;
  color: #9A9A9A;
  margin: -3px 0 -10px;
}
.wrapper.active .info-text{
  display: none;
}
.info-text span{
  font-weight: 500;
}
.wrapper ul{
  height: 0;
  opacity: 0;
  padding-right: 1px;
  overflow-y: hidden;
  transition: all 0.2s ease;
}
.wrapper.active ul{
  opacity: 1;
  height: 303px;
}
.wrapper ul li{
  display: flex;
  list-style: none;
  margin-bottom: 14px;
  align-items: center;
  padding-bottom: 17px;
  border-bottom: 1px solid #D9D9D9;
  justify-content: space-between;
}
ul li:last-child{
  margin-bottom: 0;
  border-bottom: 0;
  padding-bottom: 0;
}
ul .word p{
  font-size: 22px;
  font-weight: 500;
}
ul .word span{
  font-size: 12px;
  color: #989898;
}
ul .word i{
  color: #999;
  font-size: 15px;
  cursor: pointer;
}
ul .content{
  max-height: 215px;
  overflow-y: auto;
}
ul .content::-webkit-scrollbar{
  width: 0px;
}
.content li .details{
  padding-left: 10px;
  border-radius: 4px 0 0 4px;
  border-left: 3px solid #4D59FB;
}
.content li p{
  font-size: 17px;
  font-weight: 500;
}
.content li span{
  font-size: 15px;
  color: #7E7E7E;
}
.content .synonyms .list{
  display: flex;
  flex-wrap: wrap;
}
.content .synonyms span{
  cursor: pointer;
  margin-right: 5px;
  text-decoration: underline;
}

Last, create a JavaScript file with the name of script.js and paste the given codes in your JavaScript file. Remember, you’ve to create a file with .js extension.

const wrapper = document.querySelector(".wrapper"),
searchInput = wrapper.querySelector("input"),
volume = wrapper.querySelector(".word i"),
infoText = wrapper.querySelector(".info-text"),
synonyms = wrapper.querySelector(".synonyms .list"),
removeIcon = wrapper.querySelector(".search span");
let audio;

function data(result, word){
    if(result.title){
        infoText.innerHTML = `Can't find the meaning of <span>"${word}"</span>. Please, try to search for another word.`;
    }else{
        wrapper.classList.add("active");
        let definitions = result[0].meanings[0].definitions[0],
        phontetics = `${result[0].meanings[0].partOfSpeech}  /${result[0].phonetics[0].text}/`;
        document.querySelector(".word p").innerText = result[0].word;
        document.querySelector(".word span").innerText = phontetics;
        document.querySelector(".meaning span").innerText = definitions.definition;
        document.querySelector(".example span").innerText = definitions.example;
        audio = new Audio(result[0].phonetics[0].audio);

        if(definitions.synonyms[0] == undefined){
            synonyms.parentElement.style.display = "none";
        }else{
            synonyms.parentElement.style.display = "block";
            synonyms.innerHTML = "";
            for (let i = 0; i < 5; i++) {
                let tag = `<span onclick="search('${definitions.synonyms[i]}')">${definitions.synonyms[i]},</span>`;
                tag = i == 4 ? tag = `<span onclick="search('${definitions.synonyms[i]}')">${definitions.synonyms[4]}</span>` : tag;
                synonyms.insertAdjacentHTML("beforeend", tag);
            }
        }
    }
}

function search(word){
    fetchApi(word);
    searchInput.value = word;
}

function fetchApi(word){
    wrapper.classList.remove("active");
    infoText.style.color = "#000";
    infoText.innerHTML = `Searching the meaning of <span>"${word}"</span>`;
    let url = `https://api.dictionaryapi.dev/api/v2/entries/en/${word}`;
    fetch(url).then(response => response.json()).then(result => data(result, word)).catch(() =>{
        infoText.innerHTML = `Can't find the meaning of <span>"${word}"</span>. Please, try to search for another word.`;
    });
}

searchInput.addEventListener("keyup", e =>{
    let word = e.target.value.replace(/\s+/g, ' ');
    if(e.key == "Enter" && word){
        fetchApi(word);
    }
});

volume.addEventListener("click", ()=>{
    volume.style.color = "#4D59FB";
    audio.play();
    setTimeout(() =>{
        volume.style.color = "#999";
    }, 800);
});

removeIcon.addEventListener("click", ()=>{
    searchInput.value = "";
    searchInput.focus();
    wrapper.classList.remove("active");
    infoText.style.color = "#9A9A9A";
    infoText.innerHTML = "Type any existing word and press enter to get meaning, example, synonyms, etc.";
});

That’s all, now you’ve successfully built an English Dictionary App in HTML CSS & JavaScript. If your code doesn’t work or you’ve faced any error/problem, you can contact me through the contact page.

This project is based on API but you don’t need to signup anywhere and pass the API key to use this dictionary app. I have used the free API (dictionaryapi.dev) for this project and to use this API there is no need for signup or API key. So, just download the source code file from the given download button, extract the file, and use it.

 

Previous articleJavaScript Button with Increment and Decrement Number
Next articleCreate Stopwatch in HTML CSS and JavaScript

14 COMMENTS

  1. Dear Friends,
    May we have a favour from you to add a Sanskrit Dictionary website by using the same method?
    And this is the website:

    Thank you very much for your tutorial and further instructions.
    With Respect and Gratitude,
    Friends

  4. The dictionary is not working correctly, can you please check if the link, i.e. “https://api.dictionaryapi.dev/api/v2/entries/en/${word}”, is correct or not?
    (P.S. I know that ${word} is not part of the link, but just in case)

    • No, you’ve to use backtick “ not double quotes `https://api.dictionaryapi.dev/api/v2/entries/en/${word}`

    • I did that but it didn’t solve the problem, I even downloaded the files to try it again, it’s not working. Turns out that api.dictionaryapi.dev is offline! Can you please try to use another API instead?

  6. There are bugs especially if you click synonyms.. and then you cannot type a new word. The dictionary does not like the very house, I suppose 🙂

LEAVE A REPLY

Please enter your comment!
Please enter your name here