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} + /> + +
+
+
{definition}
+
+
+ ); +}; 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; +} +