Skip to content

Instantly share code, notes, and snippets.

@prabodhmeshram

prabodhmeshram/index.html

Last active August 9, 2020 13:55
Show Gist options
  • Save prabodhmeshram/82a9cae90179487736b7c228e48f2240 to your computer and use it in GitHub Desktop.
Save prabodhmeshram/82a9cae90179487736b7c228e48f2240 to your computer and use it in GitHub Desktop.
Download ZIP
JS Bin// source https://jsbin.com/rebacor
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">
.todo-container{
position: relative;
width: 500px;
margin: 0px auto;
background-color: aliceblue;
}
.header{
text-align: center;
}
.todo-input{
position: relative;
margin: 0px auto;
width : 50%;
}
.todo-input input{
font-size: 16px;
line-height: 2em;
}
.todo-list-container{
margin-top: 50px;
}
.todo-length{
float : right;
}
.inline{
display:inline;
}
li {
list-style-type: none
}
.fa-trash-o:hover{
cursor:pointer;
color: red;
}
.bars-tab{
padding-right: 30px;
}
</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.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet" type="text/css" />
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
<link href="http://netdna.bootstrapcdn.com/font-awesome/4.0.3/css/font-awesome.min.css" rel="stylesheet" type="text/css" />
<div id="app" class="todo-container">
<div class="todo-input-container">
<div class="header"><h2><i class="fa fa-bars bars-tab"></i>{{message}}</h2></div>
<div class="todo-input">
<input type="text" vale="" placeholder="add todo text" v-model="newTodoText"/>
<input type="button" value="Add" v-on:click="addTodo()"/>
</div>
</div>
<div class="todo-list-container">
<ul>
<li v-for="todo in todos" v-if="!todo.done">
<div>
<i class="fa fa-shield fa-2x fa-rotate-90"></i>
<h2 class="inline">
<span>{{ todo.text}} </span>
</h2>
<i v-on:click="removeThis(todo)" class="fa fa-trash-o fa-2x"></i>
</div>
</li>
</ul>
<div class="todo-length">Total Todos: {{ todos.length}}</div>
</div>
</div>
<script id="jsbin-javascript">
let todoData = [
{
text: 'Hello World',
done: false
},
{
text: 'Hello Sunday',
id: false
},
{
text: 'Hello Vue',
id: false
}
];
new Vue({
el: '#app',
data: {
message: 'Vue.js : Todo',
todos : [],
newTodoText : '',
todoIdCounter : 0,
},
mounted(){
this.todos = todoData;
this.todoIdCounter = this.todos.length;
},
methods: {
removeThis: function (todo) {
todo.done = true;
this.todos = this.todos.filter(todo=> !todo.done);
},
addTodo(){
if(this.newTodoText === '')
return;
this.todos.push({
text : this.newTodoText,
done : false
});
this.newTodoText = '';
}
}
})
</script>
<script id="jsbin-source-html" type="text/html"><!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width">
<title>JS Bin</title>
</head>
<body>
<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.0.3/vue.js"><\/script>
<script src="https://code.jquery.com/jquery.min.js"><\/script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet" type="text/css" />
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"><\/script>
<link href="//netdna.bootstrapcdn.com/font-awesome/4.0.3/css/font-awesome.min.css" rel="stylesheet" type="text/css" />
<div id="app" class="todo-container">
<div class="todo-input-container">
<div class="header"><h2><i class="fa fa-bars bars-tab"></i>{{message}}</h2></div>
<div class="todo-input">
<input type="text" vale="" placeholder="add todo text" v-model="newTodoText"/>
<input type="button" value="Add" v-on:click="addTodo()"/>
</div>
</div>
<div class="todo-list-container">
<ul>
<li v-for="todo in todos" v-if="!todo.done">
<div>
<i class="fa fa-shield fa-2x fa-rotate-90"></i>
<h2 class="inline">
<span>{{ todo.text}} </span>
</h2>
<i v-on:click="removeThis(todo)" class="fa fa-trash-o fa-2x"></i>
</div>
</li>
</ul>
<div class="todo-length">Total Todos: {{ todos.length}}</div>
</div>
</div>
</body>
</html></script>
<script id="jsbin-source-css" type="text/css">
.todo-container{
position: relative;
width: 500px;
margin: 0px auto;
background-color: aliceblue;
}
.header{
text-align: center;
}
.todo-input{
position: relative;
margin: 0px auto;
width : 50%;
}
.todo-input input{
font-size: 16px;
line-height: 2em;
}
.todo-list-container{
margin-top: 50px;
}
.todo-length{
float : right;
}
.inline{
display:inline;
}
li {
list-style-type: none
}
.fa-trash-o:hover{
cursor:pointer;
color: red;
}
.bars-tab{
padding-right: 30px;
}</script>
<script id="jsbin-source-javascript" type="text/javascript">let todoData = [
{
text: 'Hello World',
done: false
},
{
text: 'Hello Sunday',
id: false
},
{
text: 'Hello Vue',
id: false
}
];
new Vue({
el: '#app',
data: {
message: 'Vue.js : Todo',
todos : [],
newTodoText : '',
todoIdCounter : 0,
},
mounted(){
this.todos = todoData;
this.todoIdCounter = this.todos.length;
},
methods: {
removeThis: function (todo) {
todo.done = true;
this.todos = this.todos.filter(todo=> !todo.done);
},
addTodo(){
if(this.newTodoText === '')
return;
this.todos.push({
text : this.newTodoText,
done : false
});
this.newTodoText = '';
}
}
})</script></body>
</html>
Raw
jsbin.rebacor.css
.todo-container{
position: relative;
width: 500px;
margin: 0px auto;
background-color: aliceblue;
}
.header{
text-align: center;
}
.todo-input{
position: relative;
margin: 0px auto;
width : 50%;
}
.todo-input input{
font-size: 16px;
line-height: 2em;
}
.todo-list-container{
margin-top: 50px;
}
.todo-length{
float : right;
}
.inline{
display:inline;
}
li {
list-style-type: none
}
.fa-trash-o:hover{
cursor:pointer;
color: red;
}
.bars-tab{
padding-right: 30px;
}
Raw
jsbin.rebacor.js
let todoData = [
{
text: 'Hello World',
done: false
},
{
text: 'Hello Sunday',
id: false
},
{
text: 'Hello Vue',
id: false
}
];
new Vue({
el: '#app',
data: {
message: 'Vue.js : Todo',
todos : [],
newTodoText : '',
todoIdCounter : 0,
},
mounted(){
this.todos = todoData;
this.todoIdCounter = this.todos.length;
},
methods: {
removeThis: function (todo) {
todo.done = true;
this.todos = this.todos.filter(todo=> !todo.done);
},
addTodo(){
if(this.newTodoText === '')
return;
this.todos.push({
text : this.newTodoText,
done : false
});
this.newTodoText = '';
}
}
})
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment