Javascript completed

index.html

@@ -12,5 +12,6 @@ <h1 class="heading">Jokes Generator</h1>
         <p class="joke" id="joke">Joke</p>
         <button class="btn" id="btn">Tell me a joke</button>
     </div>
+    <script src="script.js"></script>
 </body>
 </html>

script.js

@@ -0,0 +1,35 @@
+const btnEl = document.getElementById("btn");
+const jokeEl = document.getElementById("joke");
+
+const apiKey = "4kqGcJx8uDXo3XIskcbzokAz7rN8nWJs3PL9Mcll";
+
+const options = {
+  method: "GET",
+  headers: {
+    "X-Api-Key": apiKey,
+  },
+};
+
+const apiURL = "https://api.api-ninjas.com/v1/dadjokes?limit=1";
+
+async function getJoke() {
+  try {
+    jokeEl.innerText = "Updating...";
+    btnEl.disabled = true;
+    btnEl.innerText = "Loading...";
+    const response = await fetch(apiURL, options);
+    const data = await response.json();
+
+    btnEl.disabled = false;
+    btnEl.innerText = "Tell me a joke";
+
+    jokeEl.innerText = data[0].joke;
+  } catch (error) {
+    jokeEl.innerText = "An error happened, try again later";
+    btnEl.disabled = false;
+    btnEl.innerText = "Tell me a joke";
+    console.log(error);
+  }
+}
+
+btnEl.addEventListener("click", getJoke);