Contents

Introduction ........................................................................................................................................................... 2
History .................................................................................................................................................................... 4
History of the Dictionary .............................................................................................................................. 4
Dictionary App ....................................................................................................................................................... 6
What is Dictionary App? .............................................................................................................................. 6
API .......................................................................................................................................................................... 7
What is an API? .............................................................................................................................................. 7
Code of dictionary App .......................................................................................................................................... 8
EXPLATION OF HTML CODE .................................................................................................................................. 15
EXPLATION OF CSS CODE ...................................................................................................................................... 17
EXPLATION OF JAVASCRIPT CODE ........................................................................................................................ 19

1
Introduction

What is a Dictionary?

What is the definition of the word dictionary? A dictionary is a book or online

resource that lists every word in a certain language and provides the user with a
standard and recognizable definition of the word. Additionally, synonyms,
punctuation, and origins of the word are given. Dictionaries are lists that are usually
written in alphabetical order so that the user can search for their desired word more
easily. They are found in almost every language that is spoken.

Dictionaries have a number of uses and have existed for thousands of years. They
can be used to find the spellings, meanings, origins, usages, and synonyms of
words.

uses of dictionary
The word dictionary derives from the Medieval Latin word dictionarium, meaning
"collection of words or phrases." The term was first used in the early 1200s to
describe a new form of the Latin vocabulary that had been written and published.
Dictionaries have expanded over the years as languages have further developed
and evolved.

For what purposes are dictionaries typically used?

Even though dictionaries can be used for many different purposes, a useful
distinction that can be made is that between comprehension (decoding) and
production (encoding) purposes. Nation (2001) provides the following lists of typical
uses: Typical comprehension uses are:

o Looking up unknown words that are encountered when listening

o or reading

o Confirming the meanings of partially known words

o Conforming guesses from context

o Typical production uses are:
o Looking up unknown words needed to speak or write

o Looking up spelling, pronunciation, meaning, grammar, constraints

o on use, collocations, inflections and derived forms of partly known
o words.
o Confirming the spelling, pronunciation, meaning etc. of known words.

o Checking that a word actually exists

o Finding a different word to use instead of a known one (a

o synonym)

o Correcting errors and mistakes

2
Since this website is dedicated to academic writing, it will make sense to take a
closer look at the process involved in production (encoding) of written language and
the dictionary use typically needed in this process.
+
What information can be found in a dictionary?

