Skip to content

Navigation Menu

Sign in
Appearance settings

Search code, repositories, users, issues, pull requests...

Provide feedback

We read every piece of feedback, and take your input very seriously.

Saved searches

Use saved searches to filter your results more quickly
Sign up
Appearance settings

Commit 06519b3

Browse files
The Pokémon Search App
The Pokémon Search App allows users to input the name or ID of a Pokémon and retrieves detailed information, including its stats and avatar, from an external API. Key Features: (1) User Input Handling: The application captures user input for Pokémon names or IDs. (2) API Integration: It fetches data from the Pokémon API, dynamically updating the interface with relevant information. (3) Responsive Design: The app is designed to provide a user-friendly experience, displaying Pokémon details such as weight, height, types, and various stats like HP, attack, and defense. (4) Error Management: It includes error handling to alert users when a Pokémon is not found.
1 parent 30879ae commit 06519b3

File tree

4 files changed

+355
-0
lines changed

4 files changed

+355
-0
lines changed

‎projects/pokemonSearch/Readme.md

Lines changed: 9 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,9 @@
1+
This repository contains the code for the Pokemon Search App, one of the projects in JavaScript from FreeCodeCamp.
2+
3+
The Pokémon Search App allows users to input the name or ID of a Pokémon and retrieves detailed information, including its stats and avatar, from an external API.
4+
5+
Key Features:
6+
(1) User Input Handling: The application captures user input for Pokémon names or IDs.
7+
(2) API Integration: It fetches data from the Pokémon API, dynamically updating the interface with relevant information.
8+
(3) Responsive Design: The app is designed to provide a user-friendly experience, displaying Pokémon details such as weight, height, types, and various stats like HP, attack, and defense.
9+
(4) Error Management: It includes error handling to alert users when a Pokémon is not found.

‎projects/pokemonSearch/index.html

Lines changed: 70 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,70 @@
1+
<!DOCTYPE html>
2+
<html>
3+
<head>
4+
<meta charset="UTF-8">
5+
<meta name="viewport" content="width=device-width, initial-scale=1.0">
6+
<link rel="stylesheet" href="style.css">
7+
<title>Pokemon Search App</title>
8+
</head>
9+
10+
<body>
11+
<h1>Pokémon Search App</h1>
12+
13+
<div id="pokedex-container">
14+
<div id="pokedex">
15+
<label for="search-input">Enter Pokemon name or ID</label>
16+
<div id="search">
17+
<input autocomplete="off" required type="text" id="search-input">
18+
<button id="search-button">Search</button>
19+
</div>
20+
21+
<div id="pokemon-info">
22+
<div>
23+
<span id="pokemon-name"></span>
24+
<span id="pokemon-id"></span>
25+
</div>
26+
27+
<div id="pokemon-image"></div>
28+
29+
<p id="weight"></p>
30+
<p id="height"></p>
31+
<div id="types"></div>
32+
</div>
33+
34+
<table>
35+
<thead>
36+
<tr>
37+
<th>Base</th>
38+
<th>Stats</th>
39+
</tr>
40+
</thead>
41+
<tr>
42+
<td>HP:</td>
43+
<td id="hp"></td>
44+
</tr>
45+
<tr>
46+
<td>Attack:</td>
47+
<td id="attack"></td>
48+
</tr>
49+
<tr>
50+
<td>Defense:</td>
51+
<td id="defense"></td>
52+
</tr>
53+
<tr>
54+
<td>Special Attack:</td>
55+
<td id="special-attack"></td>
56+
</tr>
57+
<tr>
58+
<td>Special Defense:</td>
59+
<td id="special-defense"></td>
60+
</tr>
61+
<tr>
62+
<td>Speed:</td>
63+
<td id="speed"></td>
64+
</tr>
65+
</table>
66+
</div>
67+
</div>
68+
<script src="script.js"></script>
69+
</body>
70+
</html>

‎projects/pokemonSearch/script.js

