이재호
Dom을 이용해서 포켓몬 도감 만들기 본문
해당 링크는 포켓몬사이트에서 제공하는 포켓몬 API 입니다.
https://raw.githubusercontent.com/PokeAPI/sprites/master/sprites/pokemon/1.png
index.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Pokemon</title>
<link rel="stylesheet" href="app.css">
</head>
<body>
<section id="container"></section>
<script src="app.js"></script>
</body>
</html>app.js
// id 요소 선택
const container = document.querySelector('#container');
포켓몬 1세대는 1번부터 151번까지가 끝이므로 151번까지 반복을 돌립니다
// API URL도 변수에 추가해줍니다
const URL = "https://raw.githubusercontent.com/PokeAPI/sprites/master/sprites/pokemon/1.png"
for(let i =1; i < 151; i++){
// div로 감싸주기 위해 for문 안에서 div태그를 생성해줍니다
const wrap = document.createElement('div')
// 도감에 각 포켓몬마다 숫자를 넣어주기 위해 span 태그도 추가해줍니다
const txt = document.createElement('span')
// 포멧몬 url 이미지가 들어갈 img 태그도 만들어줍니다
const img = document.createElement('img');
// span 태그에 넘버링을 넣어줍니다 i가 계속 반복하며 추가되기 때문에 리터럴 템플릿을 이용해 넘버링을 해줍니다.
txt.textConent = `#${i}`
// 이미지에 url과 url마다 적용되있는 넘버링도 같이 적어줍니다.
img.src = `${URL}${i}.png`
그다음에 div태그안에 img 태그와 span태그를 추가해줍니다
wrap.appendChild(img)
wrap.appendChild(txt)
그 다음에 div태그를 section 태그 안에 넣어줍니다
container.appendChild(wrap);
}
스타일링을 하고 싶다면 CSS에 속성을 지정해준뒤 클래스를 추가해주면 된다.
app.css
.wrap {
display: inline-block;
text-align: center;
}
.wrap img {
display: block;
}
app.js
const container = document.querySelector('#container');
const URL = "https://raw.githubusercontent.com/PokeAPI/sprites/master/sprites/pokemon/";
for(let i = 1; i < 151; i++){
const wrap = document.createElement('div')
const txt = document.createElement('span')
txt.textContent = `#${i}`;
const img = document.createElement('img');
img.src = `${URL}${i}.png`
wrap.appendChild(img)
wrap.appendChild(txt)
container.appendChild(wrap);
// div태그에 클래스를 추가해서 스타일링을 주면 됩니다
**wrap.classList.add('wrap')**
추후에는 ajax 또는 fetch 이용해 비동기 통신을 사용해서 버튼을 클릭해서 넘길수 있는 페이지까지 구현을 해봐야겠다.
'프론트엔드 > 자바스크립트' 카테고리의 다른 글
| 간단한 폼 리스트 만들기 (0) | 2023.02.14 |
|---|---|
| 랜덤색깔 버튼 만들기 (0) | 2023.02.13 |
| 브라우저에서 버튼 100개 만들어보기 ☑️ (0) | 2023.02.13 |
| querySelectorAll 을 사용해 무지개 글자를 만들어 보자 🌈 (0) | 2023.02.13 |
| 구조분해할당(Destructor)란? (0) | 2023.02.10 |
'프론트엔드/자바스크립트' Related Articles
more
