JSFiddle - React, Tailwind, and code Playground
HTML
<script src="http://code.angularjs.org/1.1.0/angular.min.js"></script>
<div ng-app="practice" ng-controller="practiceCtrl">
<form ng-submit="add()">
<header> Add a todo item </header>
<div>
<input type="text" ng-model="item.val">
<div class="submit" ng-click="get()">Submit</div>
</div>
<div class="list">
<div ng-class="{complete:todo.done}" ng-repeat="todo in todos">
<input type="checkbox" ng-model="todo.done"/>
<label>{{todo.val}}</label>
</div>
</div>
</form>
<pre>{{zack}}</pre>
</div>
CSS
form {
width: 80%;
min-height: 7%;
padding: 1rem;
margin-left: 10%;
background-color: hsl(0,0%,0%);
}
header {
color: white;
padding-bottom: 1rem;
font-size: 2rem;
text-align: center;
}
input[type='text'] {
width: 75%;
float: left;
padding: .52rem 0;
font-size: 1.2rem
}
.complete {
text-decoration: line-through;
}
.submit {
width:21%;
float: right;
margin-left: 1%;
background-color: white;
text-align: center;
padding: .77rem 0;
}
.submit:hover {
cursor: pointer;
background-color: grey;
}
.list {
margin-top: 4rem;
text-align: left;
}
.list > div {
background-color: white;
border-bottom: 1px solid black;
padding: .52rem;
font-size: 1.2rem;
}
input[type='checkbox'] {
}
JavaScript
var module = angular.module('practice', []);
module.controller('practiceCtrl', function($scope, Data) {
$scope.todos = [];
$scope.add = function() {
$scope.todos.push(angular.copy($scope.item));
$scope.item.val = "";
}
$scope.get = function() {
Data.get().then(function(response) {
$scope.zack = JSON.stringify(response, null, 4);
});
}
})
.directive("shrinkOn", function() {
return {
link: function(scope, elem, attr) {
elem.bind(attr["shrinkOn"], function() {
});
}
}
});
.service("Data", function($http) {
var promise;
this.get = function() {
if (!promise) {
alert("get");
promise = $http.get("https://api.github.com/users/zackargyle");
}
return promise;
}
});