JSFiddle - React, Tailwind, and code Playground

by Luis Aguilar

HTML

<div ng-app="ToDoListApp" ng-controller="ToDoListController">
    <h1>To-do List</h1>
    <ul>
        <li ng-repeat="item in items">
            {{item.desc}}
        </li>
    </ul>
    <p>
        <input type="text" ng-model="newItemDescription"></input>
        <button ng-click="addItem()">Add</button>
    </p>
</div>

JavaScript

var toDoListApp = angular.module('ToDoListApp', []);

toDoListApp.controller('ToDoListController', function ($scope) {
	
	/* Model */
	
	$scope.items = [
		{desc: 'Go shopping', done: false},
		{desc: 'Clean my room', done: true},
		{desc: 'Sleep', done: false}
	];
	
	$scope.newItemDescription = '';
	
	/* Events */
	
	$scope.addItem = function () {
		$scope.items.push({ 
			desc: $scope.newItemDescription,
			done: false
		});
	};
});