applying js

Mehak-Kamran · Mehak-Kamran · commit d3f6686262f8 · 2024-02-13T14:21:03.000Z
diff --git a/Projects/RandomJokeGenerator/app.js b/Projects/RandomJokeGenerator/app.js
@@ -0,0 +1,19 @@
+URL="https://official-joke-api.appspot.com/random_joke";
+button =document.querySelector(".click")
+jokecontainer=document.querySelector(".jokecontainer")
+
+button.addEventListener("click", async (event)=>{
+    console.log("clicked")
+    
+
+    let response= await fetch(URL)
+    let api= await response.json()
+    let setup=(api.setup) 
+    let punchline=api.punchline 
+    joke=setup+punchline
+    console.log(joke)
+    jokecontainer.innerText=joke
+
+
+})
+
diff --git a/Projects/RandomJokeGenerator/index.html b/Projects/RandomJokeGenerator/index.html
@@ -13,7 +13,7 @@
         </div>
 
         <div class="displayjoke">
-            <h4 class="joke"> </h4>
+            <h4 class="jokecontainer"> </h4>
         </div>
     <button  type="button" class="click"> Get a Joke</button>
         
diff --git a/Projects/RandomJokeGenerator/style.css b/Projects/RandomJokeGenerator/style.css
@@ -37,6 +37,7 @@ body{
     margin:10%;
     width: 20%;
     padding: 5%;
-    background-color: pink;
+    background-color: #ffc574;
+    border-radius: 5%;
 }
 
