Skip to content

Commit 56729cb

Browse files
trishan9trishan9
committed
feat: added pokevanilla js project
1 parent 3fa2eb5 commit 56729cb

10 files changed

+389
-0
lines changed

‎PokeVanilla/images/ascending.png

446 Bytes
Loading

‎PokeVanilla/images/delete.png

180 Bytes
Loading

‎PokeVanilla/images/descending.png

436 Bytes
Loading

‎PokeVanilla/images/hover-trash.png

267 Bytes
Loading

‎PokeVanilla/images/pikachu.png

1.43 KB
Loading

‎PokeVanilla/images/pokeball2.png

1.58 KB
Loading

‎PokeVanilla/images/trash.png

247 Bytes
Loading

‎PokeVanilla/index.html

+55
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,55 @@
1+
<!DOCTYPE html>
2+
<html lang="en">
3+
4+
<head>
5+
<meta charset="UTF-8">
6+
<meta http-equiv="X-UA-Compatible" content="IE=edge">
7+
<meta name="viewport" content="width=device-width, initial-scale=1.0">
8+
<link rel="stylesheet" href="style.css">
9+
<link rel="shortcut icon" href="images/pokeball2.png" type="image/x-icon">
10+
<title>Pokemons List - Trishan</title>
11+
</head>
12+
13+
<body>
14+
15+
<main class="main">
16+
17+
<div class="search">
18+
<input type="text" placeholder="Search Pokemon" class="search__bar">
19+
20+
<div class="menus">
21+
<div class="ascendingSort sort">
22+
<img src="images/ascending.png" alt="" class="menus--icons">
23+
<p class="menus--text sort--text">Ascending</p>
24+
</div>
25+
26+
<div class="descendingSort sort">
27+
<img src="images/descending.png" alt="" class="menus--icons">
28+
<p class="menus--text sort--text">Descending</p>
29+
</div>
30+
31+
</div>
32+
</div>
33+
34+
<div class="table--heading">
35+
<p class="head">POKEMON ID</p>
36+
<p class="head">NAME OF POKEMON</p>
37+
<p class="head">API URL OF POKEMON</p>
38+
</div>
39+
40+
<div class="table--body">
41+
<div class="fetch--button">
42+
<img src="images/pikachu.png" alt="" class="pokeball">
43+
<p class="menus--text">Get Pokemons</p>
44+
</div>
45+
</div>
46+
47+
</main>
48+
49+
<footer></footer>
50+
51+
52+
<script src="script.js"></script>
53+
</body>
54+
55+
</html>

‎PokeVanilla/script.js

