From a6a4d0e9402146c00cc306a143b794901a91f8fb Mon Sep 17 00:00:00 2001
From: bbland1 <104288486+bbland1@users.noreply.github.com>
Date: Mon, 8 Jan 2024 11:54:27 -0500
Subject: [PATCH] Character spacing on various pages Fixes #47

---
 src/Components/Footer/Footer.tsx       | 19 ++++--------------
 src/Components/Links/LinksPage.tsx     | 12 +-----------
 src/Components/QuizItems/QuizLogic.tsx | 27 ++++++++++++--------------
 3 files changed, 17 insertions(+), 41 deletions(-)

diff --git a/src/Components/Footer/Footer.tsx b/src/Components/Footer/Footer.tsx
index 8e1e917..3e7784e 100644
--- a/src/Components/Footer/Footer.tsx
+++ b/src/Components/Footer/Footer.tsx
@@ -11,24 +11,13 @@ function Footer() {
       <div>
         <h4>Read/watch more Shoujo! 😝 Thanks for checking out the page!</h4>
         <p>
-          <a href="https://github.com/bbland1/Quiz-App/#readme">
-            Open Source Code
-            <FontAwesomeIcon icon={faGithub} />
-          </a>{' '}
-          |{' '}
-          <a href="https://www.linkedin.com/in/bbland1/">
-            Made by: bbland1
-            <FontAwesomeIcon icon={faLinkedin} />
-          </a>{' '}
-          |{' '}
-          <a href="https://vercel.com">
-            Hosted with Vercel
-            <FontAwesomeIcon icon={faCaretUp} />
+          <a href="https://github.com/bbland1/Quiz-App/#readme">Source Code <FontAwesomeIcon icon={faGithub} />
+          </a> | <a href="https://www.linkedin.com/in/bbland1/">Developer: bbland1 <FontAwesomeIcon icon={faLinkedin} />
+          </a> | <a href="https://vercel.com">Hosted Vercel <FontAwesomeIcon icon={faCaretUp} />
           </a>
         </p>
         <p>
-          &copy; 2022-
-          {new Date().getFullYear()} bbland1
+          &copy; 2022 - {new Date().getFullYear()} bbland1
         </p>
       </div>
     </footer>
diff --git a/src/Components/Links/LinksPage.tsx b/src/Components/Links/LinksPage.tsx
index 878af66..a21a3ef 100644
--- a/src/Components/Links/LinksPage.tsx
+++ b/src/Components/Links/LinksPage.tsx
@@ -72,17 +72,7 @@ function Links() {
         <div>
           <h2>Other links</h2>
           <p>
-            All the synopsis for the manga used in the quiz were taken from with
-            <a href="https://myanimelist.net" target="_blank" rel="noopener noreferrer" data-testid="MAL-Link">
-              My Anime List
-            </a>
-            or
-            <a href="https://anilist.co/" target="_blank" rel="noopener noreferrer" data-testid="Anilist-Link">
-              Anilist
-            </a>
-            . Below are some interesting reads that were linked in the
-            <span>What Is Shoujo?</span>
-            video above.
+            All the synopsis for the manga used in the quiz were taken from with <a href="https://myanimelist.net" target="_blank" rel="noopener noreferrer" data-testid="MAL-Link">My Anime List</a> or <a href="https://anilist.co/" target="_blank" rel="noopener noreferrer" data-testid="Anilist-Link">Anilist</a>. Below are some interesting reads that were linked in the <span>What Is Shoujo?</span> video above.
           </p>
           <ul>
             <li>
diff --git a/src/Components/QuizItems/QuizLogic.tsx b/src/Components/QuizItems/QuizLogic.tsx
index efff87b..c2b0ac1 100644
--- a/src/Components/QuizItems/QuizLogic.tsx
+++ b/src/Components/QuizItems/QuizLogic.tsx
@@ -4,9 +4,9 @@ import './quiz.css';
 
 function QuizLogic() {
   // State Properties of the quiz
-  const [currentQuestion, setCurrentQuestion] = useState(0);
-  const [showFinalScore, setShowFinalScore] = useState(false);
-  const [score, setScore] = useState(0);
+  const [ currentQuestion, setCurrentQuestion ] = useState(0);
+  const [ showFinalScore, setShowFinalScore ] = useState(false);
+  const [ score, setScore ] = useState(0);
 
   // giving functionality
 
@@ -15,7 +15,7 @@ function QuizLogic() {
     // check if the users clicked answer returns true (the correct answer)
     if (isCorrect) {
       // adds the value of the question to the current state of the score
-      setScore(score + questions[currentQuestion].questionValue);
+      setScore(score + questions[ currentQuestion ].questionValue);
     }
 
     // determines the position of the next question in the array adding 1 to the idex of the current question
@@ -77,8 +77,7 @@ function QuizLogic() {
         <div className="question-card func-button final-score">
           <h2>{finalScoreWords}</h2>
           <h3>
-            You got a {scorePercentage}
-            %!
+            You got a {scorePercentage}%!
           </h3>
           <h3>
             {score} out of {questions.length} correct
@@ -101,24 +100,22 @@ function QuizLogic() {
             </h3>
           )}
           <h4>
-            Question
-            {currentQuestion + 1} of
-            {questions.length}
+            Question {currentQuestion + 1} of {questions.length}
           </h4>
           <div className="question-info">
-            <h2 className="question-text">{questions[currentQuestion].questionText}</h2>
-            {questions[currentQuestion].question_img !== null && (
-              <img src={questions[currentQuestion].question_img} alt="" className="question-img" />
+            <h2 className="question-text">{questions[ currentQuestion ].questionText}</h2>
+            {questions[ currentQuestion ].question_img !== null && (
+              <img src={questions[ currentQuestion ].question_img} alt="" className="question-img" />
             )}
-            {questions[currentQuestion].question_description !== null && (
+            {questions[ currentQuestion ].question_description !== null && (
               <p className="synopsis">
-                <em>{questions[currentQuestion].question_description}</em>
+                <em>{questions[ currentQuestion ].question_description}</em>
               </p>
             )}
           </div>
           <div className="answer-text">
             <ul>
-              {questions[currentQuestion].answersOptions.map((answerOption) => (
+              {questions[ currentQuestion ].answersOptions.map((answerOption) => (
                 <button type="button" key={answerOption.id} onClick={() => handleAnswerClick(answerOption.isCorrect)}>
                   {answerOption.answerText}
                 </button>