50 天学习 50 个项目 - HTMLCSS and JavaScript

day37-Pokedex（神奇宝贝图鉴卡牌展示）

效果

在这里插入图片描述

index.html

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Pokedex</title>
    <link rel="stylesheet" href="style.css" />
</head>

<body>
    <h1>神奇宝贝图鉴</h1>
    <!-- 容器 -->
    <div class="poke-container" id="poke-container"></div>

    <!-- Design inspired by this Dribbble shot: https://dribbble.com/shots/5611109--Pokemon -->
    <script src="script.js"></script>
</body>

</html>

style.css

@import url('https://fonts.googleapis.com/css?family=Lato:300,400&display=swap');

* {
    box-sizing: border-box;
}

body {
    background: #efefbb;
    background: linear-gradient(to right, #d4d3dd, #efefbb);
    font-family: 'Lato', sans-serif;
    /* 子元素竖直排列 */
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    margin: 0;
}

h1 {
    /* 字符之间的间距为3px */
    letter-spacing: 3px;
}

/* 容器 */
.poke-container {
    display: flex;
    flex-wrap: wrap;
    align-items: space-between;
    justify-content: center;
    margin: 0 auto;
    max-width: 1200px;
}

/*每一项 卡片 */
.pokemon {
    background-color: #eee;
    border-radius: 10px;
    box-shadow: 0 3px 15px rgba(100, 100, 100, 0.5);
    margin: 10px;
    padding: 20px;
    text-align: center;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
}

/* 卡片图片容器 */
.pokemon .img-container {
    background-color: rgba(255, 255, 255, 0.6);
    border-radius: 50%;
    width: 120px;
    height: 120px;
    text-align: center;
    display: flex;
    justify-content: center;
}

/* 图片 */
.pokemon .img-container img {
    max-width: 100%;
    margin-top: 20px;
}

/* 卡片信息容器 */
.pokemon .info {
    margin-top: 20px;
}

/* id */
.pokemon .info .number {
    background-color: rgba(0, 0, 0, 0.1);
    padding: 5px 10px;
    border-radius: 10px;
    font-size: 0.8em;
}

/* 名字 */
.pokemon .info .name {
    margin: 15px 0 7px;
    letter-spacing: 1px;
}

script.js

// 重点 flex Object.keys() pokemon.name[0].toUpperCase() + pokemon.name.slice(1)
// pokemon.id.toString().padStart(3, '0') async await
// 1.获取元素节点
const poke_container = document.getElementById('poke-container')//卡片容器
const pokemon_count = 100 //设置图鉴的数量
const colors = {//不同类型不同颜色
    fire: '#FDDFDF',
    grass: '#DEFDE0',
    electric: '#FCF7DE',
    water: '#DEF3FD',
    ground: '#f4e7da',
    rock: '#d5d5d4',
    fairy: '#fceaff',
    poison: '#98d7a5',
    bug: '#f8d5a3',
    dragon: '#97b3e6',
    psychic: '#eaeda1',
    flying: '#F5F5F5',
    fighting: '#E6E0D4',
    normal: '#F5F5F5'
}
const namesChineseList = {

}

// ['fire', 'grass', 'electric', 'water', 'ground', 'rock', 'fairy', 'poison', 'bug', 'dragon', 'psychic', 'flying', 'fighting', 'normal']
const main_types = Object.keys(colors)

// 获取所有卡片数据
const fetchPokemons = async () => {
    for (let i = 1; i <= pokemon_count; i++) {
        await getPokemon(i)
    }
}
// 发请求，获取数据
const getPokemon = async (id) => {
    const url = `https://pokeapi.co/api/v2/pokemon/${id}`
    const res = await fetch(url)
    // console.log(res);
    const data = await res.json()
    // console.log(data);
    createPokemonCard(data)
}
// 创建卡片
const createPokemonCard = async (pokemon) => {
    // 创建卡片 添加相关类
    const pokemonEl = document.createElement('div')
    pokemonEl.classList.add('pokemon')
    // pokemon.name 为bulbasaur 
    // 第一个字母大写并拼接之后的字符
    const name = pokemon.name[0].toUpperCase() + pokemon.name.slice(1)
    // 调用qq翻译API,将其翻译为中文
    // const nameResult = await fetch(`https://api.oioweb.cn/api/txt/QQFanyi?sourceText=${name}`)
    // const nameData = await nameResult.json()
    // console.log(nameData.result.targetText);
    // pokemon.id 1
    // 转为字符串 并padStart()方法在字符串前面填充零，使其总长度达到3位。
    const id = pokemon.id.toString().padStart(3, '0')
    // pokemon.types 一个对象数组
    /**
     * {
            "slot": 1, 
            "type": {
                "name": "grass", 
                "url": "https://pokeapi.co/api/v2/type/12/"
            }
        }, 等等
     */
    // 卡片所属类型
    const poke_types = pokemon.types.map(type => type.type.name)
    // console.log(poke_types);//['grass', 'poison']
    // 找出第一个的所属类型 并竖直颜色 grass
    const type = main_types.find(type => poke_types.indexOf(type) > -1)
    // #DEFDE0
    const color = colors[type]

    pokemonEl.style.backgroundColor = color
    //图片 https://raw.githubusercontent.com/PokeAPI/sprites/master/sprites/pokemon/1.png
    // pokemon.sprites.front_default
    const pokemonInnerHTML = `
    <div class="img-container">
        <img src="${pokemon.sprites.front_default}" alt="${name}">
    </div>
    <div class="info">
        <span class="number">#${id}</span>
        <h3 class="name">${name}</h3>
        <small class="type">Type: <span>${type}</span> </small>
    </div>
    `
    // 设置卡片的html
    pokemonEl.innerHTML = pokemonInnerHTML
    // 添加置容器中
    poke_container.appendChild(pokemonEl)
}
// 初始化执行
fetchPokemons()