Skip to content

Commit cc7534a

Browse files
Anamaya1729Anamaya1729
authored
Merge pull request #40 from aasimtaif/master
Dictionary App Completed.
2 parents 31fc571 + 68ec7c9 commit cc7534a

File tree

5 files changed

+278
-7
lines changed

5 files changed

+278
-7
lines changed

‎medium/dictionary_app/README.md‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -6,13 +6,13 @@
66
This program is used to create a dictionary app. It uses the dictionaryapi.dev API to fetch the data. The user can search for a word and the app will display the meaning of the word.
77

88
### Image Example
9-
![Dictionary App](https://i0.wp.com/rocoderes.com/wp-content/uploads/2021/05/Webp.net-gifmakerf1d104fb0d25a3d2.gif?fit=683%2C384&ssl=1)
9+
![Dictionary App](https://www.codingnepalweb.com/wp-content/uploads/2021/10/Build-A-Dictionary-App-in-HTML-CSS-JavaScript.jpg)
1010

1111
### Maintainer
1212
- [Anamaya](https://www.linkedin.com/in/anamaya1729/)
1313
- [Vaibhav](https://https://www.linkedin.com/in/vaibhava17/)
1414

1515
### License
16-
**This project is licensed under the GNU GENERAL PUBLIC License - see the [LICENSE](../../LICENSE) file for details**
16+
**This project is licensed under the GNU GENERAL PUBLIC License - see the [LICENSE](../../LICEENSE) file for details**
1717

1818
### Happy Coding! :smile:

‎medium/dictionary_app/app.js‎

Whitespace-only changes.

‎medium/dictionary_app/index.html‎

Lines changed: 52 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -1,12 +1,59 @@
11
<!DOCTYPE html>
2-
<html lang="en">
2+
<!-- Coding By CodingNepal - youtube.com/codingnepal -->
3+
<html lang="en" dir="ltr">
4+
35
<head>
4-
<meta charset="UTF-8">
5-
<meta http-equiv="X-UA-Compatible" content="IE=edge">
6+
<meta charset="utf-8">
7+
<title>Dictionary App in JavaScript | CodingNepal</title>
8+
<link rel="stylesheet" href="style.css">
69
<meta name="viewport" content="width=device-width, initial-scale=1.0">
7-
<title>Document</title>
10+
<!-- CDN Link for Icons -->
11+
<link rel="stylesheet" href="https://fonts.googleapis.com/icon?family=Material+Icons">
12+
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.3/css/all.min.css" />
813
</head>
14+
915
<body>
10-
16+
<div class="wrapper">
17+
<header>English Dictionary</header>
18+
<div class="search">
19+
<input type="text" placeholder="Search a word" required spellcheck="false">
20+
<i class="fas fa-search"></i>
21+
<span class="material-icons">close</span>
22+
</div>
23+
<p class="info-text">Type any existing word and press enter to get meaning, example, synonyms, etc.</p>
24+
<ul>
25+
<li class="word">
26+
<div class="details">
27+
<p>__</p>
28+
<span>_ _</span>
29+
</div>
30+
<i class="fas fa-volume-up"></i>
31+
</li>
32+
<div class="content">
33+
<li class="meaning">
34+
<div class="details">
35+
<p>Meaning</p>
36+
<span>___</span>
37+
</div>
38+
</li>
39+
<li class="example">
40+
<div class="details">
41+
<p>Example</p>
42+
<span>___</span>
43+
</div>
44+
</li>
45+
<li class="synonyms">
46+
<div class="details">
47+
<p>Synonyms</p>
48+
<div class="list"></div>
49+
</div>
50+
</li>
51+
</div>
52+
</ul>
53+
</div>
54+
55+
<script src="script.js"></script>
56+
1157
</body>
58+
1259
</html>

‎medium/dictionary_app/script.js‎

Lines changed: 72 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,72 @@
1+
const wrapper = document.querySelector(".wrapper"),
2+
searchInput = wrapper.querySelector("input"),
3+
volume = wrapper.querySelector(".word i"),
4+
infoText = wrapper.querySelector(".info-text"),
5+
synonyms = wrapper.querySelector(".synonyms .list"),
6+
removeIcon = wrapper.querySelector(".search span");
7+
let audio;
8+
9+
function data(result, word){
10+
if(result.title){
11+
infoText.innerHTML = `Can't find the meaning of <span>"${word}"</span>. Please, try to search for another word.`;
12+
}else{
13+
wrapper.classList.add("active");
14+
let definitions = result[0].meanings[0].definitions[0],
15+
phontetics = `${result[0].meanings[0].partOfSpeech} /${result[0].phonetics[0].text}/`;
16+
document.querySelector(".word p").innerText = result[0].word;
17+
document.querySelector(".word span").innerText = phontetics;
18+
document.querySelector(".meaning span").innerText = definitions.definition;
19+
document.querySelector(".example span").innerText = definitions.example;
20+
audio = new Audio(result[0].phonetics[0].audio);
21+
22+
if(definitions.synonyms[0] == undefined){
23+
synonyms.parentElement.style.display = "none";
24+
}else{
25+
synonyms.parentElement.style.display = "block";
26+
synonyms.innerHTML = "";
27+
for (let i = 0; i < 5; i++) {
28+
let tag = `<span onclick="search('${definitions.synonyms[i]}')">${definitions.synonyms[i]},</span>`;
29+
tag = i == 4 ? tag = `<span onclick="search('${definitions.synonyms[i]}')">${definitions.synonyms[4]}</span>` : tag;
30+
synonyms.insertAdjacentHTML("beforeend", tag);
31+
}
32+
}
33+
}
34+
}
35+
36+
function search(word){
37+
fetchApi(word);
38+
searchInput.value = word;
39+
}
40+
41+
function fetchApi(word){
42+
wrapper.classList.remove("active");
43+
infoText.style.color = "#000";
44+
infoText.innerHTML = `Searching the meaning of <span>"${word}"</span>`;
45+
let url = `https://api.dictionaryapi.dev/api/v2/entries/en/${word}`;
46+
fetch(url).then(response => response.json()).then(result => data(result, word)).catch(() =>{
47+
infoText.innerHTML = `Can't find the meaning of <span>"${word}"</span>. Please, try to search for another word.`;
48+
});
49+
}
50+
51+
searchInput.addEventListener("keyup", e =>{
52+
let word = e.target.value.replace(/\s+/g, ' ');
53+
if(e.key == "Enter" && word){
54+
fetchApi(word);
55+
}
56+
});
57+
58+
volume.addEventListener("click", ()=>{
59+
volume.style.color = "#4D59FB";
60+
audio.play();
61+
setTimeout(() =>{
62+
volume.style.color = "#999";
63+
}, 800);
64+
});
65+
66+
removeIcon.addEventListener("click", ()=>{
67+
searchInput.value = "";
68+
searchInput.focus();
69+
wrapper.classList.remove("active");
70+
infoText.style.color = "#9A9A9A";
71+
infoText.innerHTML = "Type any existing word and press enter to get meaning, example, synonyms, etc.";
72+
});

‎medium/dictionary_app/style.css‎

Lines changed: 152 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,152 @@
1+
/* Import Google Font - Poppins */
2+
@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@400;500;600;700&display=swap');
3+
*{
4+
margin: 0;
5+
padding: 0;
6+
box-sizing: border-box;
7+
font-family: 'Poppins', sans-serif;
8+
}
9+
body{
10+
display: flex;
11+
align-items: center;
12+
justify-content: center;
13+
min-height: 100vh;
14+
background: #4D59FB;
15+
}
16+
::selection{
17+
color: #fff;
18+
background: #4D59FB;
19+
}
20+
.wrapper{
21+
width: 420px;
22+
border-radius: 7px;
23+
background: #fff;
24+
padding: 25px 28px 45px;
25+
box-shadow: 7px 7px 20px rgba(0, 0, 0, 0.05);
26+
}
27+
.wrapper header{
28+
font-size: 28px;
29+
font-weight: 500;
30+
text-align: center;
31+
}
32+
.wrapper .search{
33+
position: relative;
34+
margin: 35px 0 18px;
35+
}
36+
.search input{
37+
height: 53px;
38+
width: 100%;
39+
outline: none;
40+
font-size: 16px;
41+
border-radius: 5px;
42+
padding: 0 42px;
43+
border: 1px solid #999;
44+
}
45+
.search input:focus{
46+
padding: 0 41px;
47+
border: 2px solid #4D59FB;
48+
}
49+
.search input::placeholder{
50+
color: #B8B8B8;
51+
}
52+
.search :where(i, span){
53+
position: absolute;
54+
top: 50%;
55+
color: #999;
56+
transform: translateY(-50%);
57+
}
58+
.search i{
59+
left: 18px;
60+
pointer-events: none;
61+
font-size: 16px;
62+
}
63+
.search input:focus ~ i{
64+
color: #4D59FB;
65+
}
66+
.search span{
67+
right: 15px;
68+
cursor: pointer;
69+
font-size: 18px;
70+
display: none;
71+
}
72+
.search input:valid ~ span{
73+
display: block;
74+
}
75+
.wrapper .info-text{
76+
font-size: 13px;
77+
color: #9A9A9A;
78+
margin: -3px 0 -10px;
79+
}
80+
.wrapper.active .info-text{
81+
display: none;
82+
}
83+
.info-text span{
84+
font-weight: 500;
85+
}
86+
.wrapper ul{
87+
height: 0;
88+
opacity: 0;
89+
padding-right: 1px;
90+
overflow-y: hidden;
91+
transition: all 0.2s ease;
92+
}
93+
.wrapper.active ul{
94+
opacity: 1;
95+
height: 303px;
96+
}
97+
.wrapper ul li{
98+
display: flex;
99+
list-style: none;
100+
margin-bottom: 14px;
101+
align-items: center;
102+
padding-bottom: 17px;
103+
border-bottom: 1px solid #D9D9D9;
104+
justify-content: space-between;
105+
}
106+
ul li:last-child{
107+
margin-bottom: 0;
108+
border-bottom: 0;
109+
padding-bottom: 0;
110+
}
111+
ul .word p{
112+
font-size: 22px;
113+
font-weight: 500;
114+
}
115+
ul .word span{
116+
font-size: 12px;
117+
color: #989898;
118+
}
119+
ul .word i{
120+
color: #999;
121+
font-size: 15px;
122+
cursor: pointer;
123+
}
124+
ul .content{
125+
max-height: 215px;
126+
overflow-y: auto;
127+
}
128+
ul .content::-webkit-scrollbar{
129+
width: 0px;
130+
}
131+
.content li .details{
132+
padding-left: 10px;
133+
border-radius: 4px 0 0 4px;
134+
border-left: 3px solid #4D59FB;
135+
}
136+
.content li p{
137+
font-size: 17px;
138+
font-weight: 500;
139+
}
140+
.content li span{
141+
font-size: 15px;
142+
color: #7E7E7E;
143+
}
144+
.content .synonyms .list{
145+
display: flex;
146+
flex-wrap: wrap;
147+
}
148+
.content .synonyms span{
149+
cursor: pointer;
150+
margin-right: 5px;
151+
text-decoration: underline;
152+
}

0 commit comments

Comments
 (0)