Skip to content

Commit

Permalink
Add files via upload
Browse files Browse the repository at this point in the history
  • Loading branch information
@Itz-Murali
Itz-Murali authored Sep 23, 2024
1 parent 2793bc2 commit 96d971f
Show file tree
Hide file tree
Showing 3 changed files with 310 additions and 0 deletions.
45 changes: 45 additions & 0 deletions index.html
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,45 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<link rel="stylesheet" href="style.css" />
<title>Pokedex</title>
</head>
<body>
<h1>Pokedex</h1>
<div class="poke-container" id="poke-container"></div>

<!-- Modal for showing Pokemon details -->
<div class="modal" id="pokemon-modal">
<div class="modal-content">
<span class="close" id="close-modal">&times;</span>
<div class="img-container modal-img-container">
<img id="modal-pokemon-img" alt="Pokemon">
</div>
<div class="info modal-info">
<h3 class="name" id="modal-pokemon-name"></h3>
<small class="type">Type: <span id="modal-pokemon-type"></span></small>
<p>ID: <span id="modal-pokemon-id"></span></p>
<p>Base HP: <span id="modal-pokemon-hp"></span></p>

<div class="stats">
<h4>Stats:</h4>
<ul>
<li>Attack: <span id="modal-pokemon-attack"></span></li>
<li>Defense: <span id="modal-pokemon-defense"></span></li>
<li>Speed: <span id="modal-pokemon-speed"></span></li>
</ul>
</div>

<div class="abilities">
<h4>Abilities:</h4>
<ul id="modal-pokemon-abilities"></ul>
</div>
</div>
</div>
</div>

<script src="script.js"></script>
</body>
</html>
129 changes: 129 additions & 0 deletions script.js
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,129 @@
const poke_container = document.getElementById('poke-container');
const pokemon_count = 150;
const modal = document.getElementById('pokemon-modal');
const closeModal = document.getElementById('close-modal');
const modalImg = document.getElementById('modal-pokemon-img');
const modalName = document.getElementById('modal-pokemon-name');
const modalType = document.getElementById('modal-pokemon-type');
const modalId = document.getElementById('modal-pokemon-id');
const modalHp = document.getElementById('modal-pokemon-hp');
const modalAttack = document.getElementById('modal-pokemon-attack');
const modalDefense = document.getElementById('modal-pokemon-defense');
const modalSpeed = document.getElementById('modal-pokemon-speed');
const modalAbilities = document.getElementById('modal-pokemon-abilities');
const colors = {
fire: '#FDDFDF',
grass: '#DEFDE0',
electric: '#FCF7DE',
water: '#DEF3FD',
ground: '#f4e7da',
rock: '#d5d5d4',
fairy: '#fceaff',
poison: '#98d7a5',
bug: '#f8d5a3',
dragon: '#97b3e6',
psychic: '#eaeda1',
flying: '#F5F5F5',
fighting: '#E6E0D4',
normal: '#F5F5F5'
};

const main_types = Object.keys(colors);

const fetchPokemons = async () => {
for(let i = 1; i <= pokemon_count; i++) {
await getPokemon(i);
}
};

const getPokemon = async (id) => {
const url = `https://pokeapi.co/api/v2/pokemon/${id}`;
const res = await fetch(url);
const data = await res.json();
createPokemonCard(data);
};

const createPokemonCard = (pokemon) => {
const pokemonEl = document.createElement('div');
pokemonEl.classList.add('pokemon');

const name = pokemon.name[0].toUpperCase() + pokemon.name.slice(1);
const id = pokemon.id.toString().padStart(3, '0');

const poke_types = pokemon.types.map(type => type.type.name);
const type = main_types.find(type => poke_types.indexOf(type) > -1);
const color = colors[type];

pokemonEl.style.backgroundColor = color;

const pokemonInnerHTML = `
<div class="img-container">
<img src="https://raw.githubusercontent.com/PokeAPI/sprites/master/sprites/pokemon/${pokemon.id}.png" alt="${name}">
</div>
<div class="info">
<span class="number">#${id}</span>
<h3 class="name">${name}</h3>
<small class="type">Type: <span>${type}</span></small>
</div>
`;

pokemonEl.innerHTML = pokemonInnerHTML;

// Add event listener to show Pokémon details when clicked
pokemonEl.addEventListener('click', () => {
showPokemonDetails(pokemon);
});

poke_container.appendChild(pokemonEl);
};

