<template>
  <h1>Odpoved z YesNo.wtf</h1>
  <h2>{{ answer }}</h2>
  <img v-if="answerImage" :src="answerImage" alt="IMG" />
  <br>
  <button @click="getAnswer">ZNOVU</button>
  <hr>
  <p>{{ rawdata }}</p>
</template>

<script>
// npm install axios (ve složce s projektem)
import axios from 'axios';

export default {
  name: 'App',
  data() {
    return {
      rawdata: null,
      answer: null,
      answerImage: null
    }
  },
  methods: {
    async getAnswer() {
      const response = await axios.get("https://yesno.wtf/api",)
      this.rawdata = response.data;
      this.answer = response.data.answer;
      this.answerImage = response.data.image;
    }
  },
  mounted() {
    this.getAnswer();
  }
}
</script>

<style>
#app {
  font-family: Avenir, Helvetica, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-align: center;
  color: #2c3e50;
  margin-top: 60px;
}
</style>
