Skip to content

Instantly share code, notes, and snippets.

/index.html

Created January 7, 2018 22:28
Show Gist options
  • Save anonymous/5be01852884268f7fec33926e4fe9ac4 to your computer and use it in GitHub Desktop.
Save anonymous/5be01852884268f7fec33926e4fe9ac4 to your computer and use it in GitHub Desktop.
Download ZIP
JS Bin // source https://jsbin.com/qayoyezimo
Raw
index.html
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width">
<title>JS Bin</title>
<style id="jsbin-css">
img {
border-radius: 8px;
border: 1px solid gray;
}
span {
color: white;
font-size: 2em;
font-weight: 800;
background-color:black;
/* border: 1px solid gray; */
padding-left:5px;
padding-right:5px;
}
h5 {
display: inline;
/* padding-left:10px; */
font-family: arial;
/* background-color: white; */
}
#container {
background-color: lightgray;
border-radius: 8px;
border: 1px solid gray;
}
#inner {
padding:8px 8px 8px 8px;
}
.urgent{
color: yellow;
}
#name{
font-size: 0.7em;
}
</style>
</head>
<body>
<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.0.3/vue.js"></script>
<script src="https://code.jquery.com/jquery-3.1.0.js"></script>
<!-- <div id="app-6">
<p>{{ message }}</p>
<input v-model="message" @change="someHandler">
<br>
-->
<div id="example">
<!-- <ul id="example-1">
<li v-for="item in items">
{{ item.message }}
</li><todo-item></todo-item>
<li v-for="(value,key) in myObject">
<strong>User ID: {{ key }}</strong><br>
{{ value['First name'] }} {{ value['Last name']}}<br>
<strong>Age: </strong> {{value['Age']}}
</li>
</ul>
<h3 v-if="seen_if">fool A</h3>
<h3 v-else-if="seen_else_if">fool B</h3>
<h3 v-else="seen_else">fool B</h3>
<span v-for="item in items">
<br>
{{item.messages}}
</span> -->
<!-- <hr> -->
<div id="container">
<div id="inner">
<!-- <span id="wjquery"></span> -->
<img :src="randomProfilePic" />
<br>
<span id="name">{{name}}</span>
<br>
<h5>Updating in
<span>{{timer}}</span>
secs</h5>
</div>
</div>
</div>
<script id="jsbin-javascript">
// var app6 = new Vue({
// el: '#app-6',
// data: {
// message: 'Hello Vue!'
// },
// methods: {
// someHandler: function (event) {
// val = event.target.value;
// moveOutside(val);
// },
// anotherHandler: function(e){
// return 'foo';
// }
// }
// });
// function moveOutside(val){
// console.log(val);
// }
// var g = app6.anotherHandler();
// console.log(g);
// create a root instance
var testObj = [];
var elapsed_ms = 5000, human_ms = elapsed_ms/1000;
Vue.component('todo-item', {
template: '<h4>This is a todo</h4>'
});
vueApp = new Vue({
el: '#example',
data: {
myObject: testObj,
seen_if: 6 > 5,
items: [
{messages : 'hello'},
{messages : 'dello'},
{messages : 'cello'}
],
randomProfilePic : 'http://via.placeholder.com/50x50',
timer : human_ms,
name : 'Loading ...'
},
created : function(){
dataPoll();
}
})
function createUser(f,l,a){
testObj.push({
'First name' : f,
'Last name' : l,
'Age' : a
})
};
createUser('Sally', 'Ricardo',32);
createUser('Bob', 'Johnson', 19);
vueApp.items.forEach(function(i){
$('#wjquery').append('<br>'+i.messages)
console.log(i.messages);
});
function dataPoll(){
setInterval(function(){
vueApp.timer = vueApp.timer - 1;
res = vueApp.timer <=3 ? true : false;
if(res){
$('span').addClass('urgent');
}
if(vueApp.timer === 0){
//console.log('booom');
}
}, 1000);
setInterval(function(){
$.ajax({
url: 'https://randomuser.me/api/',
dataType: 'json',
success: function(data) {
vueApp.randomProfilePic = data.results[0].picture.thumbnail;
vueApp.timer = human_ms;
var name = data.results[0].name.first;
var name = name[0].toUpperCase() + name.substring(1);
vueApp.name = name;
$('span').removeClass('urgent');
}
});
},elapsed_ms);
}
</script>
<script id="jsbin-source-css" type="text/css">img {
border-radius: 8px;
border: 1px solid gray;
}
span {
color: white;
font-size: 2em;
font-weight: 800;
background-color:black;
/* border: 1px solid gray; */
padding-left:5px;
padding-right:5px;
}
h5 {
display: inline;
/* padding-left:10px; */
font-family: arial;
/* background-color: white; */
}
#container {
background-color: lightgray;
border-radius: 8px;
border: 1px solid gray;
}
#inner {
padding:8px 8px 8px 8px;
}
.urgent{
color: yellow;
}
#name{
font-size: 0.7em;
}</script>
<script id="jsbin-source-javascript" type="text/javascript">// var app6 = new Vue({
// el: '#app-6',
// data: {
// message: 'Hello Vue!'
// },
// methods: {
// someHandler: function (event) {
// val = event.target.value;
// moveOutside(val);
// },
// anotherHandler: function(e){
// return 'foo';
// }
// }
// });
// function moveOutside(val){
// console.log(val);
// }
// var g = app6.anotherHandler();
// console.log(g);
// create a root instance
var testObj = [];
var elapsed_ms = 5000, human_ms = elapsed_ms/1000;
Vue.component('todo-item', {
template: '<h4>This is a todo</h4>'
});
vueApp = new Vue({
el: '#example',
data: {
myObject: testObj,
seen_if: 6 > 5,
items: [
{messages : 'hello'},
{messages : 'dello'},
{messages : 'cello'}
],
randomProfilePic : 'http://via.placeholder.com/50x50',
timer : human_ms,
name : 'Loading ...'
},
created : function(){
dataPoll();
}
})
function createUser(f,l,a){
testObj.push({
'First name' : f,
'Last name' : l,
'Age' : a
})
};
createUser('Sally', 'Ricardo',32);
createUser('Bob', 'Johnson', 19);
vueApp.items.forEach(function(i){
$('#wjquery').append('<br>'+i.messages)
console.log(i.messages);
});
function dataPoll(){
setInterval(function(){
vueApp.timer = vueApp.timer - 1;
res = vueApp.timer <=3 ? true : false;
if(res){
$('span').addClass('urgent');
}
if(vueApp.timer === 0){
//console.log('booom');
}
}, 1000);
setInterval(function(){
$.ajax({
url: 'https://randomuser.me/api/',
dataType: 'json',
success: function(data) {
vueApp.randomProfilePic = data.results[0].picture.thumbnail;
vueApp.timer = human_ms;
var name = data.results[0].name.first;
var name = name[0].toUpperCase() + name.substring(1);
vueApp.name = name;
$('span').removeClass('urgent');
}
});
},elapsed_ms);
}</script></body>
</html>
Raw
jsbin.qayoyezimo.css
img {
border-radius: 8px;
border: 1px solid gray;
}
span {
color: white;
font-size: 2em;
font-weight: 800;
background-color:black;
/* border: 1px solid gray; */
padding-left:5px;
padding-right:5px;
}
h5 {
display: inline;
/* padding-left:10px; */
font-family: arial;
/* background-color: white; */
}
#container {
background-color: lightgray;
border-radius: 8px;
border: 1px solid gray;
}
#inner {
padding:8px 8px 8px 8px;
}
.urgent{
color: yellow;
}
#name{
font-size: 0.7em;
}
Raw
jsbin.qayoyezimo.js
// var app6 = new Vue({
// el: '#app-6',
// data: {
// message: 'Hello Vue!'
// },
// methods: {
// someHandler: function (event) {
// val = event.target.value;
// moveOutside(val);
// },
// anotherHandler: function(e){
// return 'foo';
// }
// }
// });
// function moveOutside(val){
// console.log(val);
// }
// var g = app6.anotherHandler();
// console.log(g);
// create a root instance
var testObj = [];
var elapsed_ms = 5000, human_ms = elapsed_ms/1000;
Vue.component('todo-item', {
template: '<h4>This is a todo</h4>'
});
vueApp = new Vue({
el: '#example',
data: {
myObject: testObj,
seen_if: 6 > 5,
items: [
{messages : 'hello'},
{messages : 'dello'},
{messages : 'cello'}
],
randomProfilePic : 'http://via.placeholder.com/50x50',
timer : human_ms,
name : 'Loading ...'
},
created : function(){
dataPoll();
}
})
function createUser(f,l,a){
testObj.push({
'First name' : f,
'Last name' : l,
'Age' : a
})
};
createUser('Sally', 'Ricardo',32);
createUser('Bob', 'Johnson', 19);
vueApp.items.forEach(function(i){
$('#wjquery').append('<br>'+i.messages)
console.log(i.messages);
});
function dataPoll(){
setInterval(function(){
vueApp.timer = vueApp.timer - 1;
res = vueApp.timer <=3 ? true : false;
if(res){
$('span').addClass('urgent');
}
if(vueApp.timer === 0){
//console.log('booom');
}
}, 1000);
setInterval(function(){
$.ajax({
url: 'https://randomuser.me/api/',
dataType: 'json',
success: function(data) {
vueApp.randomProfilePic = data.results[0].picture.thumbnail;
vueApp.timer = human_ms;
var name = data.results[0].name.first;
var name = name[0].toUpperCase() + name.substring(1);
vueApp.name = name;
$('span').removeClass('urgent');
}
});
},elapsed_ms);
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment