<!DOCTYPE html>
<html ng-app="ng-learn">
<head>
<script data-require="angular.js@1.4.1" data-semver="1.4.1" src="https://code.angularjs.org/1.4.1/angular.js"></script>
<link rel="stylesheet" href="style.css" />
<script src="script.js"></script>
</head>
<body>
<div ng-controller="TweetCtrl as t">
<textarea rows="5" ng-model="t.tweet"></textarea>
<br>
<p ng-class="{red: t.isTweetMaxed()}">
{{t.charactersRemaining()}}
</p>
<button ng-click="t.addTweet()"
ng-disabled="t.isTweetMaxed()">
Tweet
</button>
<hr>
<ul>
<li ng-repeat="tweet in t.tweetsList">
{{tweet}}
</li>
</ul>
</div>
</body>
</html>
var app = angular.module("ng-learn", []);
app.controller("TweetCtrl", function(){
var tScope = this, maxTweetLength = 140;
tScope.tweetsList = ["fake tweet 2", "fake tweet 1"];
tScope.resetTweet = function(){
tScope.tweet = "";
};
tScope.resetTweet()
tScope.charactersRemaining = function(){
return maxTweetLength - tScope.tweet.length;
};
tScope.isTweetMaxed = function(){
return tScope.charactersRemaining() < 0;
};
tScope.addTweet = function(){
tScope.tweetsList.unshift(tScope.tweet);
tScope.resetTweet();
};
});
/* Styles go here */
.red {color: red;}