-
Notifications
You must be signed in to change notification settings - Fork 0
/
index.html
33 lines (32 loc) · 1.14 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
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Pokédex</title>
<script src="https://unpkg.com/vue@3/dist/vue.global.js"></script>
<link rel="stylesheet" href="style.css">
</head>
<body>
<div id="app">
<div class="search-bar">
<input type="text" v-model="searchText" @input="searchPokemon" placeholder="Procure seu pokémon">
</div>
<div class="pokemon-container" v-if="filteredPokemon">
<div class="pokemon-card" :class="getTypeClass(filteredPokemon.types[0].type.name, filteredPokemon.types[1]?.type.name)">
<p>Nome: {{ filteredPokemon.name }}</p>
<p>ID: {{ filteredPokemon.id }}</p>
<div class="pokemon-img">
<img :src="filteredPokemon.sprites.other.showdown.front_default" :alt="`Image of ${filteredPokemon.name}`">
</div>
<p>Tipo(s): {{ filteredPokemon.types.map(type => type.type.name).join(', ') }}</p>
<p>Peso: {{ filteredPokemon.weight }}</p>
</div>
</div>
<div class="loading" v-if="loading">
<h1>Loading...</h1>
</div>
</div>
<script src="index.js"></script>
</body>
</html>