changed fact to joke widget

OrbicCode · Sep 22, 2024 · eb022ea · eb022ea
1 parent 57f01c1
commit eb022ea
Show file tree

Hide file tree

Showing 4 changed files with 29 additions and 21 deletions.
diff --git a/index.html b/index.html
@@ -37,9 +37,9 @@ <h1>DEW IT</h1>
                         </div>
                         <button id="nasa-button">NASA Photo of the Day</button>
                     </div>
-                    <div class="fact-widget">
-                        <p id="fact-text"></p>
-                        <button id="fact-button">Random Fact</button>
+                    <div class="joke-widget">
+                        <p id="setup"></p>
+                        <button id="joke-button">Random Joke</button>
                     </div>
                 </div>
             </div>

diff --git a/index.js b/index.js
@@ -80,7 +80,7 @@ function handleCrud(id) {
                 listItemDelete.remove();
             break;
         default: 
-            console.error(`OOOOOOps`);
+            console.error(`ooooooops`);
     }
 }
 
@@ -102,19 +102,20 @@ async function loadNasaImg() {
     }
 }
 
-const factButton = document.getElementById('fact-button')
-let factText = document.getElementById('fact-text')
+const factButton = document.getElementById('joke-button');
+let setup = document.getElementById('setup');
+let punch = document.getElementById('punch');
 
-factButton.addEventListener('click', handleFact)
+factButton.addEventListener('click', handleFact);
 
 async function handleFact() {
-        const response = await fetch('https://uselessfacts.jsph.pl/api/v2/facts/random')
+        const response = await fetch('https://official-joke-api.appspot.com/random_joke')
         const data = await response.json()
 
-        if (data.text === undefined) {
-            factText.innerText = `Server Failure:\n\nTry again later my apprentice`
+        if (data.text === null) {
+            setup.innerText = `Server Failure:\n\nTry again later my apprentice`
         } else {
-            factText.innerText = data.text
+            setup.innerText = `${data.setup}\n\n${data.punchline}`
         }
 
 }

diff --git a/plan.md b/plan.md
@@ -39,7 +39,7 @@
 - add a hover animation on list item 🟢
 - add hover colour changes to buttons 🟢
 - add scrolling capability 🟢
-- text overflow 🔴
+- text overflow 🟢
 
 ## Widgets
 

diff --git a/styles.css b/styles.css
@@ -107,7 +107,8 @@ header {
 }
 
 .listItem p {
-    overflow-x: hidden;
+    white-space: nowrap;
+    overflow-x: auto;
     height: 100%;
     margin: 0;
     display: flex;
@@ -187,24 +188,26 @@ header {
 .nasa-widget {
     display: grid;
     grid-template-rows: 2rem 1fr 2rem;
+    min-height: 100%;
 }
 
 #nasa-title {
     display: flex;
     justify-content: center;
     align-items: center;
     margin: 0;
+    padding: 0.2rem;
     font-size: 0.49rem;
+    border-top-left-radius: 20px;
+    border-top-right-radius: 20px;
 }
 
 #nasa-img {
     background-position: center;
     background-size: cover;
     background-repeat: no-repeat;
-    border-top-left-radius: 20px;
-    border-top-right-radius: 20px;
-    width: 100%;
-    height: 100%;
+    min-width: 100%;
+    min-height: 100%;
 }
 
 .nasa-widget button {
@@ -213,18 +216,22 @@ header {
    border: none;
 }
 
-.fact-widget {
+.joke-widget {
     display: grid;
     grid-template-rows: 1fr 2rem;
+    min-height: 100%;
 }
 
-.fact-widget p {
+#setup {
     text-align: center;
     padding: 0.5rem;
-    overflow-y: scroll;
+    height: 100%;
+    font-size: 1rem;
+    min-height: 100%;
+    overflow: auto;
 }
 
-.fact-widget button {
+.joke-widget button {
     background-color: #005f73;
     color: #e9d8a6;
     border: none;