Joke Generator

This is an old revision of the document!

<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;
    max-width: 600px;
  }

  #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%;
  }
</style>

</head>

<body>

<div id="app">
  <h1>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>