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

in STEMGeeks4 months ago

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.


<!DOCTYPE html>
<html lang="en">
    <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">
    <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 class="fetched">
    <script src="main.js"></script>

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


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.


const url = ""

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;
    .then((res) => res.json())
    .then(data => {
        fecthed.innerHTML= `
        <div class="word">
        <div class="others">
        <p class="w-meaning">
          <b>Definition:</b>  ${data[0].meanings[0].definitions[0].definition}
        <p class="w-explain">
       <b>Example:</b> ${data[0].meanings[0].definitions[0].example}
        <p class="w-explain">
       <b>Synonyms:</b> ${data[0].meanings[0].synonyms}
        <p class="w-explain">
       <b>Antonyms:</b> ${data[0].meanings[0].antonyms}
    .catch(()=> {
        fecthed.innerHTML = `<h2>word not found</h2>`

button.addEventListener("click", getWords);


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


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

 4 months ago Reveal Comment