Whatever type of dictionary you use, it is worthwhile spending some time with
the user’s guide, i.e. the initial pages that explain what kind of information is
provided in the dictionary, the layout of the entries, and often also a legend that
explains what the symbols used in the dictionary mean. In terms of what type of
information is given in a typical entry, here is an example of what is normally
found in a mono-lingual dictionary (here based on the structure in the Longman
Dictionary of Contemporary English (LDOCE):
1. Spelling: the headword itself is given in its normal spelling, printed in bold.
Headwords are arranged alphabetically in a dictionary.
2. Frequency information: symbols indicating how frequent the word is in spoken
and written English. In LDOCE the symbols are boxes with either an’S’ (spoken)
or a ‘W’ (written) followed by a number. For example, a box saying W2 means
that the headword in question belongs to the second thousand most common
words in written English.
3. Pronunciation: phonetic script, given within parentheses ( ) or slash / /
brackets, tells us how to pronounce the word (the pronunciation of the word is
transcribed following the International Phonetic Alphabet (IPA)).

4. Word class: the word class (also called part-of-speech) of the word and other
grammatical information is provided following conventional abbreviations, such
as n for Noun and v for Verb.

5. Sense(s): when a word has more than one meaning, then the different senses
are numbered. When a sense or a group of senses belong to a different word
class, this is indicated. For each sense, a definition is given which at the same
time also functions as an explanation of its meaning.

6. Collocations, phrasal use and the syntactic operation of the word: examples
are given of how the headword may be combined with other words to form
idiomatic language usage.

Naturally, dictionaries differ in terms of what information is provided and in what

order, but the above example typically illustrates what types of information are
included in an English Foreign Language (EFL) dictionary entry. As was stated
above, it is worthwhile spending some time with the initial pages of a dictionary,
where the entry structure and its symbols are explained.

3
History

History of the Dictionary

Who created the dictionary? The history of the dictionary is not nearly as old as the
history of written and spoken language, but dictionaries still have a long history that
dates back a number of centuries. Dictionaries began as smaller books for relatively
small languages, but as languages have grown, so have the size, use, and
importance of the dictionary.

Who Invented the Dictionary?

Dictionaries as they are known presently have changed dramatically since some of
the earliest writings. Though the term dictionary was created around the 13th
century, the earliest forms of the dictionary are said to have been written in the
ancient world. The first dictionaries were actually bilingual, meaning that they
contained two languages. Some historians consider the Akkadian cuneiform tablets
from around 2300 B.C.E. to be the first dictionaries. They were used to catalog
specific symbols and their meanings.

The first monolingual dictionary comes from China between the 8th and the 3rd
centuries B.C.E. and it was written as a number of verses. Japan created the first
dictionary to be written as a list of words around 850 B.C.E. The first Latin dictionary
was printed in 1502, and it was later updated to be multilingual. This was important
because many other languages are modeled after Latin, such as English, Spanish,
Portuguese, and French.

Sebastian Covarrubias of Spain published the first Spanish dictionary in 1611. It was
formatted as a list and was monolingual to serve as a reference for the meaning and
usage of words within the Spanish language. This dictionary would become a model
for the English dictionary that is commonly used in present times.

Who Wrote the First English Dictionary?

Just as the dictionaries of other languages have evolved over time, the English
dictionary is no exception. The first English dictionaries were written around 1500
C.E. They acted as more of a glossary, which provided a lengthier definition for a
word but neglected to describe how the word could be used within the context of
writing. Later dictionaries, such as the Dictionary of Syr Thomas Eliot Knyght
(1538) and Dictionarie French and English (1593) were bilingual.

Robert Cawdrey created the first known English dictionary that employed the use
of an alphabetical ordering system called the Table Alphabeticall. It laid the
groundwork for every major English dictionary that would be written later, including
the English Expositor (1616), the English Dictionary, and Glassographia (1656).
These published works contained the first modern usages of dictionary formatting
and included the definition, etymology, and usage of words from the language.

4
Samuel Johnson's Dictionary

Samuel Johnson published a two-volume dictionary called Dictionary of the English

Language in 1755. It was far more extensive and detailed than any of its
predecessors and set a standard for all other dictionaries that would be created later.
Johnson's dictionary is widely believed to be the first modern English dictionary
because it was so highly accomplished and authoritative of its time.

With the help of six other writers, Johnson created a book that listed over 40,000
words in the English language. He used prior dictionaries as references for his work
and added onto the definitions and other details that were provided. Johnson's
dictionary included a basic definition, pronunciation, history, usage within a
sentence, and synonyms for each word. The dictionary, similar to others, expanded
as the English language grew and was updated accordingly.

The Oxford English Dictionary

The dictionary created by Samuel Johnson was used as the standard until the
Oxford English Dictionary was published in 1884. The Oxford dictionary was created
by Oxford University and is considered one of the most well-known and widely-used
dictionaries in the English-speaking world. It has been used as the standard
dictionary since its publishing and remains so to the present day.

In 1857, some members of the Philological Society of London felt that earlier copies
of the English dictionary were insufficient or outdated, and therefore decided to
update the existing dictionaries through a new publication. Following years of
extensive research and an in-depth re-examination of the English language and its
history, Oxford University agreed to print a new dictionary in 1879. The writing of the
publication began around that time, although the book would not be published until
five years later.

The original dictionary was intended to be a four-volume series. However, due to the
number of words and their definitions being published, the Oxford dictionary ended
up taking ten volumes to publish completely. The final volume was published in
1928. Additional editions, supplements, and online materials were created as the
English language and technologies evolved.

5
Dictionary App

What is Dictionary App?

A dictionary app is a software application designed to provide definitions,

translations, and additional information about words and phrases. Here's how it
typically works:

Word Lookup: Users can enter a word or phrase into the app's search bar.

Definitions: The app retrieves one or more definitions of the entered word, along with
information such as pronunciation, part of speech (noun, verb, etc.), and usage
examples.

Synonyms and Antonyms: Many dictionary apps also offer lists of synonyms (words
with similar meanings) and antonyms (words with opposite meanings).

Translations: For multilingual dictionaries, users can often translate words or phrases
from one language to another.

Word Origin and History: Some apps provide etymology, explaining the word's origin
and historical usage.

Audio Pronunciation: Users can listen to the correct pronunciation of the word or
phrase.

Offline Access: Some dictionary apps allow users to download language databases
for offline use.

Bookmarking and History: Users can save words they've looked up for future
reference or view their search history.

Word Games and Quizzes: Some dictionary apps include language-related games
and quizzes to help users improve their vocabulary.

Additional Features: Depending on the app, there may be additional features like
word of the day, vocabulary quizzes, and language learning tools.

Dictionary apps are available for various platforms, including smartphones, tablets,
and desktop computers, making it convenient for users to access language-related
information whenever they need it

6
API

What is an API, let’s take a real-life example of an API, you can think of an API like
a waiter in a restaurant who listens to your order request, goes to the chef, takes the
food items ordered and gets back to you with the order.

What is an API?

API is an abbreviation for Application Programming Interface which is a

collection of communication protocols and subroutines used by various programs to
communicate between them. A programmer can make use of various API tools to
make their program easier and simpler. Also, an API facilitates programmers with an
efficient way to develop their software programs. Thus in simpler terms, an API helps
two programs or applications to communicate with each other by providing them with
the necessary tools and functions. It takes the request from the user and sends it to
the service provider and then again sends the result generated from the service
provider to the desired user.

A developer extensively uses APIs in his software to implement various features by

using an API call without writing complex codes for the same. We can create an API
for an operating system, database system, hardware system, JavaScript file, or
similar object-oriented files. Also, an API is similar to a GUI(Graphical User Interface)
with one major difference. Unlike GUIs, an API helps software developers to access
web tools while a GUI helps to make a program easier to understand by users.
How do APIs Work?

The working of an API can be clearly explained with a few simple steps. Think of a
client-server architecture where the client sends the request via a medium to the
server and receives the response through the same medium. An API acts as a
communication medium between two programs or systems for functioning. The client
is the user/customer (who sends the request), the medium is the API, and the server
is the backend (where the request is accepted and a response is provided). Steps
followed in the working of APIs –

o The client initiates the requests via the APIs URI (Uniform Resource Identifier)
o The API makes a call to the server after receiving the request
o Then the server sends the response back to the API with the information
o Finally, the API transfers the data to the client.

APIs are considered safe in terms of attacks as it includes authorization credentials

and an API gateway to limit access so as to minimize security threats. To provide
additional security layers to the data, HTTP headers, query string parameters, or
cookies are used.

7
Code of dictionary App

HTML Code

<!DOCTYPE html>
<html lang="en">
<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">
<link rel="stylesheet" href= "style.css">
<title>Dictionary - App Javascript Project</title>
</head>
<body>
<header>
<nav>
<h1>Dictionary App</h1>
</nav>
</header>
<main>
<form action="">
<input type="text"placeholder="Enter a word">
<button type="submit">search</button>
</form>
<div class= "result"></div>
</main>
<footer>

8
 <p>&copy; wsm</p>
</footer>
<script src="script.js"></script>
</body>
</html>

CSS Code
:root{
--primary-color:#008080;
--bcg-color: #f5f5f5;
--padding:20px;
--text-color:#fff;
--border--redius:5px;
}
*{
margin: 0;
padding: 0;
box-sizing: border-box;
}

body{
font-family: Arial, sans-serif;
background-color: var(--bcg-color);
width: 100vw;
}

header{
background-color: var(--primary-color);

9
 padding: var(--padding);
color: var(--text-color);
}
header h1{
font-size: 36px;
}

main{
min-height: 78vh;
padding: var(--padding);
max-width: 800px;
margin: 0 auto;
}

main form{
display: flex;
justify-content: center;
}
form input[type="text"],
button[type="submit"],
.result div a{
border: none;
font-size: 16px;
font-weight: 500;
border-radius: var(--border--redius);
padding: calc(var(--padding)/2);

10
form input[type="text"]{
flex-grow: 1;
}
form button[type="submit"]{
background-color: var(--primary-color);
color: var(--text-color);
margin-left: 10px;
cursor: pointer;
}
footer{
background-color: var(--primary-color);
color: var(--text-color);
padding: var(--padding);
text-align: center;
font-size: 18px;
position: fixed;
width: 100%;
}
.result{
background-color: #fff;
padding: var(--padding);
border-radius: var(--border--redius);
margin-top: 20px;
box-shadow: 0px 0px 10px rgba(0,0,0,0.2);
}
.result p{
margin-top: 10px;
}

11
.result p[class="partof Speech"]{
font-style: italic;
color: #808080;
margin-top: 2px;
}
.result div{
margin-top: 20px;
}
.result div a{
text-decoration: none;
background-color: var(--primary-color);
color: var(--text-color)
}
.result li{
padding: calc(var(--padding/6));
margin-left: 20px;
}
@media screen and (max-width:320px) {
main form{
flex-direction: column;
}
form button [type="submit"]{
margin-left: 0px;
margin-top: 10px;
}
}

12
JAVA SCRIPT Code
const form = document.querySelector("form");
const resultDiv = document.querySelector(".result");

form.addEventListener('submit', (e)=>{
e.preventDefault();
getwordInfo(form.elements[0].value);
});

const getwordInfo = async (word)=>{

try {
resultDiv.innerHTML = "Fetching Data...";
const response = await
fetch(`https://api.dictionaryapi.dev/api/v2/entries/en/${word}`);
const data = await response.json();
let definitions = data[0].meanings[0].definitions[0];
resultDiv.innerHTML = `
<h2><strong>Word:</strong> ${data[0].word}</h2>
<p class="partof Speech">${data[0].meanings[0].partofSpeech}}</p>
<p><strong>Meaning:</strong> ${definitions.definition === undefined ?
"Not Found":
definitions.definition}}</p>
<p><strong>Example:</strong> ${definitions.example === undefined ?
"Not Found":
definitions.example}}</p>
<p><strong>Antonyms:</strong></p>
`;

13
 //Fetching Antonyms
if(definitions.antonyms.length === 0){
resultDiv.innerHTML += `<span>Not Found</span>`;
}
else{
for(let i=0; i<definitions.antonyms.length; l++){
resultDiv.innerHTML += `<li>${definitions.antonyms{i}}</li>`
}
}

//Adding Read More Button

resultDiv.innerHTML += `<div><a href="${data[0].sourceUrls}"
target="_blank">Read More</a></div>`;
}
catch (error) {
resultDiv.innerHTML = '<p>Sorry, the word could not be found</p>';
}

console.log(data);
}

14
EXPLATION OF HTML CODE

This HTML code represents the structure of a web page for a "Dictionary App" project using
HTML, CSS, and JavaScript. Let's break down the code step by step:

<!DOCTYPE html>: This declaration defines the document type and version of HTML
being used, which is HTML5 in this case.

<html lang="en">: The opening tag for the HTML document. The lang attribute is set to
"en" to indicate that the primary language of the document is English.

<head>: This section contains metadata and links to external resources that provide
information about the document.

<meta charset="UTF-8">: Declares the character encoding for the document as UTF-8,
which is a standard encoding for handling text in various languages, including English.

<meta http-equiv="X-UA-Compatible" content="IE=edge">: Suggests to Internet Explorer to

use the latest rendering engine available.

<meta name="viewport" content="width=device-width, initial-scale=1.0">: This meta tag

sets the viewport width to the device width and ensures an initial scale of 1.0 for responsive
design.

<link rel="stylesheet" href="style.css">: Links an external CSS stylesheet named "style.css"

to style the content of the web page.

<title>Dictionary - App Javascript Project</title>: Sets the title of the web page, which is
displayed in the browser's title bar or tab.

<body>: The main content of the web page is enclosed within the <body> element.
<header>: Defines the header section of the page.
<nav>: Represents a navigation section.

<h1>Dictionary App</h1>: Contains the main title of the application, which is "Dictionary
App."

<main>: Contains the primary content of the web page.

<form action="">: Defines an HTML form that users can use to input a word and search for
its definition.

<input type="text" placeholder="Enter a word">: This is a text input field where users can
type a word. The placeholder attribute provides a hint to the user.

<button type="submit">search</button>: This is a submit button that users can click to

initiate a search for the entered word.

15
<div class="result"></div>: An empty <div> element with the class "result," which will be
used to display the search results.

<footer>: Defines the footer section of the web page.

<p>&copy; wsm</p>: Contains a copyright notice. The &copy; entity represents the
copyright symbol, followed by "wsm," which might be the author's name or organization.

<script src="script.js"></script>: Includes an external JavaScript file named "script.js." This

script is likely responsible for handling user interactions and displaying search results.

In summary, this HTML code sets up the basic structure for a dictionary web application,
including a header, a search form, and a footer. The application is expected to be styled using
an external CSS file ("style.css") and have its functionality implemented using JavaScript
("script.js"). Users can enter a word in the search input field and click the "search" button to
look up its definition.

16
EXPLATION OF CSS CODE

This code appears to be a CSS stylesheet that is meant to style a web page for a Dictionary
App, which likely corresponds to the HTML structure you provided earlier. Let's break down
the code to understand its purpose and how it styles various elements:

1. :root Pseudo-class: This is used to define custom CSS variables, also known as CSS
custom properties. These variables are used to store values that can be reused
throughout the stylesheet. Here are the defined variables:
• --primary-color: A custom property for the primary color, which is a shade of
teal.
• --bcg-color: A custom property for the background color, which is a light
gray.
• --padding: A custom property for padding, set to 20px.
• --text-color: A custom property for text color, which is white.
• --border--redius: A custom property for border radius, which is a typo and
should be --border-radius for setting the border radius.

2. * Selector: This selector selects all elements on the page and resets their margin,
padding, and box-sizing properties to standardize the default styling for all elements.

3. body Selector: Styles the entire body of the page. Key properties include:
• font-family: Sets the font family for the entire page to Arial or a sans-serif
font if Arial is not available.
• background-color: Sets the background color to the value of --bcg-color,
which is light gray.
• width: Sets the width of the body to 100vw (100% of the viewport width).

4. header Selector: Styles the header section of the page, including the navigation bar.
Key properties include:
• background-color: Sets the background color to the value of --primary-color,
which is a teal color.
• padding: Adds padding to the header, using the value of --padding.
• color: Sets the text color to the value of --text-color, which is white.

5. header h1 Selector: Styles the h1 element within the header. Key property:
• font-size: Sets the font size to 36px.

6. main Selector: Styles the main content section of the page. Key properties include:
• min-height: Sets a minimum height to 78vh (78% of the viewport height).
• padding: Adds padding using the value of --padding.
• max-width: Sets a maximum width of 800px.
• margin: Centers the main content by applying margin: 0 auto;.

7. main form Selector: Styles the search form within the main section. It uses flex to
horizontally center its contents.

8. Styling for form elements and search results:

17
 • form input[type="text"], button[type="submit"], and .result div a: These
selectors apply common styling for text input, submit button, and links within
the search results.

9. footer Selector: Styles the footer of the page. Key properties include:
• background-color: Sets the background color to the value of --primary-color,
which is teal.
• color: Sets the text color to white.
• padding: Adds padding using the value of --padding.
• position: Fixes the footer to the bottom of the viewport.
• width: Sets the width to 100%.

10. .result Selector: Styles the container for displaying search results. Key properties
include background color, padding, border radius, margin, and a box shadow to create
a visually separated result container.

11. Media Query: This query applies responsive styles for screens with a maximum width
of 320px. It changes the layout of the search form to a column layout for small
screens and adjusts the margin of the submit button accordingly.

Overall, this CSS code is designed to give the web page a clean and responsive design, with
custom colors and spacing defined using CSS variables for easy maintenance and
consistency.

18
EXPLATION OF JAVASCRIPT CODE

This JavaScript code is designed to enhance the functionality of the HTML structure
for a Dictionary App. It adds interactivity to the web page by allowing users to enter
a word in a search form and then fetches information about that word from an
external API. Let's break down the code step by step:

1. Selecting HTML Elements:

javascriptCopy code
const form = document . querySelector ( "form" ); const resultDiv =
document . querySelector ( ".result" );

These lines select the HTML form and the <div> element with the class "result"
using the document.querySelector method. These elements will be used to
interact with the user and display the search results.

2. Adding Event Listener:

javascriptCopy code
form. addEventListener ( 'submit' , (e) => { e. preventDefault ();
getWordInfo (form. elements [ 0 ]. value ); });

This code attaches an event listener to the form element. It listens for the
"submit" event, which occurs when the user submits the form (typically by
clicking a "Submit" button). When the form is submitted, the function
specified inside the event listener is executed.

• e.preventDefault();: This line prevents the default behavior of the form,

which is to submit a request to the server and refresh the page. Instead,
it prevents the page from reloading, allowing the JavaScript function to
handle the submission.

• getWordInfo(form.elements[0].value);: This line calls the getWordInfo

function, passing it the value entered in the first form input element (at
index 0). It's assuming that the first input element contains the word to
be looked up.

19
3. getWordInfo Function:

javascriptCopy code
const getWordInfo = async ( word ) => { try { resultDiv. innerHTML = "Fetching Data..." ; const
response = await fetch ( `https://api.dictionaryapi.dev/api/v2/entries/en/${word}` ); const
data = await response. json (); // ... } catch (error) { resultDiv. innerHTML = '<p>Sorry, the
word could not be found</p>' ; } }

This function is responsible for fetching word information from an external API
(the Dictionary API). Here's what it does:

• resultDiv.innerHTML = "Fetching Data...";: This line displays a "Fetching

Data..." message in the resultDiv element to indicate that data is being
loaded.

• fetch: It makes an asynchronous HTTP request to the Dictionary API,

using the word entered by the user as part of the URL.

• await response.json();: It waits for the API response to be converted

into a JavaScript object.

• If the API request is successful, it extracts information about the word,

such as its definitions, part of speech, examples, and antonyms, and
constructs an HTML structure to display this information.
• If there's an error in fetching or processing the data, it displays a "Sorry,
the word could not be found" message in the resultDiv.

4. Displaying Word Information: Inside the try block, the code constructs an
HTML structure to display word information based on the response from the
API.
• It extracts the word, part of speech, definition, example, and antonyms
from the API response.
• It checks if these properties exist in the response and, if not, displays
"Not Found" for missing information.
• It also generates a list of antonyms if they are available.

20
 5. Adding a "Read More" Link: After displaying word information, the code
adds a "Read More" link to the external source of the word information. This
link opens in a new tab when clicked.

6. Error Handling: In case of any errors during the API request or data
processing, an error message is displayed to the user.

7. Console Logging Data: Finally, there's a console.log(data); statement at the

end of the getWordInfo function, which logs the fetched data to the browser's
console. This can be useful for debugging purposes.

Overall, this code enhances the user experience by allowing them to search for word
definitions and displays the relevant information in a user-friendly manner.

21