pokedex-html / index.html
MakiAi's picture
Update index.html
6075774 verified
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>ポケモン図鑑 - 第1・2世代</title>
<link href="https://fonts.googleapis.com/css2?family=Noto+Sans+JP&family=Press+Start+2P&display=swap" rel="stylesheet">
<style>
body {
margin: 0;
padding: 0;
font-family: 'Press Start 2P', 'Noto+Sans+JP', sans-serif;
background-color: #f0f0f0;
}
.pokedex {
display: flex;
width: 800px;
height: 600px;
margin: 20px auto;
background-color: #d32f2f;
border: 10px solid #b71c1c;
border-radius: 15px;
box-shadow: 0 0 20px rgba(0, 0, 0, 0.5);
}
.list-container {
width: 40%;
background-color: #fff;
border-right: 5px solid #000;
overflow-y: auto;
}
#pokemon-list {
list-style: none;
padding: 10px;
margin: 0;
}
#pokemon-list li {
cursor: pointer;
padding: 8px;
font-size: 12px;
}
#pokemon-list li:hover {
background-color: #eee;
}
.display-container {
width: 60%;
display: flex;
flex-direction: column; /* 縦に並べる */
justify-content: center;
align-items: center;
background-color: #ffffff;
border: 10px solid #000;
border-radius: 10px;
margin: 20px;
}
.sprite-container {
padding: 20px;
display: flex;
justify-content: center;
align-items: center;
}
.text-container {
margin-top: 20px; /* 画像とテキストの間に間隔 */
text-align: center;
}
#pokemon-sprite {
image-rendering: pixelated;
transform: scale(3);
transform-origin: center;
}
#pokemon-name {
font-size: 16px;
color: #000;
}
</style>
</head>
<body>
<div class="pokedex">
<div class="list-container">
<ul id="pokemon-list"></ul>
</div>
<div class="display-container">
<div class="sprite-container">
<img id="pokemon-sprite" src="" alt="ポケモンスプライト">
</div>
<div class="text-container">
<h2 id="pokemon-name"></h2>
</div>
</div>
</div>
<script>
let pokemonList = [];
async function loadPokemon() {
const promises = [];
for (let i = 1; i <= 251; i++) {
promises.push(
Promise.all([
fetch(`https://pokeapi.co/api/v2/pokemon/${i}`).then(res => res.json()),
fetch(`https://pokeapi.co/api/v2/pokemon-species/${i}`).then(res => res.json())
])
);
}
const results = await Promise.all(promises);
pokemonList = results.map(([pokemonData, speciesData]) => {
const japaneseName = speciesData.names.find(name => name.language.name === 'ja').name;
return {
number: String(pokemonData.id).padStart(3, '0'),
name: japaneseName,
sprite: pokemonData.sprites.versions['generation-ii'].crystal.front_default
};
});
const ul = document.getElementById('pokemon-list');
pokemonList.forEach(pokemon => {
const li = document.createElement('li');
li.textContent = `No.${pokemon.number} ${pokemon.name}`;
li.dataset.number = pokemon.number;
ul.appendChild(li);
});
}
document.getElementById('pokemon-list').addEventListener('click', function(event) {
if (event.target.tagName === 'LI') {
const number = event.target.dataset.number;
const pokemon = pokemonList.find(p => p.number === number);
if (pokemon) {
document.getElementById('pokemon-sprite').src = pokemon.sprite;
document.getElementById('pokemon-name').textContent = `No.${pokemon.number} ${pokemon.name}`;
}
}
});
async function init() {
await loadPokemon();
if (pokemonList.length > 0) {
const firstPokemon = pokemonList[0];
document.getElementById('pokemon-sprite').src = firstPokemon.sprite;
document.getElementById('pokemon-name').textContent = `No.${firstPokemon.number} ${pokemon.name}`;
}
}
init();
</script>
</body>
</html>