added random facts section

z1shivam · Dec 10, 2023 · a49f73e · a49f73e
1 parent 2940ca5
commit a49f73e
Show file tree

Hide file tree

Showing 3 changed files with 12 additions and 14 deletions.
diff --git a/assets/main.js b/assets/main.js
@@ -1,4 +1,4 @@
-let displayNumFact = localStorage.getItem("displayNumFact") === "false" ? false : false;
+let displayNumFact = localStorage.getItem("displayNumFact") === "false" ? false : true;
 let displayJoke = localStorage.getItem("displayJoke") === "false" ? false : true;
 let displayHindiQuote = localStorage.getItem("displayHindiQuote") === "false" ? false : true;
 let displayQuote = localStorage.getItem("displayQuote") === "false" ? false : true;
@@ -82,7 +82,7 @@ async function fetchAndDisplayCatPhoto() {
   dogPicElement.innerHTML = "";
   dogPicElement.appendChild(imgElement);
 }
-async function fetchAndDisplayNumFact() {
+async function fetchAndDisplayFact() {
   try {
     const mainElement = document.getElementById("insertHere");
 
@@ -92,7 +92,7 @@ async function fetchAndDisplayNumFact() {
     const skeleton = `
     <img src="./assets/pageImages/bunny.svg" class="absolute w-32 -left-5 -bottom-1  " alt="">
     <div class="rounded-md border-2 w-5/6 float-right border-pink-200">
-      <h2 class="font-nanum text-2xl px-2 text-pink-800 bg-pink-200 py-1 text-right">A fact about a number</h2>
+      <h2 class="font-nanum text-2xl px-2 text-pink-800 bg-pink-200 py-1 text-right">Did you know?</h2>
       <div class="px-2 py-1">
         <p class="text-base numFactElement pl-3 py-2 text-pink-800 text-right"><br>Loading...<br><br></p>
       </div>
@@ -103,11 +103,11 @@ async function fetchAndDisplayNumFact() {
 
     mainElement.appendChild(sectionElement);
 
-    const response = await fetch("http://numbersapi.com/random/");
-    const data = await response.text();
+    const response = await fetch("https://uselessfacts.jsph.pl/api/v2/facts/random?language=en");
+    const data = await response.json();
     const quoteElement = sectionElement.querySelector(".numFactElement");
 
-    quoteElement.textContent = data;
+    quoteElement.textContent = data.text;
   } catch (error) {
     console.error("Error fetching and displaying num fact:", error);
   }
@@ -285,7 +285,7 @@ const observer = new IntersectionObserver(
     entries.forEach((entry) => {
       if (entry.isIntersecting) {
         displayQuote && fetchAndDisplayQuote();
-        displayNumFact && fetchAndDisplayNumFact();
+        displayNumFact && fetchAndDisplayFact();
         displayJoke && fetchAndDisplayJoke();
         displayHindiQuote && fetchAndDisplayHindiQuote();
         displayCatPhoto && fetchAndDisplayCatPhoto();

diff --git a/assets/script.js b/assets/script.js
@@ -1,5 +1,5 @@
 let displayNumFact =
-  localStorage.getItem("displayNumFact") === "false" ? false : false;
+  localStorage.getItem("displayNumFact") === "false" ? false : true;
 let displayJoke =
   localStorage.getItem("displayJoke") === "false" ? false : true;
 let displayHindiQuote =

diff --git a/preferences.html b/preferences.html
@@ -9,9 +9,7 @@
   </head>
   <body class="pt-16">
     <header class="fixed top-0 z-50 h-16 w-full border-b bg-indigo-100">
-      <div
-        class="mx-auto flex h-full max-w-6xl items-center justify-between px-3"
-      >
+      <div class="mx-auto flex h-full max-w-6xl items-center justify-between px-3">
         <div class="font-['acme'] text-3xl text-indigo-900">
           <a href="./">BoredBunny</a>
         </div>
@@ -161,14 +159,14 @@ <h2 class="px-3 py-3 font-[acme] text-xl text-indigo-700">
           </div>
         </div>
         <div
-          class="hidden w-full items-center justify-between rounded-md bg-indigo-50 px-2 py-3 font-medium text-indigo-900"
+          class="flex w-full items-center justify-between rounded-md bg-indigo-50 px-2 py-3 font-medium text-indigo-900"
         >
-          <div>Number Facts</div>
+          <div>Did You Know</div>
           <div>
             <div class="tap-transparent flex justify-center">
               <label for="numberFacts" class="flex cursor-pointer items-center">
                 <div class="relative">
-                  <input id="numberFacts" type="checkbox" class="hidden" />
+                  <input id="numberFacts" type="checkbox" class="hidden" checked/>
                   <div
                     class="toggle-path h-5 w-9 rounded-full bg-gray-200 shadow-inner"
                   ></div>