Merge pull request #32 from KryptonANSHU/Dictionary_App

gantavyamalviya · web-flow · commit 2ff9e7574fd8 · 2022-10-03T02:49:40.000+05:30
Search Word Definitions App
diff --git a/Search Word Definitions/api.json b/Search Word Definitions/api.json
@@ -0,0 +1,46 @@
+{
+  "word": "amazing",
+  "results": [
+    {
+      "definition": "inspiring awe or admiration or wonder",
+      "partOfSpeech": "adjective",
+      "synonyms": [
+        "awe-inspiring",
+        "awesome",
+        "awful",
+        "awing"
+      ],
+      "similarTo": [
+        "impressive"
+      ],
+      "examples": [
+        "New York is an amazing city"
+      ]
+    },
+    {
+      "definition": "surprising greatly",
+      "partOfSpeech": "adjective",
+      "synonyms": [
+        "astonishing"
+      ],
+      "similarTo": [
+        "surprising"
+      ],
+      "examples": [
+        "she does an amazing amount of work"
+      ]
+    }
+  ],
+  "syllables": {
+    "count": 3,
+    "list": [
+      "a",
+      "maz",
+      "ing"
+    ]
+  },
+  "pronunciation": {
+    "all": "ə'meɪzɪŋ"
+  },
+  "frequency": 4.94
+}
diff --git a/Search Word Definitions/app.js b/Search Word Definitions/app.js
@@ -0,0 +1,37 @@
+console.log('Hello');
+str = "";
+
+const fetchBtn = document.getElementById('fetchBtn');
+const deleteBtn = document.getElementById('deleteBtn');
+
+const inputtext = document.getElementById('inputtext');
+const show = document.getElementById('list');
+
+fetchBtn.addEventListener('click',getdata);
+deleteBtn.addEventListener('click',deletedata);
+
+function getdata(){
+
+    const xhr = new XMLHttpRequest();
+
+    xhr.open('GET',`https://mashape-community-urban-dictionary.p.rapidapi.com/define?term=${inputtext.value}`,true);
+    xhr.setRequestHeader("x-rapidapi-key", "3713d5b39dmshf1764344d8244d5p116e9ajsneb81024be405");
+    xhr.setRequestHeader("x-rapidapi-host", "mashape-community-urban-dictionary.p.rapidapi.com");
+
+    xhr.onload = function(){
+        const response = xhr.responseText;
+        const obj = JSON.parse(response);
+        // console.log(obj.list[0]);
+        str = str + `<strong>${inputtext.value} </strong><li> ${obj.list[0].definition}</li> <br>`;
+        show.innerHTML = str;
+        // inputtext.value = "";
+    }
+
+
+    xhr.send();
+}
+
+function deletedata(){
+show.innerHTML = "";
+str = "";
+}
diff --git a/Search Word Definitions/index.html b/Search Word Definitions/index.html
@@ -0,0 +1,22 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <meta http-equiv="X-UA-Compatible" content="IE=edge">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Get Words Definitions</title>
+</head>
+<body>
+    <h1>Welcome to The Dictionary </h1>
+
+        <input type="text" id="inputtext">
+    <button id="fetchBtn" style="height: 30px; margin: 20px; background-color: rgb(26, 211, 224); border-radius: 7px; font-family: 'Franklin Gothic Medium'; ">Fetch</button>
+    <button id="deleteBtn" style="height: 30px; background-color: greenyellow; border-radius: 7px; font-family: 'Franklin Gothic Medium'; ">Delete All</button>
+    
+    <h2>Defenition</h2>
+    <ul id="list">
+
+    </ul>
+    <script src="app.js"></script>
+</body>
+</html>
