Front-End/4. jQuery
Ex08_포켓몬도감.html
이뮨01
2023. 6. 26. 17:44
poke api에서 데이터를 받아 나만의 포켓몬 도감을 만들어보다.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
#poke-list {
display: grid;
place-items: center;
grid-template-columns: 100px 100px 100px;
grid-column-gap: 150px;
flex-wrap: wrap;
padding: 10px;
justify-content: center;
}
.poke-card {
display: flex;
flex-direction: column;
align-items: center;
box-sizing: border-box;
border-radius: 10px;
width: 200px;
box-shadow: rgba(50, 50, 93, 0.25) 0px 13px 27px -5px, rgba(0, 0, 0, 0.3) 0px 8px 16px -8px;
padding: 10px;
margin: 10px;
}
.poke-img {
width: 100px;
height: 100px;
}
h1 {
text-align: center;
}
.poke-id {
font-weight: bold;
}
</style>
</head>
<body>
<!-- HTML -->
<h1>나만의 포켓몬 도감</h1>
<div id="poke-list">
<!-- <div class="poke-card">
<img src="https://raw.githubusercontent.com/PokeAPI/sprites/master/sprites/pokemon/other/official-artwork/1.png"
class="poke-img">
<span class="poke-id">1</span>
<span class="poke-name">이상해씨</span>
<span class="poke-species">씨앗포켓몬</span>
<span class="poke-height">키 : <span>0.7</span>m</span>
<span class="poke-weight">몸무게 : <span>6.9</span>kg</span>
</div> -->
</div>
<!-- jQuery 불러오기 -->
<script src="./js/jquery-3.7.0.js"></script>
<script>
// 키, 몸무게 정보 : https://pokeapi.co/api/v2/pokemon/1/
// 이름, 종 정보 : https://pokeapi.co/api/v2/pokemon-species/1/
// 포켓몬 도감 만들기
// 1. poke api 에서 이름, 종, 키, 몸무게 4가지 정보 가져오기
// * $.ajax() 활용
// 2. 가져온 정보를 2개의 배열에 각각 저장하기
// 3. 각 배열의 내용을 태그에 출력하기
let pokeNum = 152; // 포켓몬 몇마리 가져올지
let speciesList = []; // 이름, 종 데이터를 객체형태로 저장하는 배열
let pokemonList = []; // 키, 몸무게 데이터를 객체형태로 저장하는 배열
$("h1").after(`<p><strong>총 <span> ${pokeNum}</span>마리</strong> </p>`)
// 이름, 종 데이터
const getPokeData = (id) => {
let pokeURL = `https://pokeapi.co/api/v2/pokemon-species/${id}/`
$.ajax({
url: pokeURL,
// async 속성 : 통신방식을 비동기 or 동기처리로 변경할 수 있는 속성
// true: 비동기 / false: 동기
async: false,
success: (result) => {
// 서버로부터 응답받은 데이터는 매개변수를 만들어야 사용할 수 있다!!!
// console.log(result);
// console.log(result.names[2].name, result.genera[1].genus);
speciesList.push({
name: result.names[2].name,
genus: result.genera[1].genus
})
},
error: () => {
alert("요청실패..")
}
})
}
// 키, 몸무게 데이터
const getPokeData2 = (id) => {
let pokeURL = `https://pokeapi.co/api/v2/pokemon/${id}`
$.ajax({
url: pokeURL,
async: false,
success: (result) => {
let pokeHeight = (result.height * 0.1).toFixed(1)
let pokeWeight = (result.weight * 0.1).toFixed(1)
// console.log(result)
// console.log(`키: ${pokeHeight}m 몸무게: ${pokeWeight}kg`)
pokemonList.push({
height: pokeHeight,
weight: pokeWeight
})
}
})
}
// 포켓몬 카드를 그리는 함수
// (이름, 종), (몸무게, 키) 정보를 가지는 배열을 입력값으로 받는 함수
const drawPokemonCard = (species, pokemons) => {
for(let i = 1; i < pokeNum; i++){
getPokeData(i)
getPokeData2(i)
$("#poke-list").append(`
<div class="poke-card">
<img src="https://raw.githubusercontent.com/PokeAPI/sprites/master/sprites/pokemon/other/official-artwork/${i}.png"
class="poke-img">
<span class="poke-id">${i}</span>
<span class="poke-name">${species[i-1].name}</span>
<span class="poke-species">${species[i-1].genus}</span>
<span class="poke-height">키 : <span>${pokemons[i-1].height}</span>m</span>
<span class="poke-weight">몸무게 : <span>${pokemons[i-1].weight}</span>kg</span>
</div>
`)
}
}
console.log(speciesList);
console.log(pokemonList);
drawPokemonCard(speciesList, pokemonList);
</script>
</body>
</html>