add logic and add css styling

Author: Lucky-Kashyap

css/style.css

@@ -32,7 +32,7 @@ main form input[type='text']{
     flex-grow: 1;
 
 }
-main form input,button{
+main form input,button,.result div a{
     border: none;
     font-size: 16px;
     font-weight: 500;
@@ -53,4 +53,28 @@ footer{
     font-size: 18px;
     position: fixed;
     width: 100%;
+}
+
+.result{
+    background-color: #fff;
+    padding: 20px;
+    border-radius: 10px;
+    margin-top: 20px;
+    box-shadow: 0px 0px 10px rgba(0,0,0,0.2);
+}
+.result p{
+    margin-top: 10px;
+}
+.result .partsOfSpeech{
+    font-style: italic;
+    color: #008080;
+    margin-top: 2px;
+}
+.result div {
+    margin-top: 20px;
+}
+.result div a{
+    text-decoration: none;
+    background-color: #008080;
+    color: #fff;
 }

js/script.js

@@ -2,11 +2,11 @@
 
 // select elements
 
-const form = document.querySelector('form');
+let form = document.querySelector('form');
 
-const word = document.querySelector('#word');
+let word = document.querySelector('#word');
 
-const result = document.querySelector('.result');
+let result = document.querySelector('.result');
 
 form.addEventListener('submit',(e)=>{
     e.preventDefault();
@@ -16,11 +16,57 @@ form.addEventListener('submit',(e)=>{
 })
 
 const getData=async(word)=>{
+
+    try{
     const res = await fetch(`https://api.dictionaryapi.dev/api/v2/entries/en/${word}`);
     const data = await res.json();
-    // console.log(data);
+    console.log(data);
+
+    let definitions = data[0].meanings[0].definitions[0];
+
+    result.innerHTML = `<h2><strong>Word: </strong>${data[0].word}</h2>
+    <p class="partsOfSpeech">${data[0].meanings[0].partOfSpeech}</p>
+    <p><strong>Meaning: </strong>${definitions.definition===undefined?"Not Found":definitions.definition}</p>
+    <p><strong>Example: </strong>${definitions.example===undefined?"Not Found":definitions.definition}</p>
+    <p><strong>Antonyms: </strong></p>
+    `;
+
+    if(definitions.antonyms.length ===0){
+        result.innerHTML +=`<span>Not Found</span> <br>`;
+    }
+    else{
+        for(let i=0;i<definitions.antonyms.length;i++){
+        result +=`<li>${definitions.antonyms[i]}</li>`
+        }
+
+    
+}
+
+if(data[0].phonetics.length===0){
+    result.innerHTML +=`<p>Audio Not Found</p>`;
+}
+else{
+    for(let i=0;i<data[0].phonetics.length;i++){
+        result.innerHTML +=`Audio :  <audio controls>
+        <source src=${data[0].phonetics[i].audio} type="audio/ogg">
+        
+        Your browser does not support the audio tag.
+      </audio>`
+    }
+}
 
-    result.innerHTML = `<h2>${data[0].meanings[0].definitions[0].definition}</h2>`;
+
+
+
+
+result.innerHTML+= `<div><a href=${data[0].sourceUrls} target="_blank">Read More</a></div>`
+
+    }
+    catch(e){
+        // console.log(e.message);
+        result.innerHTML = "<p>Sorry, the word could not be found</p>"
+    }
     // console.log('word' + word);
 
+
 }