Differences

This shows you the differences between two versions of the page.

Link to this comparison view

Both sides previous revision Previous revision
Next revision
Previous revision
dad_jokes [2025/03/01 07:26] Scott Larsondad_jokes [2025/06/26 01:44] (current) – removed Scott Larson
Line 1: Line 1:
-====== Joke Generator ====== 
- 
-<html> 
-<head> 
-  <meta charset="UTF-8"> 
-  <title>Joke Generator</title> 
-  <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script> 
-  <style> 
-    #title { 
-      display: none; 
-    } 
-    body { 
-      font-family: Arial, sans-serif; 
-      background-color: #f2f2f2; 
-      margin: 0; 
-      padding: 0; 
-    } 
- 
-    #app { 
-      text-align: center; 
-      margin-top: 50px; 
-    } 
- 
-    h1 { 
-      color: #333; 
-    } 
- 
-    button { 
-      background-color: #007bff; 
-      color: #fff; 
-      border: none; 
-      padding: 10px 20px; 
-      font-size: 16px; 
-      cursor: pointer; 
-    } 
- 
-    button:hover { 
-      background-color: #0056b3; 
-    } 
- 
-    p { 
-      font-size: 16px; 
-      margin-top: 20px; 
-      color: #555; 
-    } 
-  </style> 
-</head> 
- 
-<body> 
-  <div id="app"> 
-    <h1 id="title">Joke Generator</h1> 
-    <button @click="generateJoke">Generate Joke</button> 
-    <p>{{ joke }}</p> 
-  </div> 
- 
-  <script> 
-    new Vue({ 
-      el: '#app', 
-      data: { 
-        joke: '' 
-      }, 
-      methods: { 
-        generateJoke() { 
-          fetch('https://icanhazdadjoke.com/', { 
-            headers: { 
-              'Accept': 'application/json' 
-            } 
-          }) 
-            .then(response => response.json()) 
-            .then(data => { 
-              this.joke = data.joke; 
-            }) 
-            .catch(error => { 
-              console.error(error); 
-            }); 
-        } 
-      } 
-    }); 
-  </script> 
-</body> 
- 
-</html>