Edited the code to make it neat and better

package.json

@@ -12,7 +12,7 @@
     "path": "^0.12.7",
     "react": "^16.13.1",
     "react-dom": "^16.13.1",
-    "react-scripts": "3.4.1"
+    "react-scripts": "^3.4.3"
   },
   "scripts": {
     "start": "node server.js",

src/App.css

@@ -1,5 +1,5 @@
 body {
-  background: url('./image.jpg');
+  background: url("./image.jpg");
   background-size: cover;
   margin: 0;
 }
@@ -9,13 +9,13 @@ body {
   margin: 1rem 2rem;
 }
 
-.logo{
-  width:100%
+.logo {
+  width: 100%;
 }
 
 .header {
   margin: 5px 10px;
-  border-radius: .3em;
+  border-radius: 0.3em;
   display: flex;
   justify-content: center;
   align-items: center;
@@ -28,20 +28,20 @@ body {
 .form-group {
   display: flex;
   flex-direction: column;
-  margin: .5rem;
+  margin: 0.5rem;
 }
 
 .form-group > label {
   color: rgb(242, 238, 245);
   font-size: 1rem;
-  margin-bottom: .25rem;
+  margin-bottom: 0.25rem;
 }
 
 .btn {
   background-color: hsl(17, 100%, 50%);
   color: rgb(232, 233, 248);
-  padding: .7em 1em;
-  border-radius: .3em;
+  padding: 0.7em 1em;
+  border-radius: 0.3em;
   border: none;
   margin-top: 4px;
   cursor: pointer;
@@ -65,18 +65,19 @@ body {
   justify-content: center;
   align-items: center;
   position: relative;
-  border-radius: .25rem;
+  border-radius: 0.25rem;
   box-shadow: 0 0 5px 2px rgba(248, 77, 9, 0.767);
   background-color: rgba(228, 212, 200, 0.911);
   transform-style: preserve-3d;
   transition: 150ms;
   cursor: pointer;
-  transform: perspective(1000px) rotateY(var(--rotate-y, 0)) translateY(var(--translate-y, 0));
+  transform: perspective(1000px) rotateY(var(--rotate-y, 0))
+    translateY(var(--translate-y, 0));
 }
 
 .card:hover {
   --translate-y: -2px;
-  box-shadow: 0 0 5px 2px rgba(0, 0, 0, .5);
+  box-shadow: 0 0 5px 2px rgba(0, 0, 0, 0.5);
 }
 
 .card.flip {
@@ -100,15 +101,15 @@ body {
 }
 
 .flashcard-options {
-  margin-top: .5rem;
+  margin-top: 0.5rem;
 }
 
 .flashcard-option {
-  margin-top: .25rem;
+  margin-top: 0.25rem;
   color: rgb(53, 51, 51);
   font-size: 1rem;
 }
 
 .flashcard-option:first-child {
   margin-top: 0;
-}
+}

src/App.js

@@ -1,90 +1,106 @@
-import React, { useState, useEffect, useRef } from 'react';
-import FlashcardList from './FlashcardList';
-import './App.css'
-import axios from 'axios'
-import logo from './test.png'
+import React, { useState, useEffect, useRef } from "react";
+import FlashcardList from "./FlashcardList";
+import "./App.css";
+import axios from "axios";
+import logo from "./test.png";
 
 function App() {
-  const [flashcards, setFlashcards] = useState(Sample)
-  const [categories, setCategories] = useState([])
+  const [flashcards, setFlashcards] = useState(Sample);
+  const [categories, setCategories] = useState([]);
 
-  const categoryEl = useRef()
-  const amountEl = useRef()
+  const categoryEl = useRef();
+  const amountEl = useRef();
 
   useEffect(() => {
-    axios
-      .get('https://opentdb.com/api_category.php')
-      .then(res => {
-        setCategories(res.data.trivia_categories)
-      })
-  }, [])
+    axios.get("https://opentdb.com/api_category.php").then((res) => {
+      setCategories(res.data.trivia_categories);
+    });
+  }, []);
 
-  useEffect(() => {
-
-  }, [])
+  useEffect(() => {}, []);
 
   function decodeString(str) {
-    const textArea = document.createElement('textarea')
-    textArea.innerHTML= str
-    return textArea.value
+    const textArea = document.createElement("textarea");
+    textArea.innerHTML = str;
+    return textArea.value;
   }
 
   function handleSubmit(e) {
-    e.preventDefault()
+    e.preventDefault();
     axios
-    .get('https://opentdb.com/api.php', {
-      params: {
-        amount: amountEl.current.value,
-        category: categoryEl.current.value
-      }
-    })
-    .then(res => {
-      setFlashcards(res.data.results.map((questionItem, index) => {
-        const answer = decodeString(questionItem.correct_answer)
-        const options = [
-          ...questionItem.incorrect_answers.map(a => decodeString(a)),
-          answer
-        ]
-        return {
-          id: `${index}-${Date.now()}`,
-          question: decodeString(questionItem.question),
-          answer: answer,
-          options: options.sort(() => Math.random() - .5)
-        }
-      }))
-    })
+      .get("https://opentdb.com/api.php", {
+        params: {
+          amount: amountEl.current.value,
+          category: categoryEl.current.value,
+        },
+      })
+      .then((res) => {
+        setFlashcards(
+          res.data.results.map((questionItem, index) => {
+            const answer = decodeString(questionItem.correct_answer);
+            const options = [
+              ...questionItem.incorrect_answers.map((a) => decodeString(a)),
+              answer,
+            ];
+            return {
+              id: `${index}-${Date.now()}`,
+              question: decodeString(questionItem.question),
+              answer: answer,
+              options: options.sort(() => Math.random() - 0.5),
+            };
+          })
+        );
+      });
   }
 
   return (
     <>
       <form className="header row" onSubmit={handleSubmit}>
-          <div className="row logo">
-            <div className="col-12 col-md">
-              <center> <img src={logo} height="120px" /> </center>
-            </div>
-          </div>
-
-          <div className="form-group form-control">
-            <label htmlFor="category"><strong>Category</strong></label>
-            <select id="category" ref={categoryEl}>
-              {categories.map(category => {
-                return <option value={category.id} key={category.id}>{category.name}</option>
-              })}
-            </select>
-          </div>
-          <div className="form-group form-control">
-            <label htmlFor="amount"><strong>Number of Questions</strong></label>
-            <input type="number" id="amount" min="2" max="50" step="1" defaultValue={10} ref={amountEl} />
+        <div className="row logo">
+          <div className="col-12 col-md">
+            <center>
+              {" "}
+              <img src={logo} height="120px" />{" "}
+            </center>
           </div>
-          <div className="form-group form-control">
-            <button className="btn btn-primary">Generate</button>
-          </div>
-        </form>
-
+        </div>
 
-        <div className="container">
-          <FlashcardList flashcards={flashcards} />
+        <div className="form-group form-control">
+          <label htmlFor="category">
+            <strong>Category</strong>
+          </label>
+          <select id="category" ref={categoryEl}>
+            {categories.map((category) => {
+              return (
+                <option value={category.id} key={category.id}>
+                  {category.name}
+                </option>
+              );
+            })}
+          </select>
+        </div>
+        <div className="form-group form-control">
+          <label htmlFor="amount">
+            <strong>Number of Questions</strong>
+          </label>
+          <input
+            type="number"
+            id="amount"
+            min="2"
+            max="50"
+            step="1"
+            defaultValue={10}
+            ref={amountEl}
+          />
         </div>
+        <div className="form-group form-control">
+          <button className="btn btn-primary">Generate</button>
+        </div>
+      </form>
+
+      <div className="container">
+        <FlashcardList flashcards={flashcards} />
+      </div>
     </>
   );
 }
@@ -93,10 +109,9 @@ const Sample = [
   {
     id: 1,
     question: `This is a Sample Question, Please tap on the flashcard to check the answer:------------------------ What's my Roll no. ? `,
-    answer: '18CS04 . Great!, Now Select the category you want and start testing your knowledge.',
-    options:[
-      '18CS04', '18CSE', '18CS', '18CS4'
-    ]
-  }
-]
-export default App;
+    answer:
+      "18CS04 . Great!, Now Select the category you want and start testing your knowledge.",
+    options: ["18CS04", "18CSE", "18CS", "18CS4"],
+  },
+];
+export default App;

src/Flashcard.js

@@ -1,39 +1,49 @@
-import React, { useState, useEffect, useRef } from 'react'
+import React, { useState, useEffect, useRef } from "react";
 
 export default function Flashcard({ flashcard }) {
-  const [flip, setFlip] = useState(false)
-  const [height, setHeight] = useState('initial')
+  const [flip, setFlip] = useState(false);
+  const [height, setHeight] = useState("initial");
 
-  const frontEl = useRef()
-  const backEl = useRef()
+  const frontEl = useRef();
+  const backEl = useRef();
 
   function setMaxHeight() {
-    const frontHeight = frontEl.current.getBoundingClientRect().height
-    const backHeight = backEl.current.getBoundingClientRect().height
-    setHeight(Math.max(frontHeight, backHeight, 100))
+    const frontHeight = frontEl.current.getBoundingClientRect().height;
+    const backHeight = backEl.current.getBoundingClientRect().height;
+    setHeight(Math.max(frontHeight, backHeight, 100));
   }
 
-  useEffect(setMaxHeight, [flashcard.question, flashcard.answer, flashcard.options])
+  useEffect(setMaxHeight, [
+    flashcard.question,
+    flashcard.answer,
+    flashcard.options,
+  ]);
   useEffect(() => {
-    window.addEventListener('resize', setMaxHeight)
-    return () => window.removeEventListener('resize', setMaxHeight)
-  }, [])
+    window.addEventListener("resize", setMaxHeight);
+    return () => window.removeEventListener("resize", setMaxHeight);
+  }, []);
 
   return (
     <div
-      className={`card ${flip ? 'flip' : ''}`}
+      className={`card ${flip ? "flip" : ""}`}
       style={{ height: height }}
       onClick={() => setFlip(!flip)}
     >
       <div className="front" ref={frontEl}>
         {flashcard.question}
         <div className="flashcard-options">
-          {flashcard.options.map(option => {
-            return <div className="flashcard-option" key={option}>{option}</div>
+          {flashcard.options.map((option) => {
+            return (
+              <div className="flashcard-option" key={option}>
+                {option}
+              </div>
+            );
           })}
         </div>
       </div>
-      <div className="back" ref={backEl}>{flashcard.answer}</div>
+      <div className="back" ref={backEl}>
+        {flashcard.answer}
+      </div>
     </div>
-  )
-}
+  );
+}

src/FlashcardList.js

@@ -1,12 +1,12 @@
-import React from 'react'
-import Flashcard from './Flashcard';
+import React from "react";
+import Flashcard from "./Flashcard";
 
-export default function FlashcardList({flashcards}) {
-    return (
-        <div className="card-grid">
-            {flashcards.map(flashcard => {
-                return <Flashcard flashcard={flashcard} key={flashcard.id} />
-            })}
-        </div>
-    )
-}
+export default function FlashcardList({ flashcards }) {
+  return (
+    <div className="card-grid">
+      {flashcards.map((flashcard) => {
+        return <Flashcard flashcard={flashcard} key={flashcard.id} />;
+      })}
+    </div>
+  );
+}