IdoBn/1.html

## 1.html
<!doctype html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<script src="http://code.jquery.com/jquery-latest.min.js"></script>
	<title>class</title>
</head>
<body>
	<h1>Hi Guys!</h1>
	<form>
		<input type="text" id="username">
		<input type="password" id="password">
		<button id="submit" onclick="check()">submit</button>
	</form>

	<script type="text/javascript">
		function check() {
			var username = document.getElementById('username').value;
			var password = document.getElementById('password').value;
			if (username == 'admin' && password == 'password') {
				alert('hello admin!');
			} else {
			  alert('you are not my master...');
      }
		}
	</script>
</body>
</html>

## 2.html
<!doctype html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<script src="http://code.jquery.com/jquery-latest.min.js"></script>
	<title>class</title>
</head>
<body>
	<h1>Hi Guys!</h1>
	<form id='form1'>
		<input type="text" id="username">
		<input type="password" id="password">
		<input type='submit' id="submit"></button>
	</form>

	<script type="text/javascript">
		$('#form1').submit(function() {
			var username = $('#username').val();
			var password = $('#password').val();
			if (username == 'admin' && password == 'password') {
				alert('hello admin!');
			} else {
				alert('you are not my master!');
			}
		});
	</script>
</body>
</html>

## 3.html
<!doctype html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<script src="http://code.jquery.com/jquery-latest.min.js"></script>
	<title>class</title>
</head>
<body>
	<h1>Check out these divs!</h1>
	<div id='red'></div>
	<div id='green'></div>
	<div id='yellow'></div>

	<script type="text/javascript">
		var colors = ['red', 'yellow', 'green'];
		colors.forEach(function(elem) {
			$('#' + elem).hover(function() {
				$(this).width(50);
			}, function() {
				$(this).width(30);
			});
		});
	</script>

	<style>
		#red {
			background-color: red;
			width: 30px;
			height: 30px;
		}
		#yellow {
			background-color: yellow;
			width: 30px;
			height: 30px;
		}
		#green {
			background-color: green;
			width: 30px;
			height: 30px;
		}
	</style>
</body>
</html>

## 4.html
<!doctype html>
<html lang="en" ng-app='ngHello'>
<head>
	<meta charset="UTF-8">
	<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.16/angular.min.js"></script>
	<title>class</title>
</head>
<body ng-controller='mainCtrl'>
	<h1>{{header}}</h1>
	<form>
		<input type='text' ng-model="username">
		<input type="password" ng-model="password">
		<button ng-click='click()'>submit</button>
	</form>
</body>

<script type="text/javascript">
	angular.module('ngHello', []).
		controller('mainCtrl', ['$scope', function($scope){
			$scope.header = 'we can do it in angular?!';
			$scope.click = function() {
				if ($scope.username == 'admin' && $scope.password == 'password') {
					alert('hello admin!');
				} else {
					alert('you are not my master');
				}
			};
		}])
</script>
</html>

## 5.html
<!doctype html>
<html lang="en" ng-app='ngHello'>
<head>
	<meta charset="UTF-8">
	<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.16/angular.min.js"></script>
	<title>class</title>
</head>
<body ng-controller='mainCtrl'>
	<h1>{{header}}</h1>
	<divo color='red'></divo>
	<divo color='yellow'></divo>
	<divo color='green'></divo>
</body>

<script type="text/javascript">
	angular.module('ngHello', []).
		controller('mainCtrl', ['$scope', function($scope){
			$scope.header = 'we can do it in angular?!';
		}]).
		directive('divo', function(){
			return {
				scope: {
					color: '='
				},
				restrict: 'E',
				template: "<div ng-mouseover='width(50)' ng-mouseleave='width(30)' ng-style='style'></div>",
				link: function(scope, elem, attrs, controller) {
					scope.style = {
						'background-color': attrs.color,
						'width': '30px',
						'height': '30px'
					};
					scope.color = attrs.color;
					scope.width = function(width) {
						scope.style.width = width + 'px';
					};
				}
			};
		})
</script>
</html>
	<!doctype html>
	<html lang="en">
	<head>
	<meta charset="UTF-8">
	<script src="http://code.jquery.com/jquery-latest.min.js"></script>
	<title>class</title>
	</head>
	<body>
	<h1>Hi Guys!</h1>
	<form>
	<input type="text" id="username">
	<input type="password" id="password">
	<button id="submit" onclick="check()">submit</button>
	</form>

	<script type="text/javascript">
	function check() {
	var username = document.getElementById('username').value;
	var password = document.getElementById('password').value;
	if (username == 'admin' && password == 'password') {
	alert('hello admin!');
	} else {
	alert('you are not my master...');
	}
	}
	</script>
	</body>
	</html>
	<!doctype html>
	<html lang="en" ng-app='ngHello'>
	<head>
	<meta charset="UTF-8">
	<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.16/angular.min.js"></script>
	<title>class</title>
	</head>
	<body ng-controller='mainCtrl'>
	<h1>{{header}}</h1>
	<form>
	<input type='text' ng-model="username">
	<input type="password" ng-model="password">
	<button ng-click='click()'>submit</button>
	</form>
	</body>

	<script type="text/javascript">
	angular.module('ngHello', []).
	controller('mainCtrl', ['$scope', function($scope){
	$scope.header = 'we can do it in angular?!';
	$scope.click = function() {
	if ($scope.username == 'admin' && $scope.password == 'password') {
	alert('hello admin!');
	} else {
	alert('you are not my master');
	}
	};
	}])
	</script>
	</html>