JSFiddle - React, Tailwind, and code Playground
HTML
<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular.min.js"></script>
<link rel="stylesheet" href="http://www.w3schools.com/lib/w3.css">
<script>
var app = angular.module("myTodayList", []);
app.controller("myCtrl", function($scope, $http) {
$scope.products = ["Leeana", "Site", "Teeeyoma"];
$scope.addItem = function () {
$scope.errortext = "";
if (!$scope.addMe) {return;}
if ($scope.products.indexOf($scope.addMe) == -1) {
$scope.products.push($scope.addMe);
} else {
$scope.errortext = "The item is already in your today list.";
}
}
$scope.removeItem = function (x) {
$scope.errortext = "";
$scope.products.splice(x, 1);
}
});
</script>
{%verbatim%}
<div ng-app="myTodayList" ng-cloak ng-controller="myCtrl" class="w3-card-2 w3-margin" style="max-width:400px;">
<header class="w3-container w3-light-grey w3-padding-16">
<h3>My today list</h3>
</header>
<ul class="w3-ul">
<li ng-repeat="x in products" class="w3-padding-16">{{x}}<span ng-click="removeItem($index)" style="cursor:pointer;" class="w3-right w3-margin-right">Ă—</span></li>
</ul>
<div class="w3-container w3-light-grey w3-padding-16">
<div class="w3-row w3-margin-top">
<form id="new_thingtodo_form">
<div class="w3-col s10">
<input placeholder="Add your tasks here" ng-model="addMe" class="w3-input w3-border w3-padding" id="thingtodo">
</div>
<div class="w3-col s2">
<input ng-click="addItem()" class="w3-btn w3-padding w3-green" type="submit" value="Add">
</div>
</form>
</div>
</div>
<p class="w3-padding-left w3-text-red">{{errortext}}</p>
</div>
{%endverbatim%}
<script>
$(document).on('submit','#new_thingtodo_form', function(e) {
e.preventDefault();
$.ajax({
type: 'POST',
url: '/today/',
data: {
thingtodo: $('#thingtodo'), val()
...