Dictionary App Development with HTML, CSS, and JavaScript

Building a Dictionary App is an excellent project for honing web development skills. This app will allow users to enter a word and get its definition. We’ll use HTML for the structure, CSS for styling, and JavaScript to fetch and display the word definitions from an API.

HTML Code:

<!doctype html>
<html lang="en">

<head>
    <!-- Required meta tags -->
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">

    <!-- Font Awesome Icons  -->
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.1/css/all.min.css"
        integrity="sha512-+4zCK9k+qNFUR5X+cKL9EIR+ZOhtIloNl9GIKS57V1MyNsYpYcUrUeQc9vNfzsWfV28IaLL3i96P9sdNyeRssA=="
        crossorigin="anonymous" />

    <!-- CSS -->
    <link rel="stylesheet" href="style.css">

    <title>Dictionary App
    </title>
</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>

Let us see the output before we add some styling

Now let us add CSS:

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

Javacript:

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

Conclusion

Building a Dictionary App with HTML, CSS, and JavaScript has been a valuable journey in web development, merging frontend structure, styling, and interactive functionality. Through this project, we’ve demonstrated the seamless integration of these three core technologies and learned how to connect to an external API to provide real-time data to users.

This project provided an opportunity to:

Structure Content Using HTML: We created a clean, user-friendly interface, with a text input for searching words and a button to trigger the search functionality. The simple HTML structure made it easy to add additional features, such as displaying part-of-speech categories and multiple definitions for each word.
Enhance Presentation with CSS: Through CSS, we added styling to make the app visually engaging and accessible. Styling choices like centering the content, using hover effects, and incorporating subtle shadow effects contribute to a better user experience and reinforce the importance of design in application development.
Add Interactivity with JavaScript: JavaScript added life to the app by fetching definitions in response to user input. We used asynchronous functions to call an external API (Free Dictionary API), handle errors effectively, and dynamically update the HTML to display the retrieved definitions. JavaScript not only enabled data fetching but also provided the logic for user feedback, ensuring the app responded meaningfully to various scenarios, such as empty input or incorrect entries.
Work with APIs: By incorporating the Free Dictionary API, we saw firsthand how APIs make it possible to access vast resources without storing all data locally. We handled HTTP responses, parsed JSON data, and learned to dynamically generate HTML based on external data—a vital skill for modern web development.
Understand Error Handling and UX: Good user experience goes beyond aesthetics; it includes handling user input errors, such as incorrect or blank entries, with clear feedback. Through error handling, we made the app more robust and user-friendly, showing the importance of preparing for unexpected conditions.

In conclusion, this Dictionary App project encapsulates several essential web development skills. From structuring content and fetching real-time data to handling errors and enhancing user experience, we covered a range of techniques applicable to building more complex applications. For those looking to expand further, possible next steps include adding voice input capabilities, displaying synonyms, or providing multilingual definitions. This project serves as a solid foundation for developing rich, interactive web applications that connect users with real-time data, a skillset that is increasingly important in today’s digital landscape.

CodeMagnet

CodeMagnet

Leave a ReplyCancel reply

Python Humanize Package Tutorial: Complete Guide

Caesar Cipher in Python: Complete Guide with Examples, Code, and Explanation

Python tqdm Tutorial: Easily Track Loop Progress with Examples

Trending

Python Humanize Package Tutorial: Complete Guide

Caesar Cipher in Python: Complete Guide with Examples, Code, and Explanation

Python tqdm Tutorial: Easily Track Loop Progress with Examples

AI-Powered Healthcare Diagnosis with Python: A Complete Guide

CodeMagnet

Subscribe to CodeMagnet! 🔔

Dictionary App Development with HTML, CSS, and JavaScript

Conclusion

Share this:

Like this:

Author

Leave a ReplyCancel reply

Trending