<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <script src="vue-v2.0.js"></script> <link href="//cdn.bootcss.com/bootstrap/4.0.0-alpha.6/css/bootstrap.css" rel="stylesheet"> <style> input { text-indent: 10px; } </style> </head> <body> <div class="container"> <div class="game"> <div class="question"> <label> Ask a yes/no question: <input type="text" v-model="question" placeholder="it must contains '?'"> </label> </div> <div class="answer"> {{answer}} </div> <div> <img :src="img_res" alt=""> </div> </div> </div> </body> <script src="https://unpkg.com/axios@0.12.0/dist/axios.min.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/lodash.js/4.14.1/lodash.min.js"></script> <script src="//cdn.bootcss.com/vue/2.1.10/vue.js"></script> <script> new Vue({ el: '.game', data: { img_res: '', question: '', answer: 'I cannot give you an answer until you ask a question!' }, methods: { getAnswer: _.debounce(function (val) { var vm= this; if (val.indexOf('?') == -1) { this.answer = 'Questions usually contain a question mark. ;-)'; return; } this.answer = 'Thinking...'; axios.get('https://yesno.wtf/api') .then(function (response) { vm.answer = _.capitalize(response.data.answer); vm.img_res = response.data.image; }) .catch(function (error) { vm.answer = 'Error! Could not reach the API. ' + error }); },500) }, watch: { question: function (val) { this.answer = 'Waiting for you to stop typing...'; this.getAnswer(val); } } }) </script> </html>