+179
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,179 @@
1+
let url = 'https://pokeapi.co/api/v2/pokemon?&limit=50'
2+
let mainTable = document.querySelector('.table--body')
3+
let searchBar = document.querySelector('.search__bar')
4+
let fetchBtn = document.querySelector('.fetch--button')
5+
let ascendingSort = document.querySelector('.ascendingSort')
6+
let descendingSort = document.querySelector('.descendingSort')
7+
let indexOfPokemon = 1
8+
let pokemonArr = []
9+
let filterArr = []
10+
let delButton
11+
12+
const fetchPokemon = async () => {
13+
14+
// Fetch Pokemon Function
15+
mainTable.innerHTML = `<p class = "load">Loading information...</p`
16+
let response = await fetch(url)
17+
let result = await response.json()
18+
mainTable.innerHTML = ''
19+
let pokemons = result.results
20+
pokemons.forEach((pokemon) => {
21+
let { name: pokemonName, url: pokemonUrl } = pokemon
22+
let pokemonID = Math.floor(Math.random() * 1500)
23+
pokemonArr.push({ 'pokemonName': pokemonName, 'pokemonUrl': pokemonUrl, 'pokemonID': pokemonID, 'indexOfPokemon': indexOfPokemon })
24+
let ihtml = `
25+
<div class = "mainDiv">
26+
<div class = "details">
27+
<p class="table--sn">${pokemonID}</p>
28+
<p class="table--name"><img src = "https://raw.githubusercontent.com/PokeAPI/sprites/master/sprites/pokemon/versions/generation-ii/crystal/${indexOfPokemon}.png" class ="pokemons--image" title =${pokemonName.charAt(0).toUpperCase() + pokemonName.slice(1)} >${pokemonName.charAt(0).toUpperCase() + pokemonName.slice(1)}</p>
29+
<a href = "${pokemonUrl}" target = "_blank"><p class="table--url">${pokemonUrl}</p></a>
30+
</div>
31+
<img src="images/trash.png" alt="" class="delete-img" />
32+
</div>
33+
`
34+
mainTable.innerHTML += ihtml
35+
indexOfPokemon++
36+
37+
38+
// Delete Function
39+
delButton = document.querySelectorAll('.delete-img')
40+
delButton.forEach((btn) => {
41+
btn.addEventListener('mouseenter', () => {
42+
btn.src = 'images/hover-trash.png'
43+
})
44+
45+
btn.addEventListener('mouseleave', () => {
46+
btn.src = 'images/trash.png'
47+
})
48+
49+
btn.addEventListener('click', () => {
50+
let element = btn.parentElement
51+
element.remove()
52+
})
53+
})
54+
})
55+
56+
57+
// Search Function
58+
searchBar.addEventListener('input', () => {
59+
filterArr = pokemonArr.filter((pokemon) => {
60+
return pokemon.pokemonName.startsWith(searchBar.value.toLowerCase())
61+
})
62+
mainTable.innerHTML = ''
63+
filterArr.forEach((arr) => {
64+
let ihtml2 = `
65+
<div class = "mainDiv">
66+
<div class = "details">
67+
<p class="table--sn">${arr.pokemonID}</p>
68+
<p class="table--name"><img src = "https://raw.githubusercontent.com/PokeAPI/sprites/master/sprites/pokemon/versions/generation-ii/crystal/${arr.indexOfPokemon}.png" class ="pokemons--image" title = ${arr.pokemonName.charAt(0).toUpperCase() + arr.pokemonName.slice(1)} >${arr.pokemonName.charAt(0).toUpperCase() + arr.pokemonName.slice(1)}</p>
69+
<a href = "${arr.pokemonUrl}" target = "_blank"><p class="table--url">${arr.pokemonUrl}</p></a>
70+
<p class = "hidden">${arr.indexOfPokemon}</p>
71+
</div>
72+
<img src="images/trash.png" alt="" class="delete-img" />
73+
</div>
74+
`
75+
mainTable.innerHTML += ihtml2
76+
77+
78+
// Delete Function
79+
delButton = document.querySelectorAll('.delete-img')
80+
delButton.forEach((btn) => {
81+
btn.addEventListener('mouseenter', () => {
82+
btn.src = 'images/hover-trash.png'
83+
})
84+
85+
btn.addEventListener('mouseleave', () => {
86+
btn.src = 'images/trash.png'
87+
})
88+
89+
btn.addEventListener('click', () => {
90+
let element = btn.parentElement
91+
element.remove()
92+
})
93+
})
94+
})
95+
})
96+
97+
98+
// <=================== Sort Function ======================>
99+
// Ascending Function
100+
ascendingSort.addEventListener('click', () => {
101+
mainTable.innerHTML = ''
102+
const sortFunc = (a, b) => { return (a.pokemonName < b.pokemonName) ? -1 : 1 }
103+
pokemonArr.sort(sortFunc)
104+
pokemonArr.forEach((arr) => {
105+
let ihtml2 = `
106+
<div class = "mainDiv">
107+
<div class = "details">
108+
<p class="table--sn">${arr.pokemonID}</p>
109+
<p class="table--name"><img src = "https://raw.githubusercontent.com/PokeAPI/sprites/master/sprites/pokemon/versions/generation-ii/crystal/${arr.indexOfPokemon}.png" class ="pokemons--image" title = ${arr.pokemonName.charAt(0).toUpperCase() + arr.pokemonName.slice(1)} >${arr.pokemonName.charAt(0).toUpperCase() + arr.pokemonName.slice(1)}</p>
110+
<a href = "${arr.pokemonUrl}" target = "_blank"><p class="table--url">${arr.pokemonUrl}</p></a>
111+
</div>
112+
<img src="images/trash.png" alt="" class="delete-img" />
113+
</div>
114+
`
115+
mainTable.innerHTML += ihtml2
116+
117+
118+
// Delete Function
119+
delButton = document.querySelectorAll('.delete-img')
120+
delButton.forEach((btn) => {
121+
btn.addEventListener('mouseenter', () => {
122+
btn.src = 'images/hover-trash.png'
123+
})
124+
125+
btn.addEventListener('mouseleave', () => {
126+
btn.src = 'images/trash.png'
127+
})
128+
129+
btn.addEventListener('click', () => {
130+
let element = btn.parentElement
131+
element.remove()
132+
})
133+
})
134+
})
135+
136+
})
137+
138+
139+
// Descending Function
140+
descendingSort.addEventListener('click', () => {
141+
mainTable.innerHTML = ''
142+
const sortFuncDesc = (a, b) => { return (a.pokemonName > b.pokemonName) ? -1 : 1 }
143+
pokemonArr.sort(sortFuncDesc)
144+
pokemonArr.forEach((arr) => {
145+
let ihtml2 = `
146+
<div class = "mainDiv">
147+
<div class = "details">
148+
<p class="table--sn">${arr.pokemonID}</p>
149+
<p class="table--name"><img src = "https://raw.githubusercontent.com/PokeAPI/sprites/master/sprites/pokemon/versions/generation-ii/crystal/${arr.indexOfPokemon}.png" class ="pokemons--image" title = ${arr.pokemonName.charAt(0).toUpperCase() + arr.pokemonName.slice(1)} >${arr.pokemonName.charAt(0).toUpperCase() + arr.pokemonName.slice(1)}</p>
150+
<a href = "${arr.pokemonUrl}" target = "_blank"><p class="table--url">${arr.pokemonUrl}</p></a>
151+
</div>
152+
<img src="images/trash.png" alt="" class="delete-img" />
153+
</div
154+
`
155+
mainTable.innerHTML += ihtml2
156+
157+
158+
// Delete Function
159+
delButton = document.querySelectorAll('.delete-img')
160+
delButton.forEach((btn) => {
161+
btn.addEventListener('mouseenter', () => {
162+
btn.src = 'images/hover-trash.png'
163+
})
164+
165+
btn.addEventListener('mouseleave', () => {
166+
btn.src = 'images/trash.png'
167+
})
168+
169+
btn.addEventListener('click', () => {
170+
let element = btn.parentElement
171+
element.remove()
172+
})
173+
})
174+
})
175+
})
176+
177+
}
178+
179+
fetchBtn.addEventListener('click', fetchPokemon)

