project-phase-1/index.js at main · jdlopez114/project-phase-1 · GitHub

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
const firstGen = 151;

document.addEventListener('DOMContentLoaded', () => {
    fetchAllPokemon();
    searchPokemon();
})

const fetchAllPokemon = () => {
    for (let i = 1; i <= firstGen; i++){
        const url = `https://pokeapi.co/api/v2/pokemon/${i}`;
        fetch(url)
        .then(res => res.json())
        .then(pokeData => renderPokemon(pokeData))
    }
}

const renderPokemon = (pokemon) => {
        let pokemonContainer = document.querySelector('#pokemon-container');
        let pokemonCard = document.createElement('div');
        let pokemonImage = document.createElement('img');

        pokemonCard.classList.add("pokemon-card")
        pokemonImage.classList.add("pokemon-image")

        pokemonImage.src = pokemon.sprites.front_default;

        pokemonCard.append(pokemonImage)
        pokemonContainer.append(pokemonCard);

        let modalImage = document.querySelector('#img01');
        let closeModal = document.querySelector(".close");
        let modal = document.querySelector('#myModal');
        let modalType = document.querySelector('.modal-type');
        let modalId = document.querySelector('.modal-id');
        let modalName = document.querySelector('.modal-name');

    pokemonImage.addEventListener('click', () => {
        modal.style.display = "block";
        modalImage.src = pokemon.sprites.front_shiny;
        modalId.innerText = `Number: ${pokemon.id.toString().padStart(3, '0')}`;
        modalName.innerText = `Name: ${pokemon.name[0].toUpperCase() + pokemon.name.slice(1)}`;
        modalType.innerText = `Types: ${pokemon.types.map(type => type.type.name[0].toUpperCase() + type.type.name.slice(1)).join(", ")}`
    })

    closeModal.addEventListener('click', () => {
        modal.style.display = "none";
    })
}

const searchPokemon = () => {
    const inputForm = document.querySelector('form');
    inputForm.addEventListener('submit', (e) => {
        e.preventDefault();

        const input = document.querySelector('input#searchByName');
        const pokeContainer = document.querySelector('#pokemon-container');
        const id = input.value;

        fetch(`https://pokeapi.co/api/v2/pokemon/${id}`)
        .then(res => res.json())
        .then(pokemonData => {

        // pokeContainer.style.display = "none"
        pokeContainer.innerHTML = "";
        renderPokemon(pokemonData)
        input.value = '';
        })
    });
}

const renderOnePokemon = (pokemon) => {
    let pokemonContainer = document.querySelector('#pokemon-container2');
    let pokemonCard = document.createElement('div');
    pokemonCard.classList.add("pokemon-card")
    let pokemonImage = document.createElement('img');
    pokemonImage.classList.add("pokemon-image")

    pokemonImage.src = pokemon.sprites.front_default;

    pokemonCard.append(pokemonImage)
    pokemonContainer.append(pokemonCard);

    let modalImage = document.querySelector('#img01');
    let closeModal = document.querySelector(".close");
    let modal = document.querySelector('#myModal');
    let modalType = document.querySelector('.modal-type');
    let modalId = document.querySelector('.modal-id');
    let modalName = document.querySelector('.modal-name');

    pokemonImage.addEventListener('click', () => {
        modal.style.display = "block";
        modalImage.src = pokemon.sprites.front_shiny;
        modalId.innerText = `Number: ${pokemon.id.toString().padStart(3, '0')}`;
        modalName.innerText = `Name: ${pokemon.name[0].toUpperCase() + pokemon.name.slice(1)}`;
        modalType.innerText = `Types: ${pokemon.types.map(type => type.type.name[0].toUpperCase() + type.type.name.slice(1)).join(", ")}`
    })

    closeModal.addEventListener('click', () => {
        modal.style.display = "none";
    })
}