From 120cda2d7fb2154c67bfcf6136bad2a59e8569fe Mon Sep 17 00:00:00 2001
From: RoyHridoy <royhridoy1428@gmail.com>
Date: Thu, 7 Mar 2024 08:39:49 +0600
Subject: [PATCH] Added a button to generate a random quote without refreshing
 the page

---
 app/globals.css | 25 +++++++++++++++++++++++++
 app/page.js     | 17 +++++++++++++++--
 2 files changed, 40 insertions(+), 2 deletions(-)

diff --git a/app/globals.css b/app/globals.css
index a92abbc..c2a6ea4 100644
--- a/app/globals.css
+++ b/app/globals.css
@@ -205,6 +205,31 @@ left: 2vw; /* Adjust as needed */
 transform: rotate(270deg);
 }
 
+/* 
+===========================
+REFRESH BUTTON STYLES
+===========================
+*/
+
+.refreshBtn {
+  margin-top: 20px;
+}
+
+.btn {
+  cursor: pointer;
+  background-color: #ffffff;
+  border: 1px solid #dddddd;
+  padding: 5px 10px;
+  border-radius: 5px;
+  font-size: 1.2em;
+  font-family: 'Bellefair', serif;
+  text-shadow: 1px 1px 1px #ddd, 2px 2px 1px #ccc, 0 0 1em black;
+  transition: all 0.3s;
+}
+.btn:hover {
+  background-color: #dddddd;
+}
+
 /* 
 ===========================
 MEDIA QUERIES
diff --git a/app/page.js b/app/page.js
index 1b59695..230e3b6 100644
--- a/app/page.js
+++ b/app/page.js
@@ -38,10 +38,15 @@ export default function Home() {
   // State for storing the selected quote
   const [selectedQuote, setSelectedQuote] = useState(null);
 
-  // Effect hook to select a random quote on component mount
-  useEffect(() => {
+  // Always generate a random quote
+  const generateRandomQuote = () => {
     const randomIndex = Math.floor(Math.random() * quotes.length); // Get a random index
     setSelectedQuote(quotes[randomIndex]); // Set the selected quote to the quote at the random index
+  }
+
+  // Effect hook to select a random quote on component mount
+  useEffect(() => {
+    generateRandomQuote();
   }, []);
 
   // If no quote is selected, return null (or a loading state)
@@ -96,6 +101,14 @@ export default function Home() {
               <a>HexCodeHQ | Quote Submitted By {selectedQuote.submitter}</a>
             </p>
           </div>
+
+          {/* Button to generate a random quote without refreshing the page */}
+          <div className="refreshBtn">
+            <button className="btn" onClick={generateRandomQuote}>
+              Generate me another Quote
+            </button>
+          </div>
+
         </div>
       </div>
       {/* Add a film grain effect */}