Skip to content

Commit 0ffab49

Browse files
sahandghavidelsahandghavidel
committed
update english dic project
1 parent 7c5b973 commit 0ffab49

File tree

3 files changed

+114
-266
lines changed

3 files changed

+114
-266
lines changed

‎projects/english-dictionary/index.html

+32-50
Original file line numberDiff line numberDiff line change
@@ -1,53 +1,35 @@
1-
<!Doctype html>
1+
<!DOCTYPE html>
22
<html lang="en">
3-
<head>
4-
<meta charset="utf-8">
3+
<head>
4+
<meta charset="utf-8" />
55
<title>Dictionary App</title>
6-
<meta name="viewport" content="width-device=width, initial-scale=1.0">
7-
<link rel="stylesheet" href="style.css">
8-
<link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
9-
<link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0/css/all.min.css" rel="stylesheet">
10-
</head>
11-
<body>
12-
<div class="wrapper">
13-
<header>English Dictionary</header>
14-
<div class="search">
15-
<input type="text" placeholder="Search a word">
16-
<i class="fas fa-search"></i>
17-
<span class="material-icons">close</span>
18-
</div>
19-
<p class="info-text">Type a word and press enter</p>
20-
<ul>
21-
<li class="word">
22-
<div class="details">
23-
<p>_</p>
24-
<span>___</span>
25-
</div>
26-
<i class="fas fa-volume-up"></i>
27-
</li>
28-
<div class="content">
29-
<li class="meaning">
30-
<div class="details">
31-
<p>Meaning</p>
32-
<span>___</span>
33-
</div>
34-
</li>
35-
<div class="example">
36-
<li class="meaning">
37-
<div class="details">
38-
<p>Example</p>
39-
<span>___</span>
40-
</div>
41-
</li>
42-
<div class="synonyms">
43-
<div class="details">
44-
<p>Synonyms</p>
45-
<div class="list"></div>
46-
</div>
47-
</div>
48-
</ul>
49-
</div>
50-
<script src="index.js"></script>
516

52-
</body>
53-
</html>
7+
<link rel="stylesheet" href="style.css" />
8+
<link
9+
href="https://fonts.googleapis.com/icon?family=Material+Icons"
10+
rel="stylesheet"
11+
/>
12+
<link
13+
href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0/css/all.min.css"
14+
rel="stylesheet"
15+
/>
16+
</head>
17+
<body>
18+
<div class="container" id="container">
19+
<h1 class="heading">English Dictionary</h1>
20+
<input type="text" class="input" id="input" placeholder="Search a word" />
21+
<p class="info-text" id="info-text">Type a word and press enter</p>
22+
<div class="meaning-container" id="meaning-container">
23+
<p>Word Title: <span class="title" id="title">___</span></p>
24+
<p>Meaning: <span class="meaning" id="meaning">___</span></p>
25+
26+
<audio
27+
id="audio"
28+
controls
29+
src="https://api.dictionaryapi.dev/media/pronunciations/en/hello-au.mp3"
30+
></audio>
31+
</div>
32+
</div>
33+
<script src="index.js"></script>
34+
</body>
35+
</html>

‎projects/english-dictionary/index.js

