blogr

<!doctype html>
<html ng-app="todoApp">
  <head>
	<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.5.8/angular.min.js"></script>

<style>
body {
   text-align: center; 
}

ul {
   display: block;
   width: 50%;
   margin: 30px auto;
   text-align: left; 
}

.done-true {
  text-decoration: line-through;
  color: grey;
}
footer {
   margin: auto;
}

#blanc {
   color: red;
   font-size: 10px; 
   
}
</style>

<script>
angular.module('todoApp', []).controller('TodoListController', function() {
	var todoList = this;
	todoList.todos = [
	  {text:'Like this code', done:false},
	  {text:'Write a comment', done:false},
	  {text:'Learn angular.js', done:false},
	  {text:'Buy milk', done:false}];
 
	todoList.addTodo = function() {
	  if (todoList.todoText) {
		todoList.todos.push({text:todoList.todoText, done:false});
		todoList.todoText = '';
		todoList.blanc = null;
	  }
	  else todoList.blanc = "no input"; 
	};
	
	todoList.username = (function() {
	  var name = prompt ("Enter your name");
	  return name;
	})();
	
	todoList.remaining = function() {
	  var count = 0;
	  angular.forEach(todoList.todos, function(todo) {
		count += todo.done ? 0 : 1;
	  });
	  return count;
	};
 
	todoList.archive = function() {
	  var oldTodos = todoList.todos;
	  todoList.todos = [];
	  angular.forEach(oldTodos, function(todo) {
		if (!todo.done) todoList.todos.push(todo);
	  });
	};
});
</script>
  </head>
  <body ng-controller="TodoListController as todoList">
	<h2>Important tasks {{todoList.username || "you"}} must do</h2>
	<h5>{{ todoList.username ? todoList.username + " (logged in)" : '(Unregistered guest)'}}</h5>
	<div >
	  <span>{{todoList.remaining()}} of {{todoList.todos.length}} remaining</span>
	  [ <a href="" ng-click="todoList.archive()">archive</a> ]
	  <ul class="unstyled">
		<li ng-repeat="todo in todoList.todos">
		  <label class="checkbox">
			<input type="checkbox" ng-model="todo.done">
			<span class="done-{{todo.done}}">{{todo.text}}</span>
		  </label>
		</li>
	  </ul>
	  <form ng-submit="todoList.addTodo()">
		<input id="input" type="text" ng-model="todoList.todoText"  size="30"
			   placeholder="add new todo here"> 
		<input class="btn-primary" type="submit" value="add"><br />
		<span id="blanc" show="{{todoList.blanc}}">{{todoList.blanc}}</span><br />
	  </form>
	</div>
	<footer>Code source: <a href="https://angularjs.org/">angularjs.org </a></footer>
  </body>
</html>





@charset "UTF-8";

body {
  background: #f8f8f8;
}
window.addEventListener('load', function() {
  document.querySelector('h1').innerHTML = 'blogr';
}, false);

window.addClass()
Full page Open in App

about 1 month ago

blog101

Pages


comments powered by Disqus