@VishalChoudhary/

ANIME_WARS

HTML, CSS, JS

a few tonne of bugs to counter..... anyone who is a bit good in maniulating dom and is interested in this game can join hands wih me.

fork
loading
Files
  • index.html
  • index.css
  • index.js
index.html
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
<!DOCTYPE html>
<html>
<head>
	<title>cards game</title>
	<link rel="stylesheet" type="text/css" href="index.css">
	<script src="index.js"></script>
	<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
</head>
<body>
                         <!--cards-->
                         
                         <!--card 1-->
<div id="playerside">
	<div class="container legendary inactive" id ="goku">
		<div class="avatar legendary">
			<img src = "http://media.japanpowered.com/images/goku.png" style="width:150px; height: 150px;" />
		</div>

		<div class= "data">
			
			<h2 style="text-align: center; font-family:verdana; margin-left: 70px; margin-top:0; ">Goku</h2>
			
			<ul class= "outer">
				<ul class="stats"><li>POWER</li> <li class="rednum">95</li></ul>
			    <ul class="stats"><li>MAGIC</li> <li class="orangenum">85</li></ul>		
			    <ul class="stats"><li>HEALTH</li> <li class="greenum">80</li></ul>
				<ul class="stats"><li>IQ</li> <li class="yellownum">60</li></ul>
			</ul>
			
		</div>
	</div>

		                <!--card 2 -->

		<div class="container clever inactive" id="light">
		<div class="avatar clever">
			<img src = "http://i1188.photobucket.com/albums/z414/Emiliano_Millan/Renders/YagamiLightRender.png" style="width:150px; height: 150px;" />
	
		</div>

		<div class= "data">
			
			<h2 style="text-align: center; font-family:verdana; margin-left: 70px; margin-top:0; ">Light</h2>
			
			<ul class= "outer">
				<ul class="stats"><li>POWER</li> <li class="bluenum">30</li></ul>
			    <ul class="stats"><li>MAGIC</li> <li class="orangenum">80</li></ul>		
			    <ul class="stats"><li>HEALTH</li> <li class="yellownum">50</li></ul>
				<ul class="stats"><li>IQ</li> <li class="rednum">95</li></ul>
			</ul>
			
		</div>	
	</div>
	                   <!--card 3-->

	    <div class="container physical inactive" id="maliodas">
		<div class="avatar physical">
			<img src = "http://images6.fanpop.com/image/photos/38200000/Meliodas-nanatsu-no-taizai-38250496-351-500.png" style="width:150px; height: 150px;" />
	
		</div>

		<div class= "data">
			
			<h2 style="text-align: center; font-family:verdana; margin-left: 70px; margin-top:0;">Meliodas</h2>
			
			<ul class= "outer">
				<ul class="stats"><li>POWER</li> <li class="rednum">100</li></ul>
			    <ul class="stats"><li>MAGIC</li> <li class="yellownum">60</li></ul>		
			    <ul class="stats"><li>HEALTH</li> <li class="rednum">95</li></ul>
				<ul class="stats"><li>IQ</li> <li class="yellownum">65</li></ul>
			</ul>
			
		</div>	
	</div>

	                 <!--card 4-->

	     <div class="container common inactive" id="fullmetal">
		<div class="avatar common">
			<img src = "https://vignette.wikia.nocookie.net/fantendo/images/c/c6/DO_NOT_FAVE_My_ID_by_xXx_Edward_Elric_xXx.png/revision/latest?cb=20140702003641" style="width:150px; height: 150px;" />
	
		</div>

		<div class= "data">
			
			<h2 style="text-align: center; font-family:verdana; margin-left: 70px; margin-top:0;">A. Elrick</h2>
			
			<ul class= "outer">
				<ul class="stats"><li>POWER</li> <li class="orangenum">80</li></ul>
			    <ul class="stats"><li>MAGIC</li> <li class="yellownum">60</li></ul>		
			    <ul class="stats"><li>HEALTH</li> <li class="yellownum">55</li></ul>
				<ul class="stats"><li>IQ</li> <li class="yellownum">65</li></ul>
			</ul>
			
		</div>	
	</div>



<button onclick="drawcard()"id="draw" class="drawer active">DRAW CARD</button>


	 <!--chooser-->
	 <div id = "chooser" class="inactive">
	 	<button value ="power" onclick ="select(this)">POWER</button>
	 	<button value="magic" onclick ="select(this)">MAGIC</button>
	 	<button value = "health" onclick ="select(this)">HEALTH</button>
	 	<button value = "iq" onclick ="select(this)">IQ</button>
	 </div>
	</div>
	
	<!--cpu side-->
	<div id ="cpuside">

	</div>

	<!--announcer-->
	<div id ="rafree">
		its rafree 

	</div>

</body>
</html>
result
console