+45-65
Original file line numberDiff line numberDiff line change
@@ -1,73 +1,53 @@
1-
const wrapper = document.querySelector(".wrapper"),
2-
searchInput = wrapper.querySelector("input"),
3-
synonyms = wrapper.querySelector(".synonyms .list"),
4-
infoText = wrapper.querySelector(".info-text"),
5-
volumeIcon = wrapper.querySelector(".word i"),
6-
removeIcon = wrapper.querySelector(".search span");
7-
let audio;
8-
9-
10-
function data(result, word) {
11-
if (result.title){
12-
infoText.innerHTML = `Can't find the meaning of <span>"${word}"</span>.Please try to search for another
13-
word`;
14-
}
15-
else {
16-
console.log(result);
17-
wrapper.classList.add("active");
18-
let definitions = result[0].meanings[0].definitions[0],
19-
phonetics = `${result[0].meanings[0].partOfSpeech} / ${result[0].phonetics[0].text} / `;
20-
21-
document.querySelector('.word p').innerText = result[0].word;
22-
document.querySelector('.word span').innerText = phonetics;
23-
document.querySelector('.meaning span').innerText = definitions.definition;
24-
document.querySelector('.example span').innerText = definitions.example;
25-
audio = new Audio('https:' + result[0].phonetics[0].audio);
26-
27-
if(definitions.synonyms[0] == undefined){
28-
synonyms.parentElement.style.display = 'none';
29-
}
30-
else {
31-
synonyms.parentElement.style.display = 'block';
32-
synonyms.innerHTML = "";
33-
for( let i =0; i < 5; i++) {
34-
let tag = `<span onclick = search('${definitions.synonyms[i]}')>${definitions.synonyms[i]},</span>`;
35-
synonyms.insertAdjacentHTML('beforeend', tag);
36-
}
37-
}
1+
const containerEl = document.getElementById("container"),
2+
searchInput = document.getElementById("input");
3+
infoTextEl = document.getElementById("info-text");
4+
const audioEl = document.getElementById("audio");
5+
6+
const meaningContainerEl = document.getElementById("meaning-container");
7+
8+
const titleEl = document.getElementById("title");
9+
const meaningEl = document.getElementById("meaning");
10+
11+
async function fetchApi(word) {
12+
try {
13+
infoTextEl.style.display = "block";
14+
infoTextEl.innerText = `Searching the meaning of "${word}"`;
15+
meaningContainerEl.style.display = "none";
16+
const url = `https://api.dictionaryapi.dev/api/v2/entries/en/${word}`;
17+
const result = await fetch(url).then((res) => res.json());
18+
19+
if (result.title) {
20+
titleEl.innerText = word;
21+
meaningEl.innerText = "N/A";
22+
audioEl.style.display = "none";
3823
}
39-
}
4024

41-
function search (word){
42-
searchInput.value = word;
43-
fetchApi(word);
44-
}
25+
const definitions = result[0].meanings[0].definitions[0];
4526

46-
function fetchApi(word) {
47-
wrapper.classList.remove('active');
48-
infoText.style.color = '#000';
49-
infoText.innerHTML = `Searching the meaning of<span>"${word}"</span>`;
50-
let url = `https://api.dictionaryapi.dev/api/v2/entries/en/${word}`;
51-
// fetching api response and returning it with parsing into js obj
52-
//method calling data with passing api response
53-
fetch(url).then(res => res.json()).then(result => data(result, word));
54-
}
27+
titleEl.innerText = result[0].word;
5528

29+
meaningEl.innerText = definitions.definition;
5630

57-
searchInput.addEventListener('keyup', e => {
58-
if(e.key === 'Enter' && e.target.value){
59-
fetchApi(e.target.value);
31+
if (result[0].phonetics[0].audio) {
32+
audioEl.style.display = "inline-flex";
33+
34+
audioEl.src = result[0].phonetics[0].audio;
35+
} else {
36+
audioEl.style.display = "none";
6037
}
61-
});
6238

63-
volumeIcon.addEventListener('click', () => {
64-
audio.play();
65-
});
39+
infoTextEl.style.display = "none";
40+
meaningContainerEl.style.display = "block";
41+
} catch (error) {
42+
console.log(error);
43+
infoTextEl.style.display = "none";
44+
meaningContainerEl.style.display = "block";
45+
audioEl.style.display = "none";
46+
}
47+
}
6648

67-
removeIcon.addEventListener('click', () => {
68-
searchInput.value = "";
69-
searchInput.focus();
70-
wrapper.classList.remove("active");
71-
infoText.style.color = '#9a9a9a';
72-
infoText.innerHTML= "Type a word and press enter";
73-
});
49+
searchInput.addEventListener("keyup", (e) => {
50+
if (e.key === "Enter" && e.target.value) {
51+
fetchApi(e.target.value);
52+
}
53+
});

‎projects/english-dictionary/style.css

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

0 commit comments

Comments
 (0)