How to build a Dictionary webapp with HTML, CSS, AND JAVASCRIPT

avatar

Hello great people, this is another short tutorial on creating a mini-apps. Today I used a public dictionary API to create a dictionary website with HTML, CSS and JavaScript. The structure is like the previous meme generator that I posted. If you are still learning JavaScript(we keep learning till the end of the earth), mini projects like this will help you to improve faster. Well, that is my opinion, and it is OK to disagree with it.

Well, I have to apologize for the kind of classes I used. I have issues naming classes and variables. There are times I name variables like "kissIt" or "damnIdontKnow". I know I am not the only one on this.

Well, lemme get to the main deal, below are the simple HTML elements for the project.

HTML

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" href="style.css">
    <title>Dictionary</title>
</head>
<body>
    <div class="container">
       <div class="search-cont">
        <input type="text" name="" placeholder="Search For Words" id="put-word">
        <button id="search-button" class="search-button">Search</button>
       </div>
       <div class="fetched">
    </div>
    </div>
    <script src="main.js"></script>
</body>
</html>

This is the CSS for styling. It is just a basic styled project.

CSS


body {
  background: #22882999;
}

.container {
  background: #fff;
  width: 80vmin;
  position: absolute;
  transform: translate(-50%, -50%);
  top: 50%;
  left: 50%;
  padding: 80px 50px;
}

.search-cont {
  width: 100%;
  display: flex;
  justify-content: space-between;
}

.search-cont input {
  padding: 5px;
  width: 70%;
  border: none;
  outline: none;
  border-bottom: 3px solid #22882999;
  font-size: 16px;
}

.search-cont button {
  padding: 5px 0;
  width: 25%;
  background: #22882999;
  border: none;
  outline: none;
  color: #fff;
}

.fetched {
  position: relative;
}

.fetched .word {
  display: flex;
  justify-content: space-between;
  margin-top: 50px;

}

.fetched .others {
  display: flex;
  gap: 10px;
  margin: 5px 0 20px 0;
  color: #8d8b8b;
}

.w-explain {
  margin-top: 20px;
}

This is where the major work is. I used the url as the variable for the API link and fetched it in the getWords function. Also, the API returns data based on the word searched and that is why I had to get the value of the form here let inputWord = document.querySelector("#put-word").value; and fetched data based on the searched word. I used innerHTML to display the data on the page through the JavaScript file. The data for each word searched are not the same, but I only fetched the partOfSpeech, phonetic, definition, example, synonyms and antonyms, but not all words have all of these, so there are words that will return undefined. Aside from that, everything works fine. Then if you search for words that are not in the database, the response will be word no found as shown in the .catch method.

JAVASCRIPT

const url = "https://api.dictionaryapi.dev/api/v2/entries/en/"

const fecthed = document.querySelector(".fetched");
const sound = document.querySelector("#sound");
const button = document.querySelector(".search-button")

const getWords = () => {
    let inputWord = document.querySelector("#put-word").value;
    fetch(`${url}${inputWord}`)
    .then((res) => res.json())
    .then(data => {
        fecthed.innerHTML= `
        <div class="word">
        <h3>${inputWord}</h3>
        </div>
        <div class="others">
            <p>${data[0].meanings[0].partOfSpeech}</p>
            <p>${data[0].phonetic}</p>
        </div>
        <p class="w-meaning">
          <b>Definition:</b>  ${data[0].meanings[0].definitions[0].definition}
        </p>
        <p class="w-explain">
       <b>Example:</b> ${data[0].meanings[0].definitions[0].example}
        </p>
        <p class="w-explain">
       <b>Synonyms:</b> ${data[0].meanings[0].synonyms}
        </p>
        <p class="w-explain">
       <b>Antonyms:</b> ${data[0].meanings[0].antonyms}
        </p>
        `
        })
    .catch(()=> {
        fecthed.innerHTML = `<h2>word not found</h2>`
    });
}

button.addEventListener("click", getWords);

Result

Thanks for reading.

Michael B, A.K.A Tykee, I am a software developer, writer and blockchain enthusiast. I write about finance, programming, tech and lifestyle. My contents are my opinions

Posted with STEMGeeks

neoxian cent ctp hive-engine programming vyb coding stem
0
0
0.000
2 comments
avatar

Thanks for your contribution to the STEMsocial community. Feel free to join us on discord to get to know the rest of us!

Please consider delegating to the @stemsocial account (85% of the curation rewards are returned).

You may also include @stemsocial as a beneficiary of the rewards of this post to get a stronger support. 
 

0
0
0.000
Reply
avatar

nice work but the next time you cuold use try catch to handle the errores too :D

0
0
0.000
Reply