Lines changed: 73 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,73 @@
1+
// Get references to the DOM elements
2+
const userInput = document.getElementById("search-input");
3+
const submitBtn = document.getElementById("search-button");
4+
const pokemonImage = document.getElementById("pokemon-image");
5+
6+
// Elements to display Pokémon details
7+
const pokemonName = document.getElementById("pokemon-name");
8+
const pokemonId = document.getElementById("pokemon-id");
9+
const pokemonWeight = document.getElementById("weight");
10+
const pokemonHeight = document.getElementById("height");
11+
const pokemonTypes = document.getElementById("types");
12+
13+
// Elements for Pokémon stats
14+
const hp = document.getElementById("hp");
15+
const attack = document.getElementById("attack");
16+
const defense = document.getElementById("defense");
17+
const specialAttack = document.getElementById("special-attack");
18+
const specialDefense = document.getElementById("special-defense");
19+
const speed = document.getElementById("speed");
20+
21+
// Function to search the Pokédex based on user input
22+
const searchPokedex = async () => {
23+
// Check if the input field is empty and return if true
24+
if (userInput.value === "") {
25+
return;
26+
}
27+
28+
try {
29+
// Fetch Pokémon data from the API using the user input (converted to lowercase)
30+
const res = await fetch(`https://pokeapi-proxy.freecodecamp.rocks/api/pokemon/${userInput.value.toLowerCase()}`);
31+
const data = await res.json(); // Parse the JSON response
32+
33+
// Destructure necessary properties from the fetched data
34+
const { name, id, weight, height, types, stats, sprites } = data;
35+
36+
// Update the Pokémon image element with the fetched sprite
37+
pokemonImage.innerHTML = `
38+
<img src="${sprites.front_default}" id="sprite">
39+
`;
40+
41+
// Update the HTML elements with the fetched Pokémon details
42+
pokemonName.innerHTML = name.toUpperCase(); // Display name
43+
pokemonId.innerHTML = `#${id}`; // Display Pokémon ID
44+
45+
pokemonWeight.innerHTML = `Weight: ${weight}`;
46+
pokemonHeight.innerHTML = `Height: ${height}`;
47+
48+
// Display types with appropriate styling based on type names
49+
pokemonTypes.innerHTML = types.map(type => `<span class="${type.type.name.toLowerCase()}">${type.type.name.toUpperCase()}</span>`).join(" ");
50+
51+
// Update stats in their respective elements
52+
hp.innerHTML = stats[0].base_stat;
53+
attack.innerHTML = stats[1].base_stat;
54+
defense.innerHTML = stats[2].base_stat;
55+
specialAttack.innerHTML = stats[3].base_stat;
56+
specialDefense.innerHTML = stats[4].base_stat;
57+
speed.innerHTML = stats[5].base_stat;
58+
}
59+
catch(err) {
60+
console.log(err);
61+
alert("Pokemon not found");
62+
}
63+
}
64+
65+
// Event listener for button click to trigger search function
66+
submitBtn.addEventListener("click", searchPokedex);
67+
68+
// Event listener for 'Enter' key press to trigger search function
69+
userInput.addEventListener("keydown", (e) => {
70+
if (e.key === "Enter") {
71+
searchPokedex(); // Call search function on 'Enter' key press
72+
}
73+
});

‎projects/pokemonSearch/style.css

