Dictionary/dictionary.js at main · im-ghost/Dictionary · GitHub

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164


const input = elem("#search-input");

const result = elem("#result");


let load=new Loader();
load.start();
load.addText("Peculiar Dictionary Loading","0.5em");
load.animateText();
load.remove(1000);
function search(e){

 const value= input.value;


 fetch("https://api.dictionaryapi.dev/api/v2/entries/en/"+value).then(response=>response.json()).then(
data=>{
        let loader=new Loader();
loader.start();
loader.addText("Peculiar Dictionary Loading","0.5em");
loader.animateText();
loader.remove(3000);
        display(data)});

}


function display(array){

 if(array instanceof Array){

  let [word]=array;
  const container=document.createElement("div");
  let header=document.createElement("div");
  header.innerHTML=`<h3>${word.word.toUpperCase()}</h3>

  <h5>Transcription and Sound</h5>

  `
container.appendChild(header);


  for( phone of word.phonetics){
let audio=document.createElement("audio");
   if(phone.text){

  audio.innerHTML=`<p class="transcription">${phone.text}</p>`;
}
   if(phone.audio){

    audio.innerHTML=`<audio controls>

    <source src=${phone.audio} type="audio/mpeg"/>

    </audio>`;

   }
container.appendChild(audio);
  }


  for( meaning of word.meanings){

   if(meaning.partOfSpeech){
let partOfSpeech=document.createElement("div");
    partOfSpeech.innerHTML=`<h5 class="part-of-speech">Part of Speech-${meaning.partOfSpeech}</h5>`;
container.appendChild(partOfSpeech);
let meaning_heading=create("h4","Definition","def","def",container);
    for(let def of meaning.definitions){
let meaning=document.createElement("ul");

    meaning.innerHTML+=`<li class="definition">${def.definition}</li>`;

     if(def.synonyms.length>0){

      meaning.innerHTML+=`<li><h5>Synonyms</h5>`;

      for(let synonym of def.synonyms){
let synonyms=document.createElement("ul");
      ol.innerHTML+=`<li class="synonym">${synonym}</li>`;

      }

      meaning.appendChild(synonyms);

     }

     if(def.antonyms.length>0){
let antonyms=document.createElement("ul")
      meaning.innerHTML+=`<li><h5>antonyms</h5 ><ul>`;

      for(let antonym of def.antonyms){

       antonyms.innerHTML+=`<li class="antonym">${antonym}</li>`;

      }


     }

  container.appendChild(meaning);

      if(def.example){
let example=document.createElement("div");
       example.innerHTML="<h6>Example</h6>";

       example.innerHTML+=`<div class="example">\"${def.example}\"</div>`;

      }}

    if(meaning.synonyms.length>0){
let meaning_synonyms=document.createElement("div");
     meaning_synonyms.innerHTML=`<h4>synonyms</h4><ul>`;

      for(let synonym of meaning.synonyms){

       meaning_synonyms.innerHTML+=`<li class="pos-synonym">${synonym}</li>`;

      }

      container.appendChild(meaning_synonyms);

    }

    if(meaning.antonyms.length>0){
let meaning_antonyms=document.createElement("div");
     meaning_antonyms.innerHTML=`<h4>antonyms</h4><ul>`;

      for(let antonym of meaning.antonyms){

       meaning_antonyms.innerHTML+=`<li class="pos-antonym">${antonym}</li>`;

      }

      container.appendChild(meaning_antonyms);

    }

   }

  }


  result.innerHTML=container.innerHTML;

 }else{

  result.innerHTML=`<warning>

 Such word doesn't exist, or it is a country or language. No country definitions in this app, sorry :(<br/> Even names of languages don't qualify, except "English" </warning>`

 }

}
elem("#search").addEventListener ("click",()=>{search(input.value)});