Skip to content

Commit

Permalink
The Pokémon Search App
Browse files Browse the repository at this point in the history 
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.
  • Loading branch information
@Meetpidev
Meetpidev authored Oct 4, 2024
1 parent 30879ae commit 06519b3
Show file tree
Hide file tree
Showing 4 changed files with 355 additions and 0 deletions.
9 changes: 9 additions & 0 deletions projects/pokemonSearch/Readme.md
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,9 @@
This repository contains the code for the Pokemon Search App, one of the projects in JavaScript from FreeCodeCamp.

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.
70 changes: 70 additions & 0 deletions projects/pokemonSearch/index.html
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,70 @@
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="style.css">
<title>Pokemon Search App</title>
</head>

<body>
<h1>Pokémon Search App</h1>

<div id="pokedex-container">
<div id="pokedex">
<label for="search-input">Enter Pokemon name or ID</label>
<div id="search">
<input autocomplete="off" required type="text" id="search-input">
<button id="search-button">Search</button>
</div>

<div id="pokemon-info">
<div>
<span id="pokemon-name"></span>
<span id="pokemon-id"></span>
</div>

<div id="pokemon-image"></div>

<p id="weight"></p>
<p id="height"></p>
<div id="types"></div>
</div>

<table>
<thead>
<tr>
<th>Base</th>
<th>Stats</th>
</tr>
</thead>
<tr>
<td>HP:</td>
<td id="hp"></td>
</tr>
<tr>
<td>Attack:</td>
<td id="attack"></td>
</tr>
<tr>
<td>Defense:</td>
<td id="defense"></td>
</tr>
<tr>
<td>Special Attack:</td>
<td id="special-attack"></td>
</tr>
<tr>
<td>Special Defense:</td>
<td id="special-defense"></td>
</tr>
<tr>
<td>Speed:</td>
<td id="speed"></td>
</tr>
</table>
</div>
</div>
<script src="script.js"></script>
</body>
</html>
73 changes: 73 additions & 0 deletions projects/pokemonSearch/script.js
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,73 @@
// Get references to the DOM elements
const userInput = document.getElementById("search-input");
const submitBtn = document.getElementById("search-button");
const pokemonImage = document.getElementById("pokemon-image");

// Elements to display Pokémon details
const pokemonName = document.getElementById("pokemon-name");
const pokemonId = document.getElementById("pokemon-id");
const pokemonWeight = document.getElementById("weight");
const pokemonHeight = document.getElementById("height");
const pokemonTypes = document.getElementById("types");

// Elements for Pokémon stats
const hp = document.getElementById("hp");
const attack = document.getElementById("attack");
const defense = document.getElementById("defense");
const specialAttack = document.getElementById("special-attack");
const specialDefense = document.getElementById("special-defense");
const speed = document.getElementById("speed");

// Function to search the Pokédex based on user input
const searchPokedex = async () => {
// Check if the input field is empty and return if true
if (userInput.value === "") {
return;
}

try {
// Fetch Pokémon data from the API using the user input (converted to lowercase)
const res = await fetch(`https://pokeapi-proxy.freecodecamp.rocks/api/pokemon/${userInput.value.toLowerCase()}`);
const data = await res.json(); // Parse the JSON response

// Destructure necessary properties from the fetched data
const { name, id, weight, height, types, stats, sprites } = data;

// Update the Pokémon image element with the fetched sprite
pokemonImage.innerHTML = `
<img src="${sprites.front_default}" id="sprite">
`;

// Update the HTML elements with the fetched Pokémon details
pokemonName.innerHTML = name.toUpperCase(); // Display name
pokemonId.innerHTML = `#${id}`; // Display Pokémon ID

pokemonWeight.innerHTML = `Weight: ${weight}`;
pokemonHeight.innerHTML = `Height: ${height}`;

// Display types with appropriate styling based on type names
pokemonTypes.innerHTML = types.map(type => `<span class="${type.type.name.toLowerCase()}">${type.type.name.toUpperCase()}</span>`).join(" ");

// Update stats in their respective elements
hp.innerHTML = stats[0].base_stat;
attack.innerHTML = stats[1].base_stat;
defense.innerHTML = stats[2].base_stat;
specialAttack.innerHTML = stats[3].base_stat;
specialDefense.innerHTML = stats[4].base_stat;
speed.innerHTML = stats[5].base_stat;
}
catch(err) {
console.log(err);
alert("Pokemon not found");
}
}