Lines changed: 203 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,203 @@
1+
@import url('https://fonts.cdnfonts.com/css/pokemon-solid');
2+
3+
* {
4+
margin: 0;
5+
padding: 0;
6+
box-sizing: border-box;
7+
font-family: Arial, Helvetica, sans-serif;
8+
}
9+
10+
body {
11+
background-color: beige;
12+
}
13+
14+
h1 {
15+
text-align: center;
16+
margin-bottom: 4vh;
17+
font-family: 'Pokemon Solid', sans-serif;
18+
color: rgb(0, 0, 0);
19+
text-shadow: #42a1ff 6px 6px;
20+
font-size: 3rem;
21+
}
22+
23+
#pokedex-container {
24+
display: flex;
25+
flex-direction: column;
26+
align-items: center;
27+
}
28+
29+
#search {
30+
width: 100%;
31+
text-align: center;
32+
}
33+
34+
#pokedex {
35+
display: flex;
36+
flex-direction: column;
37+
align-items: center;
38+
background-color: rgb(0, 153, 255);
39+
padding: 20px;
40+
border-radius: 8px;
41+
box-shadow: black 5px 5px;
42+
width: 30%;
43+
margin-bottom: 20px;
44+
}
45+
46+
label {
47+
margin-bottom: 10px;
48+
font-size: 1.3rem;
49+
color: white;
50+
}
51+
52+
#search input {
53+
outline: none;
54+
border: none;
55+
padding: 10px;
56+
border-radius: 8px;
57+
width: 70%;
58+
}
59+
60+
#search button {
61+
border: none;
62+
padding: 10px;
63+
border-radius: 8px;
64+
cursor: pointer;
65+
color: white;
66+
background-color: rgb(60, 61, 61);
67+
width: 20%;
68+
}
69+
70+
#pokemon-info {
71+
display: flex;
72+
flex-direction: column;
73+
align-items: center;
74+
width: 100%;
75+
min-height: 300px;
76+
padding: 10px;
77+
background-color: rgb(12, 12, 12);
78+
/*border: rgb(223, 223, 223) solid 10px;*/
79+
color: white;
80+
border-radius: 5px;
81+
margin-top: 5vh;
82+
margin-bottom: 5vh;
83+
font-size: 1.5rem;
84+
}
85+
86+
#pokemon-image img {
87+
width: 200px;
88+
}
89+
90+
#weight, #height {
91+
align-self: flex-start;
92+
}
93+
94+
#types {
95+
margin-top: 20px;
96+
margin-bottom: 10px;
97+
}
98+
99+
#types span {
100+
padding: 8px;
101+
border-radius: 8px;
102+
font-size: 17px;
103+
}
104+
105+
table {
106+
border-spacing: 10px;
107+
width: 100%;
108+
}
109+
110+
td, th {
111+
background-color: #ffffff;
112+
padding: 10px;
113+
}
114+
115+
/*Styling for pokemon types*/
116+
117+
.normal {
118+
background-color: #b7b7aa;
119+
}
120+
121+
.fire {
122+
background-color: #ff6f52;
123+
}
124+
125+
.water {
126+
background-color: #42a1ff;
127+
}
128+
129+
.electric {
130+
background-color: #fecc33;
131+
}
132+
133+
.grass {
134+
background-color: #78cc55;
135+
}
136+
137+
.ice {
138+
background-color: #66ccfe;
139+
}
140+
141+
.fighting {
142+
background-color: #d3887e;
143+
}
144+
145+
.poison {
146+
background-color: #c68bb7;
147+
}
148+
149+
.ground {
150+
background-color: #dfba52;
151+
}
152+
153+
.flying {
154+
background-color: #8899ff;
155+
}
156+
157+
.psychic {
158+
background-color: #ff66a3;
159+
}
160+
161+
.bug {
162+
background-color: #aabb23;
163+
}
164+
165+
.rock {
166+
background-color: #baaa66;
167+
}
168+
169+
.ghost {
170+
background-color: #9995d0;
171+
}
172+
173+
.dragon {
174+
background-color: #9e93f1;
175+
}
176+
177+
.dark {
178+
background-color: #b59682;
179+
}
180+
181+
.steel {
182+
background-color: #abaabb;
183+
}
184+
185+
.fairy {
186+
background-color: #ed99ed;
187+
}
188+
189+
/*Media Queries*/
190+
191+
@media screen and (max-width: 700px) {
192+
#pokedex {
193+
width: 90%;
194+
margin-bottom: 5vh;
195+
}
196+
}
197+
198+
@media screen and (min-width: 501px) and (max-width: 1100px) {
199+
#pokedex {
200+
width: 50%;
201+
margin-bottom: 5vh;
202+
}
203+
}

0 commit comments

Comments
(0)

AltStyle によって変換されたページ (->オリジナル) /