-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathindex.html
109 lines (108 loc) · 3.98 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
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
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel ="stylesheet" href="styles.css">
<title>Pokedex</title>
</head>
<body>
<script src="./app.js" defer></script>
<header>
<nav>
<div>
<h1>Generation 1 Pokedex</h1>
<img src="https://i.pinimg.com/564x/68/04/f9/6804f94f08de92dd38c664a70a6decfa.jpg"
alt="Gen Pokedex 1"/>
<div id = "content box"></div>
<a id='home' href='pokedex.html'>Home</a>
</div>
</nav>
</header>
<!-- Left side, display pokemon info -->
<div id ="pokemon-info">
<img id ="pokemon-img" src="https://raw.githubusercontent.com/PokeAPI/sprites/master/sprites/pokemon/1.png">
<div id ="pokemon-types">
<span class="type-box grass">Grass</span><span class="type-box poison">Poison</span>
<div id ="pokemon-description"></div>
<br>
</div>
</div>
<!-- Right side, display pokemon list -->
<div id="pokemon-list">
<div id="1" class="pokemon-name">Bulbasaur</div>
<div id="2" class="pokemon-name">Ivysaur</div>
<div id="3" class="pokemon-name">Venusaur</div>
<div id="4" class="pokemon-name">Charmander</div>
<div id="5" class="pokemon-name">Charmeleon</div>
<div id="6" class="pokemon-name">Charizard</div>
<div id="7" class="pokemon-name">Squirtle</div>
<div id="8" class="pokemon-name">Wartortle</div>
<div id="9" class="pokemon-name">Blastoise</div>
<div id="10" class="pokemon-name">Caterpie</div>
<div class="scroll-container">
<div class="content">
<!-- Your content here -->
</div>
</div>
</div>
<div class="container">
<form action="" id="loginForm">
<h1>Pokemon Login</h1>
<input type="pokemon" id="pokemon" class="form-control" placeholder="Enter your Pokemon...">
<input type="pokemon-type" id="pokemon-type" class="form-control" placeholder="Enter your PokemonType...">
<button type="submit">Submit</button>
<article class="pokedexcard">
<h2>CATEGORY</h2>
<p class="qstn">Pokedex Quest</p>
<button type="submit" onclick="buttonClicker()">Show Answer</button>
<script type = "text/javascript">
fetch("https://pokeapi.co/api/v2/pokemon/1")
.then((response) => response.json())
.then((json) => {
const pokedex = json.results;
let i = 1;
for (let result of results) {
if (i < h2.length) {
h2[i].textContent = pokedex.category;
p[i].textContent = pokedex.question;
a[i].textContent = pokedex.correct_answer;
i++;
}
}})
function buttonClicker() {
const submitButton = document.querySelector("button")
submitButton.addEventListener("click", (e) => {
(e).preventDefault
.append[articleCard]
})}
buttonClicker()
</script>
</form>
</div>
</body>
<script>
// Example usage of the functions from api.js
fetchPokemonById(1)
.then(data => {
console.log('Pokemon data:', data);
// Do something with the fetched Pokemon data
})
.catch(error => {
console.log('Error fetching Pokemon:', error);
});
fetchPokemonSpeciesById(1)
.then(data => {
console.log('Pokemon species data:', data);
// Do something with fetched Pokemon species data
})
.catch(error => {
console.log('Error fetching Pokemon species:', error);
});
</script>
<footer>
<h1>Pokedex Footer</h1>
<footer>© 2023 Pokémon.© 1995–2023 Nintendo/Creatures Inc./GAME FREAK inc. </footer>
<script src = "api.js"defer></script>
</footer>
</html>