Created
October 14, 2017 09:18
-
-
Save alaahd/2eac709b23d9217f9babd4956c24e9dd to your computer and use it in GitHub Desktop.
JS Bin // source https://jsbin.com/qelujo
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
<!DOCTYPE html> | |
<html> | |
<head> | |
<meta charset="utf-8"> | |
<meta name="viewport" content="width=device-width"> | |
<title>JS Bin</title> | |
<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/1.0.16/vue.js"></script> | |
<!-- Since there is already a rich ecosystem of ajax libraries --> | |
<!-- and collections of general-purpose utility methods, Vue core --> | |
<!-- is able to remain small by not reinventing them. This also --> | |
<!-- gives you the freedom to use what you're familiar with. --> | |
<script src="https://cdn.jsdelivr.net/npm/axios@0.12.0/dist/axios.min.js"></script> | |
<script src="https://cdn.jsdelivr.net/npm/lodash@4.13.1/lodash.min.js"></script> | |
</head> | |
<body> | |
<div id="watch-example"> | |
<p> | |
Ask a yes/no question: | |
<input v-model="question"> | |
</p> | |
<p>{{ answer }}</p> | |
<p><strong>{{ nq }}</strong></p> | |
</div> | |
<script id="jsbin-javascript"> | |
var watchExampleVM = new Vue({ | |
el: '#watch-example', | |
data: { | |
question: '', | |
nq: '', | |
answer: 'I cannot give you an answer until you ask a question!' | |
}, | |
watch: { | |
// whenever question changes, this function will run | |
question: function (newQuestion) { | |
this.nq = newQuestion; | |
this.answer = 'Waiting for you to stop typing...' | |
this.getAnswer() | |
} | |
}, | |
methods: { | |
// _.debounce is a function provided by lodash to limit how | |
// often a particularly expensive operation can be run. | |
// In this case, we want to limit how often we access | |
// yesno.wtf/api, waiting until the user has completely | |
// finished typing before making the ajax request. To learn | |
// more about the _.debounce function (and its cousin | |
// _.throttle), visit: https://lodash.com/docs#debounce | |
getAnswer: _.debounce( | |
function () { | |
if (this.question.indexOf('?') === -1) { | |
this.answer = 'Questions usually contain a question mark. ;-)' | |
return | |
} | |
this.answer = 'Thinking...' | |
axios.get('https://yesno.wtf/api') | |
.then(function (response) { | |
this.answer = _.capitalize(response.data.answer) | |
}.bind(this)) | |
.catch(function (error) { | |
this.answer = 'Error! Could not reach the API. ' + error | |
}.bind(this)) | |
}, | |
// This is the number of milliseconds we wait for the | |
// user to stop typing. | |
500 | |
) | |
} | |
}) | |
</script> | |
<script id="jsbin-source-javascript" type="text/javascript"> | |
var watchExampleVM = new Vue({ | |
el: '#watch-example', | |
data: { | |
question: '', | |
nq: '', | |
answer: 'I cannot give you an answer until you ask a question!' | |
}, | |
watch: { | |
// whenever question changes, this function will run | |
question: function (newQuestion) { | |
this.nq = newQuestion; | |
this.answer = 'Waiting for you to stop typing...' | |
this.getAnswer() | |
} | |
}, | |
methods: { | |
// _.debounce is a function provided by lodash to limit how | |
// often a particularly expensive operation can be run. | |
// In this case, we want to limit how often we access | |
// yesno.wtf/api, waiting until the user has completely | |
// finished typing before making the ajax request. To learn | |
// more about the _.debounce function (and its cousin | |
// _.throttle), visit: https://lodash.com/docs#debounce | |
getAnswer: _.debounce( | |
function () { | |
if (this.question.indexOf('?') === -1) { | |
this.answer = 'Questions usually contain a question mark. ;-)' | |
return | |
} | |
this.answer = 'Thinking...' | |
axios.get('https://yesno.wtf/api') | |
.then(function (response) { | |
this.answer = _.capitalize(response.data.answer) | |
}.bind(this)) | |
.catch(function (error) { | |
this.answer = 'Error! Could not reach the API. ' + error | |
}.bind(this)) | |
}, | |
// This is the number of milliseconds we wait for the | |
// user to stop typing. | |
500 | |
) | |
} | |
}) | |
</script></body> | |
</html> |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
var watchExampleVM = new Vue({ | |
el: '#watch-example', | |
data: { | |
question: '', | |
nq: '', | |
answer: 'I cannot give you an answer until you ask a question!' | |
}, | |
watch: { | |
// whenever question changes, this function will run | |
question: function (newQuestion) { | |
this.nq = newQuestion; | |
this.answer = 'Waiting for you to stop typing...' | |
this.getAnswer() | |
} | |
}, | |
methods: { | |
// _.debounce is a function provided by lodash to limit how | |
// often a particularly expensive operation can be run. | |
// In this case, we want to limit how often we access | |
// yesno.wtf/api, waiting until the user has completely | |
// finished typing before making the ajax request. To learn | |
// more about the _.debounce function (and its cousin | |
// _.throttle), visit: https://lodash.com/docs#debounce | |
getAnswer: _.debounce( | |
function () { | |
if (this.question.indexOf('?') === -1) { | |
this.answer = 'Questions usually contain a question mark. ;-)' | |
return | |
} | |
this.answer = 'Thinking...' | |
axios.get('https://yesno.wtf/api') | |
.then(function (response) { | |
this.answer = _.capitalize(response.data.answer) | |
}.bind(this)) | |
.catch(function (error) { | |
this.answer = 'Error! Could not reach the API. ' + error | |
}.bind(this)) | |
}, | |
// This is the number of milliseconds we wait for the | |
// user to stop typing. | |
500 | |
) | |
} | |
}) |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment