Add code comments

src/App.js

@@ -48,6 +48,7 @@ function App() {
       //Generate options array of 3 random countries + one correct
       while (countries.length > 0 && opt.length < 4) {
         let newCountry = pickRandomCountry();
+        //Check if country already exists in options array
         if (!opt.some((option) => option.name === newCountry.name)) {
           opt.push(newCountry);
         }

src/components/Main.js

@@ -16,6 +16,9 @@ const Main = ({
   const [clicked, setClicked] = useState(false);
 
   const checkAnswer = (event) => {
+    //Function checks if the answer is correct
+    //If it is, it adds the points to the score
+    //If it is not, it adds wrong classname, and sets the incorrect variable to true
     if (!answered) {
       if (event.target.children[1].innerHTML === country.name) {
         event.target.className += "correct";
@@ -31,6 +34,7 @@ const Main = ({
   useEffect(() => {
     function generateRandomNumberArr() {
       //Generate random number from 0 to 4 and push it to array if it does not contain it
+      //Function is used to generate answer order
       const arr = [];
 
       while (arr.length < 4) {
@@ -69,12 +73,16 @@ const Main = ({
   ));
 
   return (
+    /****** Main card element ******/
+
     <main className="Main py-20 w-full h-full flex">
       <div className="Card m-auto w-full sm:w-5/6 lg:w-3/6 max-w-md min-h-2/3 bg-white rounded-xl relative">
         <h1 className="CardText max-w-1/2 -top-8 md:-top-12 text-lg sm:text-3xl text-white font-bold uppercase absolute ">
           Country Quiz
         </h1>
-
+        {/* If incorrect answer is provided and results button is clicked
+         * display results page
+         *  */}
         {incorrect && clicked ? (
           <div className="flex flex-col items-center p-10 gap-3">
             <img
@@ -93,6 +101,7 @@ const Main = ({
               </span>{" "}
               correct answers!
             </p>
+            {/* Button resets stats and restarts game */}
             <button
               className="mt-10 w-1/2 border-2 border-indigo-800 p-3 text-indigo-800 rounded-xl cursor-pointer transition-all hover:bg-yellow-500 hover:border-yellow-500 hover:text-white"
               onClick={() => {
@@ -106,6 +115,7 @@ const Main = ({
             </button>
           </div>
         ) : (
+          /* Question part of card */
           <>
             <img
               aria-hidden="true"