/index.html

## 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>

## 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;
}

## 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);
}
	<!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>