From 5c929c44ab64c0a57e423e9df51c6cf9d3ae708b Mon Sep 17 00:00:00 2001
From: JBlake2k21 <69338885+JBlake2k21@users.noreply.github.com>
Date: Thu, 5 Aug 2021 20:50:39 -0400
Subject: [PATCH 1/2] Add DadJoke API

---
 assets/script/script.js  | 18 ++++++++++++++++++
 assets/styles/styles.css | 30 ++++++++++++++++++++++++++++++
 index.html               | 12 ++++++++++++
 test                     |  0
 4 files changed, 60 insertions(+)
 create mode 100644 test

diff --git a/assets/script/script.js b/assets/script/script.js
index e627459..8444388 100644
--- a/assets/script/script.js
+++ b/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);
+
+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; 
+}
diff --git a/assets/styles/styles.css b/assets/styles/styles.css
index 411163f..137adfa 100644
--- a/assets/styles/styles.css
+++ b/assets/styles/styles.css
@@ -248,4 +248,34 @@ background-color: var(--dark);
   #test_3{
     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); 
 }
\ No newline at end of file
diff --git a/index.html b/index.html
index 2d44c2d..98d2e5c 100644
--- a/index.html
+++ b/index.html
@@ -93,6 +93,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>
@@ -109,6 +120,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>
 
diff --git a/test b/test
new file mode 100644
index 0000000..e69de29

From daaa23696dd3e40b3f0cd2c1190b4552c010969b Mon Sep 17 00:00:00 2001
From: JBlake2k21 <69338885+JBlake2k21@users.noreply.github.com>
Date: Thu, 5 Aug 2021 21:41:21 -0400
Subject: [PATCH 2/2] fixing DadJoke API

---
 assets/script/script.js | 2 +-
 index.html              | 2 +-
 2 files changed, 2 insertions(+), 2 deletions(-)

diff --git a/assets/script/script.js b/assets/script/script.js
index 8444388..73f294b 100644
--- a/assets/script/script.js
+++ b/assets/script/script.js
@@ -6,7 +6,7 @@ const get_joke =document.getElementById('get_joke');
 
 get_joke.addEventListener('click', generateJoke);
 
-function generateJoke(){
+async function generateJoke(){
     // call the icanhaz API
     const jokeRes = await fetch('https://icanhazdadjoke.com/', {
         headers: {
diff --git a/index.html b/index.html
index 6a3d073..9b55b55 100644
--- a/index.html
+++ b/index.html
@@ -108,7 +108,7 @@ <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">
+            <div id="joke" class="joke">
                     // funny dad joke
             </div>
             <button id="get_joke" class="btn">