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) }
