ADVERTISEMENT

Dictionary App Using HTML,CSS and JavaScript

Telegram Group Join Now

ADVERTISEMENT

Dictionary App Using HTML,CSS and JavaScript

Hey, friends today we will see how to make this super interesting dictionary app using HTML, CSS, and JavaScript. The demo video is at the bottom of the page.

ADVERTISEMENT

ADVERTISEMENT

Dictionary App Using HTML,CSS and JavaScript

Now first let’s see the general method to use for this project. When the page is loaded, you can enter any word and if it’s available, the definition will pop up. Sometimes, an example sentence would come too.

ADVERTISEMENT

Now let’s see the source codes:

ADVERTISEMENT

HTML Code For Dictionary App 

Paste the codes below :

  <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>

The output would be:

Portfolio Website using HTML and CSS (Source Code)

ADVERTISEMENT

 

Dictionary App Using HTML,CSS and JavaScript
Dictionary App Using HTML,CSS and JavaScript

 

 

ADVERTISEMENT

CSS Code For Dictionary App 

Paste the codes below :

ADVERTISEMENT

* {
  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: cyan;
}

::selection {
  color: #fff;
  background: cyan;
}

.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 cyan;
}

.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: cyan;
}

.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 cyan;
}

.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;
}

Now we add JavaScript for functionality.

Vertical Image Slider Using HTML,CSS & JavaScript

JavaScript Code For Dictionary App 

Paste the codes below :

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("https:" + 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.";
});

100+ JavaScript Projects With Source Code ( Beginners to Advanced)

Final Output Of Dictionary App Using HTML,CSS and JavaScript

ADVERTISEMENT

Dictionary App Using HTML,CSS and JavaScript
Dictionary App Using HTML,CSS and JavaScript

 

ADVERTISEMENT

And that’s all for this project. Thanks for reading and goodbye!

ADVERTISEMENT

Written by: @codingporium

ADVERTISEMENT

ADVERTISEMENT

ADVERTISEMENT

Telegram Group Join Now

Share on:

Leave a Comment

ADVERTISEMENT

ADVERTISEMENT

ADVERTISEMENT