JSFiddle - React, Tailwind, and code Playground

by patrickarlt

HTML

<link rel="stylesheet" href=" //cdnjs.cloudflare.com/ajax/libs/foundation/5.1.1/css/foundation.css">
<div ng-app="todo">
    <div ng-controller="TodoCtrl" class="row">
        <div class="columns small-10">
            <h3>Add ToDo</h3>
        </div>
        <form ng-submit="add()" >
            <div class="columns small-10">
                <input type="text" placeholder="Add ToDo" ng-model="input" />
            </div>
            <div class="columns small-2">
                <input class="button postfix" type="submit" value="Add" />
            </div>
        </form>
         
        <div class="columns small-10">
            <h3>ToDos</h3>
            <ul>
                <li ng-repeat="todo in todos">
                    <input type="checkbox" ng-model="todo.done"/>
                    <span ng-class="{done: todo.done}">{{todo.text}}</span>
                </li>
            </ul>
        </div>
    </div>
</div>

CSS

.done {
    text-decoration: line-through;
    color: gray;
}

JavaScript

var app = angular.module('todo', []);

app.controller('TodoCtrl', function($scope){
    $scope.todos = [
        {text: "Arrive at Dev Summit", done: true},
        {text: "Give my Angular talk", done: false},
        {text: "Catch up on sleep", done: false}        
    ]; 
    
    $scope.add = function(){
        if($scope.input.length){
            $scope.todos.push({
                text: $scope.input,
                done:false
            });
            $scope.input = ""
        }
    }   
});