// Function to show Pokémon details in the modal
const showPokemonDetails = (pokemon) => {
const name = pokemon.name[0].toUpperCase() + pokemon.name.slice(1);
const id = pokemon.id.toString().padStart(3, '0');
const poke_types = pokemon.types.map(type => type.type.name).join(', ');
const imageUrl = `https://raw.githubusercontent.com/PokeAPI/sprites/master/sprites/pokemon/${pokemon.id}.png`;

// Get base stats and abilities
const hp = pokemon.stats.find(stat => stat.stat.name === 'hp').base_stat;
const attack = pokemon.stats.find(stat => stat.stat.name === 'attack').base_stat;
const defense = pokemon.stats.find(stat => stat.stat.name === 'defense').base_stat;
const speed = pokemon.stats.find(stat => stat.stat.name === 'speed').base_stat;

const abilities = pokemon.abilities.map(ability => ability.ability.name);

// Set modal content
modalImg.src = imageUrl;
modalName.textContent = name;
modalType.textContent = poke_types;
modalId.textContent = `#${id}`;
modalHp.textContent = hp;
modalAttack.textContent = attack;
modalDefense.textContent = defense;
modalSpeed.textContent = speed;

// Clear previous abilities and append new ones
modalAbilities.innerHTML = '';
abilities.forEach(ability => {
const abilityItem = document.createElement('li');
abilityItem.textContent = ability;
modalAbilities.appendChild(abilityItem);
});

// Show the modal
modal.style.display = 'block';
};

// Close the modal when clicking the close button
closeModal.onclick = () => {
modal.style.display = 'none';
};

// Close the modal when clicking outside the modal content
window.onclick = (event) => {
if (event.target == modal) {
modal.style.display = 'none';
}
};

fetchPokemons();
136 changes: 136 additions & 0 deletions style.css
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,136 @@
@import url('https://fonts.googleapis.com/css?family=Lato:300,400&display=swap');

* {
box-sizing: border-box;
}

body {
background: #efefbb;
background: linear-gradient(to right, #d4d3dd, #efefbb);
font-family: 'Lato', sans-serif;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
margin: 0;
}

h1 {
letter-spacing: 3px;
}

.poke-container {
display: flex;
flex-wrap: wrap;
align-items: space-between;
justify-content: center;
margin: 0 auto;
max-width: 1200px;
}

.pokemon {
background-color: #eee;
border-radius: 10px;
box-shadow: 0 3px 15px rgba(100, 100, 100, 0.5);
margin: 10px;
padding: 20px;
text-align: center;
cursor: pointer;
}

.pokemon .img-container {
background-color: blq
border-radius: 50%;
width: 120px;
height: 120px;
text-align: center;
}

.pokemon .img-container img {
max-width: 100%;
margin-top: 20px;
}

.pokemon .info {
margin-top: 20px;
}

.pokemon .info .number {
background-color: rgba(0, 0, 0, 0.1);
padding: 5px 10px;
border-radius: 10px;
font-size: 0.8em;
}

.pokemon .info .name {
margin: 15px 0 7px;
letter-spacing: 1px;
}

/* Modal Styles */
.modal {
display: none;
position: fixed;
z-index: 1;
left: 0;
top: 0;
width: 100%;
height: 100%;
background-color: transparent;

}

.modal-content {
background-color: transparent;
margin: 15% auto;
padding: 20px;

width: 300px;
border-radius: 10px;
text-align: center;
box-shadow: 0 3px 15px rgba(100, 100, 100, 0.5);
backdrop-filter: blur(65px);
}

.modal-img-container img {
width: 100px;
height: 100px;
}

.modal .info {
margin-top: 20px;
}

.close {
color: #aaa;
float: right;
font-size: 28px;
font-weight: bold;
cursor: pointer;
}

.close:hover,
.close:focus {
color: black;
}


/* Additional modal styles for new content */
.modal-content .stats,
.modal-content .abilities {
margin-top: 15px;
text-align: left;
}

.modal-content h4 {
margin-bottom: 10px;
}

.modal-content ul {
list-style-type: none;
padding: 0;
}

.modal-content ul li {
margin-bottom: 5px;
}

0 comments on commit 96d971f

Please sign in to comment.