Want more tutorials? Request!

How To Build A Dictionary in HTML CSS JavaScript

Hey friends, today in this blog, you’ll learn how to Build A Dictionary App in HTML CSS & JavaScript. Now it’s time to create a Dictionary App in Vanilla JavaScript.

you have seen the demo of a word reference application and how I made it utilizing HTML CSS and Vanilla JavaScript. I trust you preferred this undertaking and comprehended the essential codes of this word reference application. You can utilize this task idea to make it more helpful with your inventiveness.

To make this task, there is utilized API with bring() strategy for JavaScript along these lines, assuming that you're too amateur in JavaScript then it could be hard to get you however in case you preferred this venture and need to get source codes or documents then you can undoubtedly duplicate or 

In any case, before you go to download the codes, we should comprehend the JavaScript codes and ideas driving making this word reference application. From the outset, I got the client looked through info, and afterward utilizing the get API technique I sent a get solicitation to an API (dictionaryapi.dev) with passing the client looked through word.

On the off chance that the looked through word exists then API returns an object of the looked through word which holds many subtleties (definition, model, equivalents) of the word else it returns a message of "Can't track down the definitions". When I got the information from API then I embedded every information into a specific HTML component.

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.

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 SR7THEMES- https://SR7Themes.eu.org/ -->
<html lang="en" dir="ltr">
    <meta charset="utf-8">  
    <title>Dictionary App in JavaScript | SR7Themes </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"/>
    <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>
      <p class="info-text">Type any existing word and press enter to get meaning, example, synonyms, etc.</p>
        <li class="word">
          <div class="details">
            <span>_ _</span>
          <i class="fas fa-volume-up"></i>
        <div class="content">
          <li class="meaning">
            <div class="details">
          <li class="example">
            <div class="details">
          <li class="synonyms">
            <div class="details">
              <div class="list"></div>

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


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:[email protected];500;600;700&display=swap');
  margin: 0;
  padding: 0;
  box-sizing: border-box;
  font-family: 'Poppins', sans-serif;
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 100vh;
  background: #4D59FB;
  color: #fff;
  background: #4D59FB;
  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, make a JavaScript record with the name of script.js and paste the given codes in your JavaScript document. Keep in mind, you've to make a document with .js augmentation.

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){
        infoText.innerHTML = `Can't find the meaning of <span>"${word}"</span>. Please, try to search for another word.`;
        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("https:" + result[0].phonetics[0].audio);

        if(definitions.synonyms[0] == undefined){
            synonyms.parentElement.style.display = "none";
            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){
    searchInput.value = word;

function fetchApi(word){
    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){

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

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

That is all, presently you've effectively constructed an English Dictionary App in HTML CSS and JavaScript. Assuming your code doesn't work or you've confronted any blunder/issue, you can get in touch with me through the contact page.

About the Author

Hey there! My name is Saim Rahmani aka Saim, a professional Web Designer, Graphic Designer, UI / Blogger as well as Content Creator. I love to Code

Buy Me A Coffee

Post a Comment

Cookie Consent
We serve cookies on this site to analyze traffic, remember your preferences, and optimize your experience.
More Details
It seems there is something wrong with your internet connection. Please connect to the internet and start browsing again.
AdBlock Detected!
We have detected that you are using adblocking plugin in your browser.
The revenue we earn by the advertisements is used to manage this website, we request you to whitelist our website in your adblocking plugin.
Site is Blocked
Sorry! This site is not available in your country.