Differences

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

--- dad_jokes [2025/03/02 17:48] – Scott Larson
+++ dad_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>
-    body {
-      font-family: Arial, sans-serif;
-      background-color: #f2f2f2;
-      margin: 50;
-      padding: 25;
-    }
-    #app {
-      text-align: left;
-      margin-top: 50px;
-      margin-left: 50px;
-    }
-    h1 {
-      color: #333;
-    }
-    button {
-      background-color: #007bff;
-      color: #fff;
-      border: none;
-      padding: 20px 40px;
-      font-size: 16px;
-      cursor: pointer;
-    }
-    button:hover {
-      background-color: #0056b3;
-    }
-    p {
-      font-size: 16px;
-      text-align: left;
-      margin-top: 20px;
-      color: #555;
-      max-width: 50%;
-    }
-    #title {
-      display: none;
-    }
-  </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>