-
Notifications
You must be signed in to change notification settings - Fork 0
/
index.html
142 lines (127 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
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
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
<!DOCTYPE html>
<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">
<title>VAR vs LET vs CONST</title>
<style>
body {
background: #f6df1d;
font-family: system-ui;
display: flex;
align-items: center;
justify-content: center;
height: 100vh;
flex-direction: column;
}
.container {
color: #e90063;
font-size: 2.8em;
}
</style>
</head>
<body>
<h1>VAR vs LET vs CONST</h1>
<h1 id="container" class="container"></h1>
<span>
<button id="type">Type</button>
<button id="name">Name</button>
<button id="random">Random</button>
</span>
<script>
// scope
// global function block
// var
// Se puede re inicializar
// se puede re asignar
// su contexto es de función
// global
// let
// NO se puede re inicializar
// se pude re asignar
// su contexto es de bloque
// const
// NO se pude re inicializar
// NO se pude re asignar
// NO es inmutable
// var pokemonType = 'grass'
// pokemonType = 'grass'
let pokemonType = 'electric'
if (pokemonType === 'electric') {
const pokemonName = 'pikachu'
const poke = {
name: 'pikachu'
}
poke.name = 'raichu'
pokemonType = 'eléctrico'
console.log(`mi pokemon es ${pokemonType} y se llama ${poke.name}`)
}
class API {
BASE_URL = 'https://pokeapi.co/api/v2/'
async fetch(id) {
const searchId = id || this.id
const response = await fetch(`${this.BASE_URL}pokemon/${searchId}`)
const pokemon = await response.json()
this.pokemon = pokemon
return pokemon
}
}
class Pokemon extends API {
constructor(id) {
super(id)
this.id = id
const self = this
this.$type.addEventListener('click', function() {
console.log(this)
self.renderType()
})
this.$name.addEventListener('click', () => {
console.log(this)
this.renderName()
})
this.$random.addEventListener('click', () => {
console.log(this.randomId)
this.fetch(this.randomId)
.then(() => {
this.renderName()
this.fetch(this.randomId)
.then(() => {
this.renderName()
})
})
})
}
$container = document.querySelector('#container')
$type = document.querySelector('#type')
$name = document.querySelector('#name')
$random = document.querySelector('#random')
get randomId() {
return Math.floor(Math.random() * (150 - 1) + 1)
}
renderName() {
this.$container.textContent = `Pokemon encontrado ${this.pokemon.name}`
}
renderType() {
const myFavoriteType = 'electric'
let isMyFavoriteType = false
this.pokemon.types.forEach((item) => {
if (item.type.name === myFavoriteType) {
isMyFavoriteType = true
}
})
if (isMyFavoriteType) {
this.$container.textContent = `Es ${myFavoriteType} mi tipo favorito 🤩`
} else {
this.$container.textContent = `Es de tipo ${this.pokemon.types[0].type.name} 😐`
}
}
}
const pokemon = new Pokemon(25)
pokemon.fetch()
.then(() => {
pokemon.renderName()
})
</script>
</body>
</html>