-
Notifications
You must be signed in to change notification settings - Fork 1
/
Copy pathindex.html
80 lines (69 loc) · 3.46 KB
/
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
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Pokemon Clash</title>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/css/bulma.min.css">
<link rel="styleshee" href="./development/style.css">
</head>
<body>
<header class="content container has-text-centered">
<h1 class="title is-1 has-text-success">Pokemon Clash</h1>
<h2 class="subtitle is-4">Is your pokemon stronger than your rival's? Enter in your Pokemon's name and hit the "confirm" button. Then do the same for your rival. Once both pokemon are ready, hit the "Fight!" button to see who is stronger!</h2>
</header>
<main class="content container has-text-centered">
<div class="tile is-ancestor"> <!-- Left column for Pokemon 1 -->
<div class="tile is-parent">
<article class="tile is-child box has-background-info">
<p class="title has-text-white">Pick your favorite Pokemon!</p>
<img id="pokeimg1"> <!-- Sprite appears here on confirm-->
<label for="Pokemon Selection 1"></label>
<form>
<input list="pokemonDataList" id="pokemonOne" type="text" placeholder="Enter Your Pokemon" />
<button id="pokemonOneConfirm" type="submit">Confirm</button>
</form>
<div class=has-text-white>
<p>If you can't think of any pokemon, some of Ash's best pokemon are Pikachu, Charizard, and Snorlax.</p>
</div>
<!-- <p id="emoji1"></p>--> <!-- This is for the unused emoji api function-->
</article>
</div>
<div class="tile is-parent"> <!-- Right Column for Rival / Pokemon 2-->
<article class="tile is-child box has-background-danger">
<p class="title has-text-white">Pick your rival's Pokemon!</p>
<img id="pokeimg2">
<label for="Pokemon 2 Selection"></label>
<form>
<input list="pokemonDataList" id="pokemonTwo" type="text" placeholder="Enter Rival's Pokemon" />
<button id="pokemonTwoConfirm" type="submit">Confirm</button>
</form>
<div class=has-text-white>
<p>If you can't think of any pokemon, some of Gary's best pokemon are Eevee, Blastoise, and Nidoking.</p>
</div>
<!-- <p id="emoji2"> </p>-->
</div>
</article>
</div>
<div class="tile is-parent"> <!-- Column for Fight Button and Battle Result-->
<article class="tile is-child box has-background-success">
<p class="title has-text-white">Prepare for Battle</p>
<p class="subtitle has-text-white">Once you can see you and your rival's pokemon, hit "Fight!" to see who wins!</p>
<button id="fightButton" class="button is-dark">Fight!</button>
<div class="has-text-white">
<p class="subtitle has-text-white" id="result">Waiting for battle!</p> <!-- Winner results get posted here -->
</div>
</article>
</div>
<datalist id="pokemonDataList">
</datalist>
</main>
<footer class="has-text-centered"> <!-- Trading cards are posted here -->
<h2 class="title">Which Pokemon will you choose next?!</h2>
<div id="cardimage">
</div>
</footer>
<script src="https://code.jquery.com/jquery-1.12.4.js"></script>
<script src="script.js" > </script>
</body>
</html>