diff --git a/src/data/content.js b/src/data/content.js
index 2ca5a71..56d8872 100644
--- a/src/data/content.js
+++ b/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:
+ },
+ {
+ 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:
}
];
diff --git a/src/pages/activities/getDefinition.js b/src/pages/activities/getDefinition.js
new file mode 100644
index 0000000..ecc5641
--- /dev/null
+++ b/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 (
+
+
Your Virtual Dictionary
+
Search a word to get the Meaning Instantly!
+
+
+ setTerm(e.target.value)}
+ onKeyPress={handleKeyPress}
+ />
+
+
+
+
+ );
+};
diff --git a/src/styles/pages/activities/getDefinition.css b/src/styles/pages/activities/getDefinition.css
new file mode 100644
index 0000000..f3ed9f5
--- /dev/null
+++ b/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;
+}
+