Skip to content

Instantly share code, notes, and snippets.

@prabodhmeshram

prabodhmeshram/index.html

Created August 9, 2020 13:51
Show Gist options
  • Save prabodhmeshram/05a9c32393dc3281f85ca43210d1d262 to your computer and use it in GitHub Desktop.
Save prabodhmeshram/05a9c32393dc3281f85ca43210d1d262 to your computer and use it in GitHub Desktop.
Download ZIP
Raw
index.html
<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>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.0/angular.min.js"></script><html>
<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" />
<body class="container" ng-app="myApp" ng-controller="todoCtrl">
<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 ng-model="todoInput" type="text" vale="" placeholder="add todo text" v-model="newTodoText"/>
<input type="button" value="Add" ng-click="todoAdd()"/>
</div>
</div>
<div class="todo-list-container">
<ul>
<li ng-repeat="todo in todos">
<div ><i class="fa fa-shield fa-2x fa-rotate-90"></i>
<h2 class="inline">
<span>{{ todo.text}} </span>
</h2>
<i ng-click="remove(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 Angular',
id: false
}
];
var app = angular.module('myApp', []);
app.controller('todoCtrl', function($scope) {
$scope.message = "Angular Todos!!";
$scope.todos = todoData;
$scope.todoAdd = function() {
$scope.todos.push({text:$scope.todoInput, done:false});
$scope.todoInput = "";
};
$scope.remove = function(todo) {
todo.done = true;
$scope.todos = $scope.todos.filter(todo=> !todo.done);
};
});
</script>
<script id="jsbin-source-html" type="text/html"><script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.0/angular.min.js"><\/script><html>
<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" />
<body class="container" ng-app="myApp" ng-controller="todoCtrl">
<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 ng-model="todoInput" type="text" vale="" placeholder="add todo text" v-model="newTodoText"/>
<input type="button" value="Add" ng-click="todoAdd()"/>
</div>
</div>
<div class="todo-list-container">
<ul>
<li ng-repeat="todo in todos">
<div ><i class="fa fa-shield fa-2x fa-rotate-90"></i>
<h2 class="inline">
<span>{{ todo.text}} </span>
</h2>
<i ng-click="remove(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 Angular',
id: false
}
];
var app = angular.module('myApp', []);
app.controller('todoCtrl', function($scope) {
$scope.message = "Angular Todos!!";
$scope.todos = todoData;
$scope.todoAdd = function() {
$scope.todos.push({text:$scope.todoInput, done:false});
$scope.todoInput = "";
};
$scope.remove = function(todo) {
todo.done = true;
$scope.todos = $scope.todos.filter(todo=> !todo.done);
};
});</script></body>
</html>
Raw
jsbin.pivitex.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.pivitex.js
let todoData = [
{
text: 'Hello World',
done: false
},
{
text: 'Hello Sunday',
id: false
},
{
text: 'Hello Angular',
id: false
}
];
var app = angular.module('myApp', []);
app.controller('todoCtrl', function($scope) {
$scope.message = "Angular Todos!!";
$scope.todos = todoData;
$scope.todoAdd = function() {
$scope.todos.push({text:$scope.todoInput, done:false});
$scope.todoInput = "";
};
$scope.remove = function(todo) {
todo.done = true;
$scope.todos = $scope.todos.filter(todo=> !todo.done);
};
});
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment