-
Notifications
You must be signed in to change notification settings - Fork 23
/
index.html
77 lines (73 loc) · 3.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
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
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<link rel="shortcut icon" href="images/favicon.ico" />
<title>Minimal Vue</title>
<!-- CSS -->
<link rel="stylesheet" href="https://fonts.googleapis.com/icon?family=Material+Icons">
<link rel="stylesheet" href="style.css">
<!-- <style>[v-cloak] {display: none;}</style> -->
</head>
<body>
<header class="main-header">
Vue - Pokedex
</header>
<div class="main-content" id="app" v-cloak>
<!-- Pokemon Filters -->
<aside class="pokedex-filters">
<!-- Searchbox -->
<!-- don't get scared, v-model is just syntactic sugar to simulate two-way data binding -->
<!-- more info about the Vue binding in https://vuejs.org/v2/guide/forms.html#Text -->
<div class="nice-input-wrapper">
<input class="nice-input" type="text" placeholder="Search by name" v-model="searchText">
<span class="focus-border"><i></i></span>
</div>
<!-- Checkboxes -->
<p class="checkboxes-list-title">Type</p>
<div class="checkboxes-list">
<!-- nice-checkbox -->
<!-- more info about the Vue binding in https://vuejs.org/v2/guide/forms.html#Checkbox -->
<div class="md-checkbox" v-for="(color, type) in TYPE_COLOR" :key="type">
<input :id="'checkbox-'+type" type="checkbox" :value="type" v-model="selectedPokemonTypes">
<label :for="'checkbox-'+type">
<i class="material-icons" :style="{color: color}">lens</i>
<span class="label-title">{{ type }}</span>
</label>
</div>
</div>
</aside>
<!-- Pokemons list -->
<main class="main-view">
<article class="pokemons-list">
<!-- Pokemon Card -->
<pokemon-card
v-for="pokemon in filteredPokemons"
:key="pokemon.name"
:pokemon="pokemon"
:type-color="TYPE_COLOR"
@remove="removePokemon"
></pokemon-card>
</article>
</main>
</div>
<!-- Pokemon Card template for component -->
<script type="text/x-template" id="pokemon-card-template">
<div class="pokemon-card">
<div class="background-wrapper">
<div v-for="type in pokemon.types" :key="type" :style="{'background-color': typeColor[type]}"></div>
</div>
<span class="remove-pokemon" @click="remove"><i class="material-icons">close</i></span>
<div class="image-wrapper">
<img class="pokemon-image" :src="pokemon.image" alt="bulbasaur">
</div>
<div class="pokemon-title">
{{ pokemon.name }}
</div>
</div>
</script>
<script src="https://unpkg.com/vue@2.5.16/dist/vue.js"></script>
<script src="main.js"></script>
</body>
</html>