JSFiddle - React, Tailwind, and code Playground

by Minko Gechev

HTML

<!doctype html>
<html ng-app>
  <body ng-controller="ToDoCtrl">
    <form ng-submit="add()">
        <input required type="text" ng-model="current" />
        <input type="submit" value="Add" />
    </form>
    <ul>
      <li ng-repeat="todo in todos">
        <button ng-click="delete($index)">x</button>
        <span>{{todo}}</span>
      </li>
    </ul>
  </body>
</html>

CSS

ul, li {
    list-style: none;
    margin-left: 0px;
    padding-left: 0px;
}

JavaScript

function ToDoCtrl($scope) {
    $scope.current = '';
    $scope.todos = ['Item1', 'Item2'];
    $scope.delete = function (idx) {
        $scope.todos.splice(idx, 1);
    };
    $scope.add = function () {
        $scope.todos.push($scope.current);
        $scope.current = '';
    };
}