display all quotes have been shown to you message if all quotes are s…

…hown and update styling (#5) - Make quote text h1 from p tag - Display a message in blue if all quotes are shown: - All quotes have been shown to you. Make sure to add more quotes [here](https://github.com/Kendall-Does-Coding-Websites/ChatGPT-website/blob/main/index.js).
Kendall-Does-Coding-Websites · May 12, 2023 · f01b708 · f01b708
1 parent 56ba3d0
commit f01b708
Show file tree

Hide file tree

Showing 3 changed files with 57 additions and 37 deletions.
diff --git a/index.html b/index.html
@@ -5,11 +5,11 @@
     <link rel="stylesheet" href="styles.css">
 </head>
 <body>
-    <div id="quote-container">
-        <p id="quote"></p>
-        <p id="author"></p>
-    </div>
-</body>
+  <div id="quote-container">
+    <h1 id="quote"></h1>
+    <p id="author"></p>
+    <p id="message"></p>
+  </div>
     <script src="index.js"></script>
 </html>
 
diff --git a/index.js b/index.js
@@ -78,50 +78,67 @@ var quotes = [
   {
     text: "You miss 100% of the shots you don't take.",
     author: "Wayne Gretzky"
-  },
+  }, 
 ];
 // Function to generate a random quote
 function generateRandomQuote() {
-  var storedQuote = localStorage.getItem('previousQuote');
-  var randomIndex = Math.floor(Math.random() * quotes.length);
-
-  // Check if the generated quote is the same as the previous quote
-  if (storedQuote && storedQuote === quotes[randomIndex].text) {
-    // Generate a new random quote
-    randomIndex = (randomIndex + 1) % quotes.length;
-  }
+  var storedQuotes = JSON.parse(localStorage.getItem('seenQuotes')) || [];
+  var newQuotes = quotes.filter(function(quote) {
+    return !storedQuotes.includes(quote.text);
+  });
 
   var quoteElement = document.getElementById("quote");
   var authorElement = document.getElementById("author");
-  quoteElement.textContent = quotes[randomIndex].text;
-  authorElement.textContent = "- " + quotes[randomIndex].author;
+  var messageElement = document.getElementById("message");
 
-  // Store the displayed quote in local storage
-  localStorage.setItem('previousQuote', quotes[randomIndex].text);
-}
+  if (newQuotes.length > 0) {
+    // Display new quotes first
+    var randomIndex = Math.floor(Math.random() * newQuotes.length);
+    var quote = newQuotes[randomIndex];
+
+    // Display the quote and author
+    quoteElement.textContent = quote.text;
+    authorElement.textContent = "- " + quote.author;
+
+    // Add the quote to the stored quotes
+    storedQuotes.push(quote.text);
+    localStorage.setItem('seenQuotes', JSON.stringify(storedQuotes));
 
-// Function to remove duplicate quotes
-function removeDuplicateQuotes() {
-  var uniqueQuotes = [];
-  var quoteTexts = [];
+    // Reset the message element
+    messageElement.innerHTML = "";
+    messageElement.style.fontSize = "";
+  } else {
+    // Check if all quotes have been seen
+    if (storedQuotes.length === quotes.length) {
+      // Display a random quote
+      var randomIndex = Math.floor(Math.random() * quotes.length);
+      var quote = quotes[randomIndex];
 
-  for (var i = 0; i < quotes.length; i++) {
-    var quote = quotes[i];
+      // Display the quote and author
+      quoteElement.textContent = quote.text;
+      authorElement.textContent = "- " + quote.author;
 
-    // Check if the quote text is already in the quoteTexts array
-    if (!quoteTexts.includes(quote.text)) {
-      uniqueQuotes.push(quote);
-      quoteTexts.push(quote.text);
+      // Display the message and link in small text
+      messageElement.innerHTML = "All quotes have been shown to you.<br>Make sure to add more quotes <a href='https://github.com/Kendall-Does-Coding-Websites/ChatGPT-website/blob/main/index.js'>here</a>.";
+      messageElement.style.fontSize = "small";
+    } else {
+      // Display a previously seen quote
+      var randomIndex = Math.floor(Math.random() * storedQuotes.length);
+      var quote = quotes.find(function(quote) {
+        return quote.text === storedQuotes[randomIndex];
+      });
+
+      // Display the quote and author
+      quoteElement.textContent = quote.text;
+      authorElement.textContent = "- " + quote.author;
+
+      // Reset the message element
+      messageElement.innerHTML = "";
+      messageElement.style.fontSize = "";
     }
   }
-
-  // Update the quotes array with unique quotes
-  quotes = uniqueQuotes;
 }
 
-// Remove duplicate quotes
-removeDuplicateQuotes();
-
 // Wait for the document to load
 document.addEventListener('DOMContentLoaded', function() {
   // Add 'show' class to trigger the animation
@@ -131,5 +148,3 @@ document.addEventListener('DOMContentLoaded', function() {
   // Generate a random quote
   generateRandomQuote();
 });
-
-
diff --git a/styles.css b/styles.css
@@ -29,6 +29,11 @@ body {
   font-size: 18px;
 }
 
+#message {
+    color: blue; /* Customize the color here */
+    font-size: small;
+}
+
 @keyframes fadeIn {
   0% {
     opacity: 0;