JS_DOM_practice with Pokemon - LilyLiya

refer to: https://www.udemy.com/course/the-web-developer-bootcamp/

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>
    <h1>Look at my pokemon!</h1>
    <section id="container"></section>
    <script src="app.js"></script>
</body>

</html>

app.css

.pokemon {
    display: inline-block;
    text-align: center;
}
.pokemon img {
    display: block;
}

app.js

// https://raw.githubusercontent.com/PokeAPI/sprites/master/sprites/pokemon/1.png

const container = document.querySelector('#container');
const baseURL = 'https://raw.githubusercontent.com/PokeAPI/sprites/master/sprites/pokemon/'


for (let i = 1; i <= 151; 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)
}

posted on 2021-01-18 02:44 LilyLiya 阅读(38) 评论(0) 收藏举报

刷新页面返回顶部