Dictionary App Using HTML CSS And Javascript

Hey everybody hope you are all fine, today we are going to create a dictionary App using HTML CSS and JavaScript. It’s a very helpful and useful project, inside the application it has many features such as dark and light mode, responsive, part of speech, meanings with usage, and so on.

In the vast landscape of web development, creating a dictionary app using HTML, CSS, and JavaScript is an excellent starting point for beginners. This project allows you to amalgamate these fundamental technologies to craft a user-friendly and interactive application. In this article, we’ll guide you through the process of building a basic dictionary app, breaking down each step into manageable components.

before moving the codes, I’m going to share with you the video tutorial that I made, you can watch it and learn everything from scratch. I hope the video is helpful for you, If you face a problem you can check out the source code mentioned below.

Dictionary App Using HTML CSS And Javascript

Inside the video, I’m going to use HTML CSS, and JavaScript technologies to create that project from scratch. After that, I’m going to use the images that help us to design the application.

I hope you’ve watched the complete tutorial, you’ve got a lot of ideas from it and you can create different types of applications using HTML CSS, and JavaScript. Also, you can use different types of API to create it application as well, because inside the project have API usage.

You May Also Like:

• Image Search App with HTML CSS and JavaScript
• Build a Random Quote Generator with JavaScript
• Building a Chat Application with HTML CSS and JavaScript
• Currency Converter App Using HTML CSS and Javascript
• Movie App Using HTML CSS and JavaScript

At the heart of your dictionary app lies HTML, the markup language that structures the content. Begin by designing the layout with dedicated sections for the search bar, display area, and any additional features you may want to incorporate. HTML serves as the backbone of your application, defining the essential elements that make up its visual structure.

<header>
      <div class="container">
        <nav>
          <div class="logo">
            <img src="./images/logo.svg" alt="" />
          </div>
          <div class="content">
            <select>
              <option value="sans-serif">Sans Sarif</option>
              <option value="serif">Sarif</option>
              <option value="monospace">Mono</option>
            </select>

            <label class="switch">
              <input type="checkbox" />
              <span class="slider round"></span>
            </label>
            <img src="./images/icon-moon.svg" alt="" />
          </div>
        </nav>

        <form>
          <input type="text" placeholder="Search the Word" />
          <img src="./images/icon-search.svg" class="search" />
        </form>
      </div>
    </header>

    <section id="article">
      <div class="container">
        <div class="disctonary_content">
          <div class="section">
            <h2>Keyboard</h2>
            <p>/ˈkiːbɔːd/</p>
          </div>
          <svg
            xmlns="http://www.w3.org/2000/svg"
            width="75"
            height="75"
            viewBox="0 0 75 75"
          >
            <g fill="#A445ED" fill-rule="evenodd">
              <circle cx="37.5" cy="37.5" r="37.5" opacity=".25" />
              <path d="M29 27v21l21-10.5z" />
            </g>
          </svg>
        </div>

        <div class="noun">
          <h3 class="partofSeachNoun">noun</h3>
          <p>Meaning</p>
          <ul class="meanings">
            <li>
              (etc.) A set of keys used to operate a typewriter, computer etc.
            </li>
            <li>
              A component of many instruments including the piano, organ, and
              harpsichord consisting of usually black and white keys that cause
              different tones to be produced when struck.
            </li>
            <li>
              A device with keys of a musical keyboard, used to control
              electronic sound-producing devices which may be built into or
              separate from the keyboard device.
            </li>
          </ul>
          <div class="synonms">
            <p>Synonyms <span class="syn">electornic keyboard</span></p>
          </div>
        </div>

        <div class="verb">
          <div class="verbContent">
            <h3>verb</h3>
            <p>Meaning</p>
            <ul class="meanings">
              <li>To type on a computer keyboard.</li>
              <li>“Keyboarding is the part of this job I hate the most.”</li>
            </ul>
          </div>
        </div>
      </div>
    </section>

With HTML providing the structure, CSS steps in to elevate the visual appeal of your dictionary app. Leverage styles to define colors, fonts, and layout, ensuring a harmonious and visually pleasing design. CSS plays a pivotal role in creating a polished and professional appearance, making your app not just functional but also aesthetically pleasing to users.

