Skip to content

Commit d773963

Browse files
Supriya2922Supriya2922
committed
Dictionary app added
1 parent c170288 commit d773963

File tree

3 files changed

+200
-0
lines changed

3 files changed

+200
-0
lines changed

‎Dictionary_App/index.html

+38
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,38 @@
1+
<!DOCTYPE html>
2+
<html lang="en">
3+
<head>
4+
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
5+
<!-- Font Awesome -->
6+
<link
7+
rel="stylesheet"
8+
href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.4/css/all.min.css"
9+
/>
10+
<!-- Google Fonts -->
11+
<link
12+
href="https://fonts.googleapis.com/css2?family=Poppins&display=swap"
13+
rel="stylesheet"
14+
/>
15+
<!-- Stylesheet -->
16+
<link rel="stylesheet" href="styles.css" />
17+
<title>Dictionary</title>
18+
</head>
19+
<body>
20+
<audio id="sound"></audio>
21+
<div class="heading">
22+
<h1>Dictionary App</h1>
23+
</div>
24+
<div class="container">
25+
<div class="search-box">
26+
<input
27+
type="text"
28+
placeholder="Enter your word and click on Search"
29+
id="inp-word"
30+
/>
31+
<button id="search-btn">Search</button>
32+
</div>
33+
<div class="result" id="result"></div>
34+
</div>
35+
<!-- Script -->
36+
<script src="script.js"></script>
37+
</body>
38+
</html>

‎Dictionary_App/script.js

+38
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,38 @@
1+
const url = "https://api.dictionaryapi.dev/api/v2/entries/en/";
2+
const result = document.getElementById("result");
3+
const sound = document.getElementById("sound");
4+
const btn = document.getElementById("search-btn");
5+
6+
btn.addEventListener("click", () => {
7+
let inpWord = document.getElementById("inp-word").value;
8+
fetch(`${url}${inpWord}`)
9+
.then((response) => response.json())
10+
.then((data) => {
11+
console.log(data);
12+
result.innerHTML = `
13+
<div class="word">
14+
<h3>${inpWord}</h3>
15+
<button onclick="playSound()">
16+
<i class="fas fa-volume-up"></i>
17+
</button>
18+
</div>
19+
<div class="details">
20+
<p>${data[0].meanings[0].partOfSpeech}</p>
21+
<p>/${data[0].phonetic}/</p>
22+
</div>
23+
<p class="word-meaning">
24+
${data[0].meanings[0].definitions[0].definition}
25+
</p>
26+
<p class="word-example">
27+
${data[0].meanings[0].definitions[0].example || ""}
28+
</p>`;
29+
sound.setAttribute("src", `${data[0].phonetics[0].audio}`);
30+
31+
})
32+
.catch(() => {
33+
result.innerHTML = `<h3 class="error">Couldn't Find The Word</h3>`;
34+
});
35+
});
36+
function playSound() {
37+
sound.play();
38+
}

‎Dictionary_App/styles.css

+124
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,124 @@
1+
* {
2+
padding: 0;
3+
margin: 0;
4+
box-sizing: border-box;
5+
}
6+
7+
*:not(i) {
8+
font-family: "Poppins", sans-serif;
9+
}
10+
11+
body {
12+
background: linear-gradient(-45deg, #ee7752, #e73c7e, #23a6d5, #23d5ab);
13+
background-size: 400% 400%;
14+
animation: gradient 15s ease infinite;
15+
height: 100vh;
16+
}
17+
18+
19+
.container {
20+
background-color: #ffffff;
21+
width: 90vmin;
22+
position: absolute;
23+
transform: translate(-50%, -50%);
24+
top: 50%;
25+
left: 50%;
26+
padding: 80px 50px;
27+
border-radius: 10px;
28+
box-shadow: 0 20px 40px rgba(38, 33, 61, 0.2);
29+
}
30+
31+
.search-box {
32+
width: 100%;
33+
display: flex;
34+
justify-content: space-between;
35+
}
36+
37+
.search-box input {
38+
padding: 5px;
39+
width: 70%;
40+
border: none;
41+
outline: none;
42+
border-bottom: 3px solid #61daef;
43+
font-size: 16px;
44+
}
45+
46+
.search-box button {
47+
padding: 15px 0;
48+
width: 25%;
49+
background-color: #61daef;
50+
border: none;
51+
outline: none;
52+
color: #ffffff;
53+
border-radius: 5px;
54+
}
55+
56+
.result {
57+
position: relative;
58+
}
59+
60+
.result h3 {
61+
font-size: 30px;
62+
color: #1f194c;
63+
}
64+
65+
.result .word {
66+
display: flex;
67+
justify-content: space-between;
68+
margin-top: 80px;
69+
}
70+
71+
.result button {
72+
background-color: transparent;
73+
color: #61daef;
74+
border: none;
75+
outline: none;
76+
font-size: 18px;
77+
}
78+
79+
.result .details {
80+
display: flex;
81+
gap: 10px;
82+
color: #b3b6d4;
83+
margin: 5px 0 20px 0;
84+
font-size: 14px;
85+
}
86+
87+
.word-meaning {
88+
color: #575a7b;
89+
}
90+
91+
.word-example {
92+
color: #575a7b;
93+
font-style: italic;
94+
border-left: 5px solid #61daef;
95+
padding-left: 20px;
96+
margin-top: 30px;
97+
}
98+
99+
.error {
100+
margin-top: 80px;
101+
text-align: center;
102+
}
103+
104+
.heading {
105+
display: flex;
106+
justify-content: center;
107+
padding-top: 150px;
108+
font-size: large;
109+
color: whitesmoke;
110+
}
111+
112+
@keyframes gradient {
113+
0% {
114+
background-position: 0% 50%;
115+
}
116+
117+
50% {
118+
background-position: 100% 50%;
119+
}
120+
121+
100% {
122+
background-position: 0% 50%;
123+
}
124+
}

0 commit comments

Comments
 (0)