notes.html


<!DOCTYPE html>
<html>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.9/angular.min.js"></script>
<body ng-app="myNoteApp" ng-controller="myNoteCtrl" background="d.jpeg">
<center>
<a href="page.html">Back to Main Page</a>
<h2>Notes</h2>


<textarea ng-model="message" cols="40" rows="10"></textarea>

<p>
<button ng-click="save()">Save</button>
<button ng-click="clear()">Clear</button>
<button ng-click="about()">About</button>
</p>

<p>Number of characters left: <span ng-bind="left()"></span></p>

<script>
var app = angular.module("myNoteApp", []); 
app.controller("myNoteCtrl", function($scope) {
    $scope.message = "";
    $scope.left = function() {
        return 500 - $scope.message.length;
    };
    $scope.clear = function() {
        $scope.message = "";
    };
    $scope.save = function() {
        alert("Note Saved");
    };
	$scope.about = function() {
        alert("Welcome ");
	$scope.message = "Welcome";
    };
});

</script>
</center>
</body>
</html>