Add DadJoke API

assets/script/script.js

@@ -1,3 +1,21 @@
 // This handles the main section of the screens / hiding screens and displaying screens 
 
 // TO DO: make more script files for different features 
+const jokeEl = document.getElementById('joke');
+const get_joke =document.getElementById('get_joke');
+
+get_joke.addEventListener('click', generateJoke);
+
+async function generateJoke(){
+    // call the icanhaz API
+    const jokeRes = await fetch('https://icanhazdadjoke.com/', {
+        headers: {
+            'Accept': 'application/json'
+        }
+    });
+    const joke = await jokeRes.json();
+
+    console.log(joke);
+    //set the new joke
+    jokeEl.innerHTML = joke.joke; 
+}

assets/styles/styles.css

@@ -249,7 +249,36 @@ background-color: var(--dark);
     background-color: rgba(112, 180, 197, 0.753);
 
 }
-
+#dadjoke-container, h3{
+    background-color: blue;
+    border-radius: 10px;
+    box-shadow: 0 1px 20px rgba(0,0,0,0,1), 0 6px 6px rgba(0,0,0,0,1);
+    padding: 50px, 20px;
+    max-width: 100%;
+    width: 800px;
+    text-align: center;
+    margin: 0;
+    letter-spacing: 2px; 
+    opacity:0.5; 
+}
+.joke{
+    font-size: 30px;
+    line-height: 40px;
+    margin: 50px auto;
+    max-width: 600px;
+}
+.btn{
+    background-color:#9f68e0;
+    border: 0;
+    border-radius: 10px;
+    box-shadow: 0 5px 15px rgba(0,0,0,0,1), 0 6px 6px rgba(0,0,0,0,1);
+    color: #fff;
+    font-size: 16px;
+    padding: 14px 40px;
+}
+.btn:active{
+    transform: scale(0.98); 
+}
 .progress-ring {
     position: absolute; 
     top: 50%; 

index.html

@@ -105,6 +105,17 @@ <h3 unselectable="on" id="time_display">_ _:_ _</h3>
 
         <h2 id="good-job">Good Job! Now take a Break!</h2>
 
+           <!-- Dad Joke Api-->
+           <div class="dadjoke-container">
+            <h3>Laugh at my Dad joke</h3>
+            <div id="joke" class="joke">
+                    // funny dad joke
+            </div>
+            <button id="get_joke" class="btn">
+                Get Another Joke
+            </button>           
+        </div>
+
         <img src="./assets/Images/guess-what-its-break-time.jpeg" id="break-img">
 
         <button onclick="snd.play()" id="break-button">Take my break</button>
@@ -121,6 +132,7 @@ <h2 id="good-job">Good Job! Now take a Break!</h2>
                 <div id="test_3" class="swiper-slide">Slide 3</div>
                 ...
             </div>
+
             <!-- If we need pagination -->
             <div class="swiper-pagination hide"></div>