adds jokes based on the time to take the quiz

.gitignore

@@ -4,6 +4,7 @@
 /node_modules
 /.pnp
 .pnp.js
+.prettierrc
 
 # testing
 /coverage

package.json

@@ -11,6 +11,7 @@
     "react-dom": "^18.2.0",
     "react-router-dom": "^6.16.0",
     "react-scripts": "5.0.1",
+    "tailwind-merge": "^1.14.0",
     "web-vitals": "^2.1.4"
   },
   "scripts": {

src/Components/Button.js

@@ -0,0 +1,20 @@
+import React from 'react';
+import { twMerge } from 'tailwind-merge';
+
+const Button = (props) => {
+    return (
+        <>
+            <button
+                className={twMerge(
+                    'bg-[#4D6B73] text-[#FFFEF2] text-2xl px-2 rounded-md font-semibold border border-black m-1 w-fit hover:bg-[#3d555c] hover:hfont-bold',
+                    props.className,
+                )}
+                onClick={props.onClick}
+            >
+                {props.children}
+            </button>
+        </>
+    );
+};
+
+export default Button;

src/Components/Panel.js

@@ -1,27 +1,34 @@
-import React from 'react'
-import { QUIZ_DATA } from '../Statics/QuizData'
+import React from 'react';
+import { QUIZ_DATA } from '../Statics/QuizData';
 
 const Panel = ({ questions, setSelected }) => {
     return (
-        <div className='p-3 bg-[#4D6B73]'>
-            <h1 className='text-4xl bg-[#4D6B73] text-[#FFFEF2]'>Question List</h1>
-            <h3 className='bg-[#4D6B73] text-[#FFFEF2]'>Click on the button to reach the question</h3>
+        <div className="p-3 bg-[#4D6B73]">
+            <h1 className="text-4xl bg-[#4D6B73] text-[#FFFEF2]">
+                Question List
+            </h1>
+            <h3 className="bg-[#4D6B73] text-[#FFFEF2]">
+                Click on the button to reach the question
+            </h3>
             <br />
 
             {
                 // console.log(questions)
-                questions.map(
-                    (question, index) => (
-                        <span className={`text-[#FFFEF2] border w-9 text-center rounded-md inline-block m-1 p-2 font-bold ${question.choice ? `bg-[#6BAA75]` : `bg-[#D64045]`}`}  onClick={() => setSelected(index)} 
+                questions.map((question, index) => (
+                    <span
+                        className={`text-[#FFFEF2] border w-9 text-center rounded-md inline-block m-1 p-2 font-bold ${
+                            question.choice ? `bg-[#6BAA75]` : `bg-[#D64045]`
+                        }`}
+                        onClick={() => setSelected(index)}
                         // style={{ background: question.choice ? QUIZ_DATA.COLOR.MARKED : QUIZ_DATA.COLOR.UNMARKED }}
-                        >
-                            {index + 1}
-                        </span>
-                    )
-                )
+                    >
+                        {index + 1}
+                    </span>
+                ))
             }
         </div>
-    )
-}
+    );
+};
+
+export default Panel;
 
-export default Panel

src/Components/Question.js

@@ -1,28 +1,29 @@
-import React, { useEffect, useState } from 'react'
+import React, { useEffect, useState } from 'react';
+import Button from './Button';
 
 const Question = ({ index, question }) => {
     const [options, setOptions] = useState([]);
     const [selectedOption, setSelectedOption] = useState('');
 
     const decodeHtml = (html) => {
-        var txt = document.createElement("textarea");
+        var txt = document.createElement('textarea');
         txt.innerHTML = html;
         return txt.value;
-    }
+    };
 
     const shuffle = (array) => {
         array.sort(() => Math.random() - 0.5);
-    }
+    };
 
     const makeOptions = () => {
         let allOptions = [];
 
-        question.incorrect_answers.forEach(answer => {
-            allOptions.push({ option: answer, answer: 'incorrect' })
+        question.incorrect_answers.forEach((answer) => {
+            allOptions.push({ option: answer, answer: 'incorrect' });
         });
 
-        let correct = question.correct_answer
-        allOptions.push({ option: correct, answer: 'correct' })
+        let correct = question.correct_answer;
+        allOptions.push({ option: correct, answer: 'correct' });
 
         // console.log(question.question)
         // allOptions.forEach(option => {
@@ -31,11 +32,11 @@ const Question = ({ index, question }) => {
 
         shuffle(allOptions);
         setOptions(allOptions);
-    }
+    };
 
     useEffect(() => {
         makeOptions();
-    }, [])
+    }, []);
 
     const handleOptionChange = (event) => {
         setSelectedOption(event.target.value);
@@ -52,46 +53,43 @@ const Question = ({ index, question }) => {
         const choice = event.target.value;
         question.choice = choice;
         // console.log(question)
-    }
-
+    };
 
     return (
-        <div className='border-2 border-[#4D6B73] rounded-md m-[25px]  p-3'>
-            <p className='text-xl text-left italic underline underline-offset-2'>Question: {index}</p>
-            <h4 className='font-medium text-3xl m-2'>{decodeHtml(question.question)}</h4>
-
-            {
-                options.map(
-                    (radio) => {
-                        const { option } = radio
-
-                        // Continue tomorrow from here
-                        // Do the thing that marks the question as correct or incorrect
-                        return (
-                            <label className='text-2xl'>
-                                <input
-                                    type="radio"
-                                    value={option}
-                                    name={question.question}
-                                    onChange={(event) => storeResult(event)}
-                                    checked={selectedOption === option}
-                                />
-
-                                {decodeHtml(option)}
-                                <br />
-                            </label>
-                        )
-                    }
-                )
-
-            }
-
-            < button className='bg-[#4D6B73] text-[#FFFEF2] px-2 rounded-md font-semibold border border-black m-1' onClick={handleReset}>Reset</button >
+        <div className="border-2 border-[#4D6B73] rounded-md m-[25px] p-3 flex flex-col items-center m-fit">
+            <p className="text-xl text-left italic underline underline-offset-2 self-start">
+                Question: {index}
+            </p>
+            <h4 className="font-semibold text-3xl m-2 max-sm:text-xl">
+                {decodeHtml(question.question)}
+            </h4>
+            <div className="flex flex-col items-start w-fit self-center p-5 text-center gap-3 ">
+                {options.map((radio) => {
+                    const { option } = radio;
+
+                    // Continue tomorrow from here
+                    // Do the thing that marks the question as correct or incorrect
+                    return (
+                        <label className="text-3xl flex gap-3 max-sm:text-xl">
+                            <input
+                                type="radio"
+                                value={option}
+                                name={question.question}
+                                onChange={(event) => storeResult(event)}
+                                checked={selectedOption === option}
+                            />
+                            <h3>{decodeHtml(option)}</h3>
+                            <br />
+                        </label>
+                    );
+                })}
+            </div>
+            <Button onClick={handleReset}>Reset</Button>
         </div>
-    )
-}
+    );
+};
 
-export default Question
+export default Question;
 
 /*
 Sample Data:
@@ -108,4 +106,5 @@ Sample Data:
         "Manuel Delgado"
     ]
 }
-*/
+*/
+