fixed a bug

favy-codez · Aug 21, 2023 · b7ee965 · b7ee965
1 parent f39989f
commit b7ee965
Show file tree

Hide file tree

Showing 3 changed files with 36 additions and 1 deletion.
diff --git a/index.html b/index.html
@@ -13,7 +13,7 @@
 </head>
 <body>
     <div class="container">
-        <h1 class="heading">Englist Dictionary</h1>
+        <h1 class="heading">English Dictionary</h1>
         <input type="text" name="" class="input" id="input" placeholder="Search a word">
         <p class="info-text" id="info-text">Type a word and press enter</p>
         <div class="meaning-container" id="meaning-cntainer">

diff --git a/script.js b/script.js
@@ -0,0 +1,17 @@
+const input = document.getElementById("input");
+
+async function fetchAPI(word){
+    const url = `https://api.dictionaryapi.dev/api/v2/entries/en/${word}`
+    const result = await fetch(url).then((res)=>res.json())
+    console.log(result);
+}
+
+input.addEventListener("keyup", (e)=> {
+        // console.log anything we enter 
+    // console.log(e.target.value);
+        // shows the key e.g enter, backspace
+    // console.log(e.key);
+    if(e.target.value && e.key === "Enter"){
+        fetchAPI(e.target.value)
+    }
+})
diff --git a/style.css b/style.css
@@ -24,4 +24,22 @@ body{
     max-width: 450px;
     text-align: center;
     font-size: 18px;
+    font-weight: 500;
+}
+
+.heading{
+    font-size: 28px;
+}
+.input{
+    height: 53px;
+    width: 300px;
+    background-color: rgba(255, 255, 255, .6);
+    border-color: rgba(255, 255, 255, .4);
+    font-size: 16px;
+    padding: 0px 42px;
+    border-radius: 5px;
+}
+
+.meaning-container{
+    display: none;
 }