feat: day 10

solygambas · solygambas · commit 25e4101dfacc · 2025-06-19T12:53:43.000+02:00
diff --git a/010-dad jokes/index.html b/010-dad jokes/index.html
@@ -9,7 +9,11 @@
   <body>
     <div class="container">
       <h3>Don't Laugh Challenge</h3>
-      <div id="joke" class="joke">// Joke goes here</div>
+      <!-- Experiment with Network Failure -->
+      <!-- <div id="joke" class="joke">// Joke goes here</div> -->
+      <div id="joke" class="joke">
+        Hmm, our joke delivery service seems to be on coffee break
+      </div>
       <button id="jokeBtn" class="btn">Get Another Joke</button>
     </div>
     <script src="script.js"></script>
diff --git a/010-dad jokes/script.js b/010-dad jokes/script.js
@@ -2,12 +2,20 @@ const jokeEl = document.getElementById("joke");
 const jokeBtn = document.getElementById("jokeBtn");
 
 const generateJoke = async () => {
+  // Prevent Multiple Clicks
+  jokeBtn.disabled = true;
+  jokeBtn.innerText = "Loading...";
   const config = {
     headers: { Accept: "application/json" },
   };
   const res = await fetch("https://icanhazdadjoke.com/", config);
+  // Check API Response Status
+  // const res = await fetch("https://icanhazdadjoke.com/nonexistent", config);
   const data = await res.json();
-  jokeEl.innerHTML = data.joke;
+  jokeEl.innerHTML = res.status === 200 ? data.joke : "No joke found!";
+
+  jokeBtn.disabled = false;
+  jokeBtn.innerText = "Get Another Joke";
 
   // Fetching with .then()
   //   fetch("https://icanhazdadjoke.com/", config)
diff --git a/010-dad jokes/style.css b/010-dad jokes/style.css
@@ -34,9 +34,11 @@ h3 {
 }
 
 .joke {
-  font-size: 30px;
+  /* Style the Joke Text */
+  font-size: 1.875rem;
   letter-spacing: 1px;
-  line-height: 40px;
+  line-height: 1.4;
+  color: #333;
   margin: 50px auto;
   max-width: 600px;
 }
@@ -59,3 +61,9 @@ h3 {
 .btn:focus {
   outline: 0;
 }
+
+/* Prevent Multiple Clicks */
+.btn:disabled {
+  opacity: 0.6;
+  cursor: not-allowed;
+}
