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;
}
- General Styles:
- The body is set to cover the full height of the viewport with
min-height: 100vh
and is centered usingjustify-content
andalign-items
withdisplay: flex
. The background color is set tosalmon
. - The font is set to
'Courier New', Courier, monospace
.
- The body is set to cover the full height of the viewport with
- Container Styles:
.container
has a semi-transparent background usingrgba(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.
- Heading & Input Field:
.heading
increases the font size for the title to28px
..input
styles the search box with a height of53px
, width of300px
, and a light background and border color. It also has rounded corners (border-radius: 5px
).
- Meaning Container:
.meaning-container
is hidden initially withdisplay: 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);
}
});
- Element Selection:
inputEl
,infoTextEl
,meaningContainerEl
,titleEl
,meaningEl
, andaudioEl
are selected usinggetElementById()
to manipulate or access their content.
- 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.
- This is an asynchronous function that takes a word as input, fetches its meaning from the Dictionary API (
- Event Listener:
- The input element (
inputEl
) listens for thekeyup
event, checking if the “Enter” key is pressed and the input is not empty. If these conditions are met, it calls thefetchAPI()
function with the entered word as the argument.
- The input element (
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.
Important Links
Other Post | Click Here |
Join Facebook Group | Click Here |
Join Telegram Channel | Click Here |
Web Stories | Click Here |