// Event listener for button click to trigger search function
submitBtn.addEventListener("click", searchPokedex);

// Event listener for 'Enter' key press to trigger search function
userInput.addEventListener("keydown", (e) => {
if (e.key === "Enter") {
searchPokedex(); // Call search function on 'Enter' key press
}
});
203 changes: 203 additions & 0 deletions projects/pokemonSearch/style.css
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,203 @@
@import url('https://fonts.cdnfonts.com/css/pokemon-solid');

* {
margin: 0;
padding: 0;
box-sizing: border-box;
font-family: Arial, Helvetica, sans-serif;
}

body {
background-color: beige;
}

h1 {
text-align: center;
margin-bottom: 4vh;
font-family: 'Pokemon Solid', sans-serif;
color: rgb(0, 0, 0);
text-shadow: #42a1ff 6px 6px;
font-size: 3rem;
}

#pokedex-container {
display: flex;
flex-direction: column;
align-items: center;
}

#search {
width: 100%;
text-align: center;
}

#pokedex {
display: flex;
flex-direction: column;
align-items: center;
background-color: rgb(0, 153, 255);
padding: 20px;
border-radius: 8px;
box-shadow: black 5px 5px;
width: 30%;
margin-bottom: 20px;
}

label {
margin-bottom: 10px;
font-size: 1.3rem;
color: white;
}

#search input {
outline: none;
border: none;
padding: 10px;
border-radius: 8px;
width: 70%;
}

#search button {
border: none;
padding: 10px;
border-radius: 8px;
cursor: pointer;
color: white;
background-color: rgb(60, 61, 61);
width: 20%;
}

#pokemon-info {
display: flex;
flex-direction: column;
align-items: center;
width: 100%;
min-height: 300px;
padding: 10px;
background-color: rgb(12, 12, 12);
/*border: rgb(223, 223, 223) solid 10px;*/
color: white;
border-radius: 5px;
margin-top: 5vh;
margin-bottom: 5vh;
font-size: 1.5rem;
}

#pokemon-image img {
width: 200px;
}

#weight, #height {
align-self: flex-start;
}

#types {
margin-top: 20px;
margin-bottom: 10px;
}

#types span {
padding: 8px;
border-radius: 8px;
font-size: 17px;
}

table {
border-spacing: 10px;
width: 100%;
}

td, th {
background-color: #ffffff;
padding: 10px;
}

/*Styling for pokemon types*/

.normal {
background-color: #b7b7aa;
}

.fire {
background-color: #ff6f52;
}

.water {
background-color: #42a1ff;
}

.electric {
background-color: #fecc33;
}

.grass {
background-color: #78cc55;
}

.ice {
background-color: #66ccfe;
}

.fighting {
background-color: #d3887e;
}

.poison {
background-color: #c68bb7;
}

.ground {
background-color: #dfba52;
}

.flying {
background-color: #8899ff;
}

.psychic {
background-color: #ff66a3;
}

.bug {
background-color: #aabb23;
}

.rock {
background-color: #baaa66;
}

.ghost {
background-color: #9995d0;
}

.dragon {
background-color: #9e93f1;
}

.dark {
background-color: #b59682;
}

.steel {
background-color: #abaabb;
}

.fairy {
background-color: #ed99ed;
}

/*Media Queries*/

@media screen and (max-width: 700px) {
#pokedex {
width: 90%;
margin-bottom: 5vh;
}
}

@media screen and (min-width: 501px) and (max-width: 1100px) {
#pokedex {
width: 50%;
margin-bottom: 5vh;
}
}

0 comments on commit 06519b3

Please sign in to comment.