‎PokeVanilla/style.css

+155
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,155 @@
1+
@import url("https://fonts.googleapis.com/css2?family=Montserrat&display=swap");
2+
3+
* {
4+
margin: 0;
5+
padding: 0;
6+
box-sizing: border-box;
7+
font-family: "Montserrat", sans-serif;
8+
}
9+
10+
.main {
11+
display: flex;
12+
flex-direction: column;
13+
gap: 40px;
14+
}
15+
16+
.search {
17+
display: flex;
18+
width: 100%;
19+
padding: 20px;
20+
background-color: #f7f7f7;
21+
color: #3c4048;
22+
justify-content: space-between;
23+
}
24+
25+
.search__bar {
26+
width: 30rem;
27+
padding: 15px 30px;
28+
border: none;
29+
border: 1px solid #b2b2b2;
30+
border-radius: 10px;
31+
}
32+
33+
.menus {
34+
display: flex;
35+
gap: 30px;
36+
}
37+
38+
.menus--icons {
39+
width: 20px;
40+
}
41+
42+
.pokeball--icons {
43+
width: 18px;
44+
}
45+
46+
.edit,
47+
.sort,
48+
.fetch--button {
49+
display: flex;
50+
background-color: white;
51+
align-items: center;
52+
font-size: 0.8rem;
53+
color: #3c4048;
54+
gap: 10px;
55+
padding: 10px 15px;
56+
border-radius: 30px;
57+
}
58+
59+
.fetch--button {
60+
background-color: #f7f7f7;
61+
padding: 20px;
62+
font-size: 1rem;
63+
gap: 15px;
64+
margin-top: 40px;
65+
cursor: pointer;
66+
}
67+
68+
.pokeball {
69+
width: 25px;
70+
}
71+
72+
.edit:hover,
73+
.sort:hover,
74+
.fetch--button:hover {
75+
cursor: pointer;
76+
background-color: rgb(209, 209, 209);
77+
}
78+
79+
.table--heading {
80+
display: flex;
81+
background-color: #f7f7f7;
82+
width: 50rem;
83+
align-items: center;
84+
padding: 20px;
85+
font-weight: bolder;
86+
margin: auto;
87+
font-size: 0.8rem;
88+
justify-content: flex-start;
89+
gap: 150px;
90+
}
91+
92+
.table--body {
93+
display: flex;
94+
flex-direction: column;
95+
gap: 20px;
96+
margin: auto;
97+
}
98+
99+
.table--name {
100+
display: flex;
101+
align-items: center;
102+
gap: 10px;
103+
margin-left: 60px;
104+
}
105+
106+
.table--sn {
107+
margin: 0 0 0 30px;
108+
}
109+
110+
.delete-img {
111+
width: 20px;
112+
cursor: pointer;
113+
}
114+
115+
.mainDiv {
116+
display: flex;
117+
align-items: center;
118+
gap: 30px;
119+
}
120+
121+
.details {
122+
display: flex;
123+
width: 50rem;
124+
align-items: center;
125+
padding: 20px;
126+
font-weight: bolder;
127+
margin: auto;
128+
font-size: 0.8rem;
129+
justify-content: space-between;
130+
}
131+
132+
footer {
133+
padding: 100px;
134+
}
135+
136+
a {
137+
all: unset;
138+
}
139+
140+
a:hover {
141+
cursor: pointer;
142+
color: #00abb3;
143+
}
144+
145+
.load {
146+
color: #00abb3;
147+
}
148+
149+
.pokemons--image {
150+
width: 30px;
151+
}
152+
153+
.hidden {
154+
display: none;
155+
}

0 commit comments

Comments
 (0)