first commit

Rajkr16 · Rajkr16 · commit 0374bcf7a51c · 2024-04-08T20:57:04.000+05:30
diff --git a/app.js b/app.js
@@ -0,0 +1,51 @@
+const input=document.querySelector(".input");
+const p=document.querySelector("#info");
+const meaningCont=document.querySelector(".meaning-container");
+const title=document.querySelector(".title");
+const meaning=document.querySelector(".meaning");
+const audio=document.querySelector("#audio");
+
+async function fetchApi(word){
+    try {
+        // console.log(word);
+        p.style.display="block";
+        meaningCont.style.display="none";
+        p.innerText=`Searching the meaning of ${word}...`;
+
+
+    const url=` https://api.dictionaryapi.dev/api/v2/entries/en/${word}`;
+    console.log(url);
+    const result=await fetch(url).then((res)=>
+        res.json());
+        
+        if(result.title){
+            p.style.display="block";
+            meaningCont.style.display="none";
+
+            title.innerText=word;
+            meaning.innerText="N/A";
+            audio.style.display="none";
+        }
+        console.log(result);
+        p.style.display="none";
+        meaningCont.style.display="block";
+        title.innerText=result[0].word;
+        meaning.innerText=result[0].meanings[0].definitions[0].definition;
+        audio.src=result[0].phonetics[0].audio;
+    } catch (error) {
+        console.log(error);
+        // p.innerText="An error happened, please try again later";
+        p.innerText=`${error}`;
+    }
+}
+
+input.addEventListener("keyup",(event)=>{
+    // console.log(event);
+    // console.log(event.target);
+    // console.log(event.key);
+    // console.log(event.target.value);
+    if(event.target.value && event.key ==="Enter"){
+        fetchApi(event.target.value);
+    }
+
+})
diff --git a/index.html b/index.html
@@ -0,0 +1,25 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>English Dictionary</title>
+    <link rel="stylesheet" href="style.css">
+</head>
+<body>
+    <div class="main">
+        <div class="container">
+            <h1>English Dictionary</h1>
+            <input type="text" class="input" placeholder="Search a word" >
+            <p id="info">Type a word and press enter</p>
+            
+        <div class="meaning-container">
+            <p>Word Title : <span class="title">___</span> </p>
+            <p>Meaning : <span class="meaning">___</span></p>
+            <audio src="" controls id="audio"></audio>
+        </div>
+        </div>
+    </div>
+    <script src="app.js"></script>
+</body>
+</html>
diff --git a/style.css b/style.css
@@ -0,0 +1,44 @@
+.main{
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    height: 100vh;
+    background-color: salmon;
+    margin: 0;
+    padding: 0;
+    font-family: 'Courier New', Courier, monospace;
+}
+.container{
+    /* display: flex;
+    flex-direction: column;
+    justify-content: center;
+    align-items: center; */
+    text-align: center;
+    background-color: rgba(255,255,255,0.3);
+    margin: 20px;
+    padding: 28px;
+    width: 85%;
+    max-width: 400px;
+    box-shadow: 0px 10px 10px rgba(0,0,0,0.3 );
+    border-radius: 7px;
+    font-weight: 500;
+    font-size: 18px;
+}
+.input{
+    width: 80%;
+    /* height: 3px; */
+    /* text-align: center; */
+    padding: 15px 30px;
+    border: 2px solid black;
+    border-radius: 5px;
+    background-color: rgb(255,255,255,0.6);
+    font-size: 16px;
+}
+#audio{
+    border-radius: 50px;
+    background-color: white;
+}
+
+.meaning-container{
+    display: none;
+}
