JSFiddle - React, Tailwind, and code Playground

by Kriti

HTML

<body data-ng-app="">
<div class="container" data-ng-controller="ToReadController">
	<header class="app-header">
		<h1 class="app-title">{{ appTitle }}</h1>
	</header>

	<section class="app-body">
		<section class="archive-control">
			<span>{{ remaining() }} books in list: </span>
			<p>[ <a href="" data-ng-click="archive()">Remove Read Items</a> ]</p>
		</section>

		<ul class="unstyled">
			<li data-ng-repeat="todo in todos track by $index">
				<input type="checkbox" data-ng-model="todo.done">
				<span class="done-{{ todo.done }}">{{ todo.text }}</span>
			</li>
		</ul>

		<form data-ng-submit="addTodo()" class="todo-form">
			<input type="text" data-ng-model="todoText" placeholder="Enter new book to read" />
			<br />
			<input type="submit" value="Add Task" />
		</form>
	</section>
</div>

JavaScript

//HTML page to add/remove books from local storage Angular JS
function ToReadController ($scope) {
	$scope.appTitle = "Books to Read";
	$scope.saved = localStorage.getItem('todos');
	$scope.todos = (localStorage.getItem('todos')!==null) ? JSON.parse($scope.saved) : [ {text: 'The Merchant of Venice', done: false}, {text: 'Othello', done: false}, {text: 'Alls Well That Ends Well', done: false} ];
	localStorage.setItem('todos', JSON.stringify($scope.todos));

	$scope.addTodo = function() {
		$scope.todos.push({
			text: $scope.todoText,
			done: false
		});
		$scope.todoText = ''; //clear the input after adding
		localStorage.setItem('todos', JSON.stringify($scope.todos));
	};

	$scope.remaining = function() {
		var count = 0;
		angular.forEach($scope.todos, function(todo){
			count+= todo.done ? 0 : 1;
		});
		return count;
	};

	$scope.archive = function() {
		var oldTodos = $scope.todos;
		$scope.todos = [];
		angular.forEach(oldTodos, function(todo){
			if (!todo.done)
				$scope.todos.push(todo);
		});
		localStorage.setItem('todos', JSON.stringify($scope.todos));
	};
}