From eb022ea683f5d29b7c7ebcc7c4b24aaa33cc73ea Mon Sep 17 00:00:00 2001
From: James O'Kane <orbiccode@gmail.com>
Date: Sun, 22 Sep 2024 19:08:32 +0100
Subject: [PATCH] changed fact to joke widget

---
 index.html |  6 +++---
 index.js   | 17 +++++++++--------
 plan.md    |  2 +-
 styles.css | 25 ++++++++++++++++---------
 4 files changed, 29 insertions(+), 21 deletions(-)

diff --git a/index.html b/index.html
index bec156c..9e9833b 100644
--- 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
index ac9e607..86e82ac 100644
--- 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
index ae13d6d..23633e8 100644
--- 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
index 3521fc3..f10a737 100644
--- 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,6 +188,7 @@ header {
 .nasa-widget {
     display: grid;
     grid-template-rows: 2rem 1fr 2rem;
+    min-height: 100%;
 }
 
 #nasa-title {
@@ -194,17 +196,18 @@ header {
     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;