.

README.md

@@ -1,8 +1,4 @@
-# React + Vite
+#Meme Generator
 
-This template provides a minimal setup to get React working in Vite with HMR and some ESLint rules.
-
-Currently, two official plugins are available:
-
-- [@vitejs/plugin-react](https://github.com/vitejs/vite-plugin-react/blob/main/packages/plugin-react/README.md) uses [Babel](https://babeljs.io/) for Fast Refresh
-- [@vitejs/plugin-react-swc](https://github.com/vitejs/vite-plugin-react-swc) uses [SWC](https://swc.rs/) for Fast Refresh
+A Simple React app to generate meme template where you can add text to it
+You can check it here: https://meme-generator-a00b88.netlify.app/

components/meme.jsx

@@ -1,46 +1,64 @@
-import React, { useState } from "react";
-import memesData from "../memesData";
+import React, { useState, useEffect } from "react";
 
 export default function Meme() {
   const [meme, setMeme] = useState({
     topText: "",
     bottomText: "",
-    randomImage: "https://i.imgflip.com/345v97.jpg",
+    randomImage: "https://i.imgflip.com/1g8my4.jpg",
   });
 
-  const [allMemeImages, setAllMemeImages] = useState(memesData);
+  const [allMemes, setAllMemes] = useState([]);
+
+  useEffect(() => {
+    fetch("https://api.imgflip.com/get_memes")
+      .then((res) => res.json())
+      .then((data) => setAllMemes(data.data.memes));
+  }, []);
 
   function getMemeImage() {
-    const memesArray = allMemeImages.data.memes;
-    const randomNumber = Math.floor(Math.random() * memesArray.length);
-    const url = memesArray[randomNumber].url;
+    const randomNumber = Math.floor(Math.random() * allMemes.length);
+    const url = allMemes[randomNumber].url;
     setMeme((prevMeme) => ({
       ...prevMeme,
       randomImage: url,
     }));
   }
+
+  function changeHandler(event) {
+    setMeme((prevMeme) => ({
+      ...prevMeme,
+      [event.target.name]: event.target.value,
+    }));
+  }
+
   return (
     <main>
       <div className="form">
         <input
           className="form-input"
           placeholder="Top Text"
           type="text"
-          name=""
-          id=""
+          name="topText"
+          value={meme.topText}
+          onChange={changeHandler}
         />
         <input
           className="form-input"
           placeholder="Bottom Text"
           type="text"
-          name=""
-          id=""
+          name="bottomText"
+          value={meme.bottomText}
+          onChange={changeHandler}
         />
         <button className="form-btn" onClick={getMemeImage}>
           Get a new meme image🖼
         </button>
       </div>
-      <img src={meme.randomImage} className="meme-image" />
+      <div className="meme">
+        <img src={meme.randomImage} className="meme-image" />
+        <h2 className="meme--text top">{meme.topText}</h2>
+        <h2 className="meme--text bottom">{meme.bottomText}</h2>
+      </div>
     </main>
   );
 }