loop를 이용해 많은 샘플을 만들고 동적으로 이미지를 제어할 수 있다.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<link rel="stylesheet" href="app.css">
</head>
<body>
<h1>Look at my pokemon</h1>
<section id="container"></section>
<script src="app.js"></script>
</body>
</html>.pokemon {display: inline-block; text-align: center;}
.pokemon img {display: block;}// http://raw.githubusercontent.com/PokeAPI/sprites/master/sprites/pokemon/1.png
const container = document.querySelector('#container');
const baseURL = 'http://raw.githubusercontent.com/PokeAPI/sprites/master/sprites/pokemon/'
for(let i = 1; i < 899; i++) {
const pokemon = document.createElement('div');
pokemon.classList.add('pokemon');
const label = document.createElement('span');
label.innerText = `#${i}`;
const newImg = document.createElement('img');
newImg.src = `${baseURL}${i}.png`;
pokemon.appendChild(newImg);
pokemon.appendChild(label);
container.appendChild(pokemon);
}'TIL LIST > JavaScript' 카테고리의 다른 글
| 공부하면서 헷갈렸던 구문 (0) | 2022.08.16 |
|---|---|
| Color Changer (0) | 2022.08.15 |
| 7시간 짜리 코드 (0) | 2022.08.04 |
| [chrome app 코딩 챌린지] 5. 위치 정보 가져오기(API) (0) | 2022.06.26 |
| [chrome app 코딩 챌린지] 4. 시스템 시간 가져오기 (0) | 2022.06.21 |