:root {
  --darkBlack: #050505;
  --BlackGray: #1f1f1f;
  --DarkGray: #2d2d2d;
  --LightGray: #3a3a3a;
  --Gray: #757575;
  --halfWhite: #e9e9e9;
  --whiteGray: #f4f4f4;
  --white: #ffffff;
  --purpule: #a445ed;
  --orange: #ff5252;
}

* {
  padding: 0;
  margin: 0;
  box-sizing: border-box;
}

body {
  font-family: sans-serif;
  background-color: var(--white);
  color: var(--darkBlack);
}

body.dark {
  background-color: var(--darkBlack);
  color: var(--white);
}

.container {
  max-width: 1080px;
  width: 100%;
  overflow: hidden;
  padding: 0 2rem;
  margin: 0 auto;
}

header {
  padding: 3rem 0;
}

nav {
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.content {
  display: flex;
  align-content: center;
}

.content select {
  border: none;
  margin-right: 2rem;
  background-color: var(--white);
}

.switch {
  position: relative;
  display: inline-block;
  width: 60px;
  height: 25px;
  margin-right: 1rem;
}

.switch input {
  opacity: 0;
  width: 0;
  height: 0;
}

.slider {
  position: absolute;
  cursor: pointer;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-color: var(--Gray);
  -webkit-transition: 0.4s;
  transition: 0.4s;
}

.slider::before {
  position: absolute;
  content: "";
  height: 20px;
  width: 20px;
  left: 4px;
  bottom: 3px;
  background-color: var(--white);
  -webkit-transition: 0.4s;
  transition: 0.4s;
}

input:checked + .slider {
  background-color: var(--purpule);
}

input:focus + .slider {
  box-shadow: 0 0 1px var(--purpule);
}

input:checked + .slider::before {
  -webkit-transform: translateX(26px);
  -ms-transform: translateX(26px);
  transform: translateX(26px);
}

.slider.round {
  border-radius: 34px;
}

.slider.round::before {
  border-radius: 50%;
}

header form {
  margin: 2rem 0;
  position: relative;
}

header form input {
  width: 100%;
  background-color: var(--halfWhite);
  padding: 1.2rem 1rem;
  outline: none;
  border: none;
  border-radius: 10px;
  font-size: 1.3rem;
  font-family: inherit;
}

header form input:focus {
  border: 1px solid var(--purpule);
}

header form img {
  object-fit: cover;
  top: 50%;
  left: 96%;
  transform: translate(-50%, -50%);
  position: absolute;
  cursor: pointer;
}

.disctonary_content {
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.section h2 {
  font-size: 3rem;
  margin-bottom: 1rem;
}

.section p {
  color: var(--purpule);
}

.disctonary_content svg {
  cursor: pointer;
}

.disctonary_content svg :hover {
  opacity: 0.7;
}

.noun,
.verb {
  margin: 4rem 0;
}

.noun h3,
.verb h3 {
  font-size: 1.5rem;
  margin-bottom: 2.5rem;
  position: relative;
}

.noun h3::after,
.verb h3::after {
  position: absolute;
  content: "";
  width: 92%;
  height: 2px;
  background-color: var(--halfWhite);
  top: 15px;
  bottom: 0;
  right: 0;
}

.noun > p,
.verb p {
  color: var(--Gray);
}

.noun ul {
  margin: 2rem 0;
}

ul li {
  list-style-type: none;
  margin: 1rem 0;
  display: flex;
  align-items: center;
  margin-left: 2rem;
}

ul li::before {
  content: "\2022";
  color: var(--purpule);
  font-size: 2rem;
  width: 1rem;
  padding-right: 2rem;
}

.synonms p span {
  color: var(--purpule);
  font-weight: 600;
  margin-left: 2rem;
}

To transform your static web page into a dynamic and interactive dictionary, integrate JavaScript. This scripting language breathes life into your app by facilitating real-time interactions. Develop functions that handle user input, process search queries, and dynamically update the display area. JavaScript is the key to providing a seamless and responsive user experience.

"use strict";

const bodyEl = document.querySelector("body");
const checkBox = document.querySelector(".switch input");
const selectOptions = document.querySelector(".content select");

const searchBtn = document.querySelector(".search");
const inputEl = document.querySelector("form input");

const disContainer = document.querySelector(".disctonary_content");
const partofSeech = document.querySelector(".partofSeachNoun");

const ulEl = document.querySelector(".meanings");
const SysEl = document.querySelector(".syn");
const verbEl = document.querySelector(".verb");

const form = document.querySelector("form");

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

searchBtn.addEventListener("click", () => {
  if (inputEl.value !== "") {
    searching(inputEl.value);
    inputEl.style.border = "";
    inputEl.value = "";
  } else {
    inputEl.style.border = "1px solid red";
  }
});

async function searching(data) {
  try {
    const api_data = await fetch(API_URL + data);
    const result = await api_data.json();

    const html = ` <div class="section">
                    <h2>${result[0].word}</h2>
                    <p>${result[0].phonetic}</p>
                  </div>
                  <svg
                    xmlns="http://www.w3.org/2000/svg"
                    width="75"
                    height="75"
                    viewBox="0 0 75 75"
                  class="playBtn"
                  >
                    <g fill="#A445ED" fill-rule="evenodd">
                      <circle cx="37.5" cy="37.5" r="37.5" opacity=".25" />
                      <path d="M29 27v21l21-10.5z" />
                    </g>
                  </svg>
                </div>`;

    disContainer.innerHTML = html;
    partofSeech.textContent = result[0].meanings[0].partOfSpeech;

    const li = ` <li>
                  ${result[0].meanings[0].definitions[0].definition}
                </li>
                <li>
                  ${result[0].meanings[0].definitions[1].definition}
                </li>  
                <li>
                  ${result[0].meanings[0].definitions[2].definition}
                </li>  
                `;

    ulEl.innerHTML = li;

    const sys = result[0].meanings[0].synonyms;
    SysEl.textContent = "";
    for (let i = 0; i < sys.length; i++) {
      SysEl.textContent += sys[i] + " ";
    }

    let partofSpeech2 = ` <div class="verbContent">
                          <h3>${result[0].meanings[1].partOfSpeech}</h3>
                          <p>Meaning</p>
                          <ul class="meanings">
                            <li>${result[0].meanings[1].definitions[0].definition}</li>
                          </ul>
                        </div>`;

    verbEl.innerHTML = partofSpeech2;

    const playBtn = document.querySelector(".playBtn");

    playBtn.addEventListener("click", () => {
      const speechWord = result[0].word;
      sppechText(speechWord);
    });

    console.log(result);
  } catch (error) {
    console.log(error);
  }
}

form.addEventListener("submit", (e) => {
  e.preventDefault();
  searching(inputEl.value);
  inputEl.value = "";
});

selectOptions.addEventListener("change", (e) => {
  let fonts = e.target.value;
  bodyEl.style.fontFamily = fonts;
});

checkBox.addEventListener("click", () => {
  bodyEl.classList.toggle("dark");
});

function sppechText(textSpeech) {
  let speechText = new SpeechSynthesisUtterance();
  speechText.text = textSpeech;
  speechText.voice = window.speechSynthesis.getVoices()[0];
  window.speechSynthesis.speak(speechText);
}

Make the search bar the focal point of your app. Implement an event listener to detect user input, triggering the search functionality. JavaScript can then fetch and display the word’s meaning or definition, creating a fluid and intuitive user experience. The search bar becomes the gateway for users to explore the vast realm of words within your dictionary.

Design a clear and concise display area that presents search results in an organized manner. Consider incorporating additional information, such as synonyms or example sentences, to enhance the user experience. JavaScript’s ability to dynamically update this area ensures users receive instant feedback, adding to the overall responsiveness of your app.

To create a robust dictionary app, include error handling mechanisms. Manage scenarios where the entered word is not found gracefully by providing informative messages to guide users. Leveraging JavaScript’s conditional statements, you can tailor the user experience for different outcomes, ensuring a smooth interaction even when unexpected situations arise.

Optimize your dictionary app for various devices through responsive design principles. Ensure a seamless user experience on both desktop and mobile devices, allowing users to access the dictionary conveniently from any platform. Responsive design is the key to broadening your app’s accessibility and usability.

Thoroughly test your dictionary app to identify and address any bugs or usability issues. Solicit feedback from users and iterate on your design based on their input. The testing and refinement phase is essential for enhancing the user experience and ensuring that your app functions seamlessly across different scenarios.

Conclusion:

Embarking on the journey of building a dictionary app using HTML, CSS, and JavaScript is not only educational but also rewarding. This project empowers beginners to apply their coding skills in a practical context, resulting in a tangible outcome that can be shared with others. Enjoy the creative process of bringing your dictionary app to life, and revel in the satisfaction of providing users with a functional, visually appealing, and user-friendly application. Happy coding!