<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Welcome to LearnKode - A code learning platform</title>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.2/angular.min.js"></script>
<link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css">
</head>
<body ng-app="clickExample">
<div ng-controller="ExampleController">
<div class="container">
<button class="btn btn-primary" ng-click="changeColor()">Click On Me to generate random colors</button><br /><br />
<div style="height:100px;width:275px; background-color:{{color}};"> </div><br />
<pre style="width:275px; color:{{color}>;">{{color}}</pre>
</div>
</div>
<script>
var app = angular.module("clickExample", []);
app.controller('ExampleController', ['$scope', function ($scope) {
$scope.color = 'tomato';
$scope.Colors = ["aqua", "azure", "beige", "tan", "blue", "brown", "cyan",
"darkblue", " darkcyan", " darkgrey", "darkgreen",
" darkkhaki", " darkmagenta", "darkolivegreen", "darkorange", "darkorchid", "darkred", " darksalmon", " darkviolet", " gold", " green", "indigo", " khaki", " lightblue", "lightcyan", "lightgreen", " lightgrey", " lightpink", "lightyellow", "lime", "magenta", "maroon", " navy", " olive", " orange", " pink", "purple", " violet", " red ", " silver", "yellow "];
$scope.changeColor = function () {
var color = Math.floor(Math.random() * 40);
$scope.color = $scope.Colors[color];
}
}]);
</script>
</body>
</html>
