From bd00a3b72d048571d95c6e06e2715ddf2fd88362 Mon Sep 17 00:00:00 2001
From: lifeadventurer <life0adventurer@gmail.com>
Date: Sat, 12 Oct 2024 00:17:40 +0800
Subject: [PATCH] Feat(quote generator): Add method for adding backgrounds
 (Closes #13)

---
 quote_generator/backgrounds/dark/.gitkeep  |  0
 quote_generator/backgrounds/light/.gitkeep |  0
 quote_generator/js/quote.js                | 31 +++++++++++++++++++---
 3 files changed, 28 insertions(+), 3 deletions(-)
 create mode 100644 quote_generator/backgrounds/dark/.gitkeep
 create mode 100644 quote_generator/backgrounds/light/.gitkeep

diff --git a/quote_generator/backgrounds/dark/.gitkeep b/quote_generator/backgrounds/dark/.gitkeep
new file mode 100644
index 0000000..e69de29
diff --git a/quote_generator/backgrounds/light/.gitkeep b/quote_generator/backgrounds/light/.gitkeep
new file mode 100644
index 0000000..e69de29
diff --git a/quote_generator/js/quote.js b/quote_generator/js/quote.js
index 94bcd38..d8be905 100644
--- a/quote_generator/js/quote.js
+++ b/quote_generator/js/quote.js
@@ -12,11 +12,36 @@ fetch("./json/quotes.json")
 
 
 function Appear() {
-  console.log(quotes);
   const index = Math.floor(Math.random() * quotes.length);
-  const {quote, author} = quotes[index];
-  quoteElement.innerHTML = `<b style='font-size:28px;'>"</b>` + quote + `<b style='font-size:28px;'>"</b>` ;
+  const { quote, author } = quotes[index];
+
+  quoteElement.innerHTML = `<b style='font-size:28px;'>"${quote}"</b>`;
   authorElement.innerHTML = "- " + author;
+
+  const container = document.getElementById("imageContainer");
+  const folderPath = "./backgrounds/";
+  // TODO: Get number of images from a JSON file.
+  const numDarkImages = 0;
+  const numLightImages = 0;
+
+
+  if (numDarkImages && numLightImages) {
+    const isDark = Math.random() < 0.5;
+    let randomIndex, randomImage;
+    const darkModeIcon = document.querySelector("#dark-mode-icon");
+    console.log(isDark);
+    if (isDark) {
+      randomIndex = Math.floor(Math.random() * numDarkImages) + 1;
+      randomImage = folderPath + "dark/" + randomIndex + ".jpg";
+      darkModeIcon.onclick()
+    } else {
+      randomIndex = Math.floor(Math.random() * numLightImages) + 1;
+      randomImage = folderPath + "light/" + randomIndex + ".jpg";
+    }
+    container.style.backgroundImage = "url('" + randomImage + "')";
+    container.style.opacity = 0.85;
+    container.style.backgroundSize = "100% 100%";
+  }
 }
 
 function getQuote() {