English Dictionary App HTML, CSS, and JavaScript – C0deCraft by Rana

|
Facebook
English Dictionary

This code creates a simple English Dictionary application using HTML, CSS, and JavaScript. Here’s an explanation of how each part works:

HTML Code Breakdown English Dictionary

DOCTYPE Declaration & Language Setting:

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

This line declares that the document is an HTML5 file and sets the language of the page to English (lang="en").

Head Section:

<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" />
<title>English Dictionary</title>
<link rel="stylesheet" href="style.css">
</head>
  • The <meta charset="UTF-8"> sets the character encoding to UTF-8 to ensure correct text rendering.
  • <meta http-equiv="X-UA-Compatible" content="IE=edge"> makes the page compatible with the latest rendering engine in Internet Explorer.
  • The <meta name="viewport" content="width=device-width, initial-scale=1.0"> ensures that the layout scales properly on different devices.
  • <title>English Dictionary</title> sets the title displayed on the browser tab.
  • <link rel="stylesheet" href="style.css"> links the external CSS file to style the page.

Body Section:

<body>
<div class="container">
<h1 class="heading">English Dictionary CodeCraft by Rana</h1>
<input placeholder="Search a word" type="text" class="input" id="input" />
<p class="info-text" id="info-text">Type a word and press enter</p>
<div class="meaning-container" id="meaning-container">
<p>Word Title: <span class="title" id="title">___</span></p>
<p>Meaning: <span class="meaning" id="meaning">___</span></p>
<audio src="" controls id="audio"></audio>
</div>
</div>
<script src="index.js"></script>
</body>
  • <h1 class="heading">English Dictionary CodeCraft by Rana</h1> creates the heading of the page.
  • <input placeholder="Search a word" type="text" class="input" id="input" /> creates an input field for searching a word.
  • <p class="info-text" id="info-text">Type a word and press enter</p> displays an instructional text.
  • <div class="meaning-container" id="meaning-container"> contains the elements to display the searched word’s title, meaning, and an audio pronunciation.
  • <script src="index.js"></script> links the external JavaScript file.

CSS Code Breakdown English Dictionary

body {
margin: 0;
display: flex;
min-height: 100vh;
justify-content: center;
align-items: center;
background-color: salmon;
font-family: 'Courier New', Courier, monospace;
}

.container {
background-color: rgba(255, 255, 255, .3);
padding: 28px;
border-radius: 7px;
box-shadow: 0 10px 10px rgba(0, 0, 0, .3);
width: 90%;
margin: 10px;
max-width: 450px;
text-align: center;
font-size: 18px;
font-weight: 500;
}

.heading {
font-size: 28px;
}

.input {
height: 53px;
width: 300px;
background-color: rgba(255, 255, 255, .6);
border-color: rgba(255, 255, 255, .4);
font-size: 16px;
padding: 0 42px;
border-radius: 5px;
}

.meaning-container {
display: none;
}
  1. General Styles:
    • The body is set to cover the full height of the viewport with min-height: 100vh and is centered using justify-content and align-items with display: flex. The background color is set to salmon.
    • The font is set to 'Courier New', Courier, monospace.
  2. Container Styles:
    • .container has a semi-transparent background using rgba(255, 255, 255, .3), some padding for inner spacing, and a shadow effect (box-shadow). It also sets a maximum width (max-width: 450px) and makes the content text-centered.
  3. Heading & Input Field:
    • .heading increases the font size for the title to 28px.
    • .input styles the search box with a height of 53px, width of 300px, and a light background and border color. It also has rounded corners (border-radius: 5px).
  4. Meaning Container:
    • .meaning-container is hidden initially with display: none;, which will be shown once a word is searched and the result is found.

JavaScript Code Breakdown English Dictionary

const inputEl = document.getElementById("input");
const infoTextEl = document.getElementById("info-text");
const meaningContainerEl = document.getElementById("meaning-container");
const titleEl = document.getElementById("title");
const meaningEl = document.getElementById("meaning");
const audioEl = document.getElementById("audio");

async function fetchAPI(word) {
try {
infoTextEl.style.display = "block";
meaningContainerEl.style.display = "none";
infoTextEl.innerText = `Searching the meaning of "${word}"`;
const url = `https://api.dictionaryapi.dev/api/v2/entries/en/${word}`;
const result = await fetch(url).then((res) => res.json());

if (result.title) {
meaningContainerEl.style.display = "block";
infoTextEl.style.display = "none";
titleEl.innerText = word;
meaningEl.innerText = "N/A";
audioEl.style.display = "none";
} else {
infoTextEl.style.display = "none";
meaningContainerEl.style.display = "block";
audioEl.style.display = "inline-flex";
titleEl.innerText = result[0].word;
meaningEl.innerText = result[0].meanings[0].definitions[0].definition;
audioEl.src = result[0].phonetics[0].audio;
}
} catch (error) {
console.log(error);
infoTextEl.innerText = `an error happened, try again later`;
}
}

inputEl.addEventListener("keyup", (e) => {
if (e.target.value && e.key === "Enter") {
fetchAPI(e.target.value);
}
});
  1. Element Selection:
    • inputEl, infoTextEl, meaningContainerEl, titleEl, meaningEl, and audioEl are selected using getElementById() to manipulate or access their content.
  2. fetchAPI Function:
    • This is an asynchronous function that takes a word as input, fetches its meaning from the Dictionary API (https://api.dictionaryapi.dev), and updates the HTML content dynamically.
    • infoTextEl displays a message while the API request is being processed (Searching the meaning of "word").
    • If the result contains the word’s meaning, the page updates the title, meaning, and audio pronunciation. If no meaning is found, it displays N/A for the meaning.
    • The try-catch block is used to handle errors gracefully. If something goes wrong, it logs the error in the console and updates the page with an error message.
  3. Event Listener:
    • The input element (inputEl) listens for the keyup event, checking if the “Enter” key is pressed and the input is not empty. If these conditions are met, it calls the fetchAPI() function with the entered word as the argument.

Summary English Dictionary

  • HTML: Creates the structure for the dictionary page.
  • CSS: Adds styles to make the page visually appealing, including centring content and creating a search box.
  • JavaScript: Handles user input, sends API requests to get word meanings, and updates the page with the result, including the word’s meaning and audio pronunciation, or displays an error message if necessary.

This code demonstrates a basic, functional web app that uses an API to fetch word meanings dynamically based on user input.

Other PostClick Here
Join Facebook GroupClick Here
Join Telegram ChannelClick Here
Web StoriesClick Here

Admin

I’m a digital creator. I’m passionate about using my creativity to connect with people in new ways.

Leave a Comment