angular-matching-game/index.html at master · kremerben/angular-matching-game · 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
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>Angular Basics</title>
    <script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.16/angular.min.js"></script>
<!-- 	<script src="jquery.min.js"></script> -->
	<script src="app.js"></script>
<!-- 	<script src="index.js"></script> -->
	<script src="service.js"></script>
	<script src="pokemanController.js"></script>
	<link href="style.css" rel="stylesheet" type="text/css" media="all">

  </head>

<body>


<div ng-app="team">


<div ng-controller='firstController'>

        <button ng-click='getTeam();' > Get a random team  </button>
			        <div ng-repeat="pokemon in team track by $index" >
				        <div class="pokemonMatch ok">{{ pokemon.name }}<br>
					        <img src='{{ "http://pokeapi.co/media/img/" + pokemon.pkdx_id + ".png" }}' />
				        </div>
			        </div>

</div>
<div ng-controller='secondController'>

        <button ng-click='playMatchGame();' > Play Matching Game  </button>
        <div ng-show='noTeam'>NO TEAM - CLICK BUTTON ABOVE FIRST</div>
        <div ng-show='winner'>Winner in {{ totalClicks }} clicks!</div>
			        <div ng-repeat="pokemon in gameTeam track by $index" >
				        <div ng-click="makeActive($index);" class="pokemonMatch game" >
				        	<div ng-show="pokemon.showActive || pokemon.found"   >
					        	{{ pokemon.name }}<br>
						        				        <img  src='{{ "http://pokeapi.co/media/img/" + pokemon.pkdx_id + ".png" }}' />

				        	</div>
				        </div>
			        </div>


<!--
        <button ng-click='loadTeam();' > Load the team  </button>
        	<div ng-show='noTeam'>No team to load</div>
			        <ul>
			        <div ng-repeat="pokemon in team track by $index" >
			        <li>{{ pokemon.name }}</li>
			        </div>
			        </ul>
-->

<!--
		        <button ng-click='getStarter();' > Starter  </button>
			        <ul>
			        <li>{{ starter }}</li>
			        </ul>

				<button ng-click='getRandom();' > random  </button>
				<ul><li>{{ random.name }}</li></ul>
-->


<!--
<div >
        <input type="text" ng-model="searchTerms">
        <button ng-click='getMovies();' > Get Movies  </button>
        <input type="text" ng-model="quickquery">

		<div ng-show="showResults">
			<h3>Search: {{ searchTerms }}</h3>
			<ul>
			        <div ng-repeat="movie in movies | filter:quickquery track by $index" >
			        	<li>{{ movie.title }}
			        		<div ng-show="movie.showImage">
			        		<img ng-click="hideInfo($index);" src="{{ movie.posters.original }}" />
								<button ng-click="hideInfo($index);">Hide Image</button>
							</div>
							<div ng-hide="movie.showImage">
								<button ng-click="moreInfo($index);">Show Image</button>
							</div>
	</li>

			        </div>
			</ul>
		</div>
</div>
        	<br><hr>
-->
<!--
		<pre>
	    	book = {{ book | json }}
		</pre>
	<br><hr>
		<pre>
	    	booklist = {{ booklist | json }}
		</pre>
			<br><hr>
-->

</div>


</div>
</body>
</html>