ColorzXD/index.html at master · mnickels/ColorzXD · GitHub

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
<!DOCTYPE html>
<html ng-app="">

<head>
  	<title>ColorzXD</title>
  	<link type="text/css" rel="stylesheet" href="stylesheets/stylesheet.css" />
</head>

<body ng-controller="MainCtrl" ng-style="{background:rgbToHex(red,green,blue)}">
	<div class="main">
		<h1>ColorzXD</h1>
		<div class="left">
		<p>red: <input type="range" min="0" max="255" ng-model="red"></input></p>
		<p>green: <input type="range" min="0" max="255" ng-model="green"></input></p>
		<p>blue: <input type="range" min="0" max="255" ng-model="blue"></input> </p>
		</div>
		<div class="right">
			<p ng-click="changeRed()">{{red}}</p>
			<p ng-click="changeGreen()">{{green}}</p>
			<p ng-click="changeBlue()">{{blue}}</p>
		</div>
		<div class="buttons">
			<p style="font-size:20px" ng-click="changeHex()">hex value: {{rgbToHex(red,green,blue)}} </p>

			<div ng-repeat="color in colorArray">
				<button ng-click="changeColor(colorArray.indexOf(color))">{{color.name}}</button>
			</div>
			<button ng-click="complement()">complement</button>
			<button ng-click="randomColor()">random</button>
			<button ng-click="lastColor()">last color</button>
			<button ng-click="newColor()">add</button>
		</div>
	</div>
	<p id="footer">Tier42</p>
	<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.0.7/angular.min.js" type="text/javascript"></script>
  	<script src="scripts/mainctrl.js" type="text/javascript"></script>
</body>
</html>