이재호

Dom을 이용해서 포켓몬 도감 만들기 본문

프론트엔드/자바스크립트

Dom을 이용해서 포켓몬 도감 만들기

호재이 2023. 2. 13. 14:28

해당 링크는 포켓몬사이트에서 제공하는 포켓몬 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