Skip to content

Navigation Menu

Sign in
Appearance settings

Search code, repositories, users, issues, pull requests...

Provide feedback

We read every piece of feedback, and take your input very seriously.

Saved searches

Use saved searches to filter your results more quickly
Sign up
Appearance settings

Commit 0ffab49

Browse files
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
Lines changed: 32 additions & 50 deletions
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‎

Lines changed: 45 additions & 65 deletions
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+
});
Lines changed: 37 additions & 151 deletions
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)

AltStyle によって変換されたページ (->オリジナル) /