Get definition #12

src/data/content.js

@@ -2,6 +2,7 @@ import { RandomQuote } from "../pages/activities/RandomQuote";
 import { MagicSquares } from "../pages/games/MagicSquares";
 import { TicTacToe } from "../pages/games/TicTacToe";
 import {FortuneCard} from "../pages/activities/FotuneCard";
+import {SearchWord} from "../pages/activities/getDefinition";
 import numberblocs from "../assets/numberblocks.png"
 
 export const activities = [
@@ -19,6 +20,13 @@ export const activities = [
         icon: "https://aws.astrotalk.com/assets/images/wheel_of_fortune.webp" ,
         urlTerm: "get-your-fortune",
         element: <FortuneCard />
+    },
+    {
+        title: "Search Words",
+        description: "Get any definition",
+        icon: "https://www.i2symbol.com/pictures/emojis/f/2/0/4/f2042fedcbc0cdaee2967c4449b62845.png" ,
+        urlTerm: "search-any-word",
+        element: <SearchWord />
     }
 ];
 

src/pages/activities/getDefinition.js

@@ -0,0 +1,59 @@
+import { useState } from "react";
+import axios from "axios";
+import "../../styles/pages/activities/getDefinition.css";
+
+export const SearchWord = () => {
+  const [term, setTerm] = useState();
+  const [definition, setDefinition] = useState();
+
+  const generateDefinition = () => {
+    axios({
+      method: "GET",
+      url: "https://api.urbandictionary.com/v0/define",
+      params: {
+        term: term,
+      },
+    })
+      .then((res) => {
+        const firstDefinition = res.data.list[0];
+        if (firstDefinition) {
+          setDefinition(firstDefinition.definition);
+        } else {
+          setDefinition("No definition found.");
+        }
+      })
+      .catch((error) => console.error(error));
+  };
+
+  const handleSearch = () => {
+    generateDefinition();
+  };
+
+  const handleKeyPress = (e) => {
+    if (e.key === "Enter") {
+      generateDefinition();
+    }
+  };
+
+  return (
+    <div className="rquote-root">
+      <h1>Your Virtual Dictionary</h1>
+      <div>Search a word to get the Meaning Instantly!</div>
+      <div><br></br></div>
+      <div className="search-bar">
+        <input
+          id="Search"
+          type="text"
+          placeholder="Enter a word"
+          value={term}
+          onChange={(e) => setTerm(e.target.value)}
+          onKeyPress={handleKeyPress} 
+        />
+        <button onClick={handleSearch} className="word-button">Search</button>
+      </div>
+      <div className="word-content">
+        <div className="word-definition">{definition}</div>
+      </div>
+    </div>
+  );
+};

src/styles/pages/activities/getDefinition.css

@@ -0,0 +1,28 @@
+#Search{
+    width: 300px;
+    height: 20px;
+    border-radius: 15px;
+}
+
+.word-definition{
+    font-family: "Fira Code Light";
+    font-style: italic;
+    font-size: 20px;
+}
+
+
+.word-button {
+    font-size: 23px;
+    background: white;
+    border-radius: 10px;
+    padding: 10px;
+    margin: 10px;
+    transition-duration: 300ms;
+}
+
+.word-button:hover {
+    cursor: pointer;
+    box-shadow: rgba(0, 0, 0, 0.24) 0px 3px 8px;
+    background: #4c99fc;
+}
+