Meme generator #13 (#63)

* Meme generator #13

* Meme generator #13

* Meme generator #13 Made changes.

src/data/content.js

@@ -6,6 +6,8 @@ import { GuessTheFlag } from "../pages/games/GuessFlag";
 import {FortuneCard} from "../pages/activities/FotuneCard";
 import {SearchWord} from "../pages/activities/getDefinition";
 import {Jitter}  from "../pages/games/Jitter";
+import {RandomMeme} from "../pages/activities/RandomMemes";
+import meme from "../assets/activities/meme.jpg"
 import numberblocs from "../assets/numberblocks.png"
 import wordleicon from "../assets/games/Wordle/wordlejpg.png"
 import flagger from "../assets/games/flag guess/flagger.png"
@@ -18,7 +20,13 @@ export const activities = [
         urlTerm: "random-quotes",
         element: <RandomQuote />
     },
-
+    {
+        title: "Random memes",
+        description: "Get random meme",
+        icon: meme,
+        urlTerm: "random-memes",
+        element: <RandomMeme />
+    },
     {
         title: "Fortune Card",
         description: "Get your fortune",

src/pages/activities/RandomMemes.js

@@ -0,0 +1,50 @@
+import {useEffect, useState} from "react";
+import axios from "axios";
+import "../../styles/pages/activities/RandomMeme.css"
+
+export const RandomMeme = () => {
+
+    const [meme, setMeme] = useState()
+    const [subreddit, setSubreddit] = useState("")
+    const [link, setLink] = useState("")
+
+    function Submit() {
+        setLink(subreddit)
+        setSubreddit("")   
+        document.getElementById('rmeme-text').value = ''    
+    }
+
+    function GetName(val){
+        setSubreddit("/"+val.target.value)
+    }
+
+    const generateMeme = () => {
+        axios({
+            method: "GET",
+            url: "https://meme-api.com/gimme"+link
+        }).then(res => setMeme(res.data))
+            .catch(error => console.error(error))
+    }
+
+    useEffect(() => {
+        generateMeme()
+    }, [])
+
+    return (
+        <div className="rmeme-root">
+            <div>Enter the name of Reddit community you want to get memes from.</div>
+            <div> Some examples are animememes, dankmemes, wholesomememes, etc. Submit empty box to get random memes</div>
+            <div> <b>* Enter name of community without r/. For example to get anime memes and access community r/animememes, enter just animememes.</b></div>
+            <input className="rmeme-text" placeholder="Enter name of community here" id="rmeme-text" type="text" onChange={GetName}></input>
+            <button className="rmeme-submit" onClick={Submit}>Submit</button>
+            {
+                meme && (
+                        <div className="rmeme-meme"><img src={meme.url}></img></div>
+                )
+            }
+            <button className="rmeme-button" onClick={generateMeme}>
+                Generate Meme
+            </button>
+        </div>
+    )
+}

src/styles/pages/activities/RandomMeme.css

@@ -0,0 +1,67 @@
+.rmeme-root {
+    display: flexbox;
+    flex-direction: row;
+}
+/* .rmeme-content {
+    margin: 10px;
+    font-style: italic;
+    padding: 10px;
+    font-family: "Fira Code Light";
+
+} */
+.rmeme-meme {
+    margin-left: auto;
+    margin-right: auto;
+}
+
+.rmeme-meme img{
+    max-width: 30rem;
+    max-height: 30rem;
+    object-fit: contain;
+}
+
+.rmeme-button {
+    font-size: 23px;
+    background: white;
+    border-radius: 10px;
+    padding: 10px;
+    margin: 10px;
+    transition-duration: 300ms;
+}
+
+.rmeme-button:hover {
+    cursor: pointer;
+    box-shadow: rgba(0, 0, 0, 0.24) 0px 3px 8px;
+    background: #c9c9c9;
+}
+
+.rmeme-text {
+    width: 20rem;
+    height: 2rem;
+    margin-top: 2rem;
+    margin-bottom: 2rem;
+}
+
+.rmeme-text::placeholder{
+    font-size: large;
+}
+
+.rmeme-submit {
+    margin-left: 1rem;
+    height: 2rem;
+    width: 5rem;
+    border-radius: 2rem;
+    color: blue;
+    background-color: white;
+    border-color: blue;
+    margin-bottom: 2rem;
+    margin-top: 2rem;
+    transition-duration: 0.3s;
+}
+
+.rmeme-submit:hover{
+    background-color: blue;
+    transform: scale(1.1);
+    color: white;
+    cursor: pointer;
+}