BirthdayPokemon/main.js at main · edn0/BirthdayPokemon · 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
let data = [];

function submit_animation() {

    const sprite_container = document.getElementById("pkmn_sprite_container");
    sprite_container.setAttribute( "class", ".submit_animation");
    setTimeout( function() {
        sprite_container.setAttribute( "class", "")
    }, 3000)

}


let fetchedData = [];

function submit_pkmn() {
    var day = document.getElementById("day").value;
    var month = document.getElementById("month").value;
    var year = document.getElementById("year").value;

    if (day > 31) {
        submit_btn = document.getElementById("submit_btn");

        submit_btn.style.backgroundColor = "#FF0004";
        retun;
    }

    if (month > 12) {
        submit_btn = document.getElementById("submit_btn");

        submit_btn.style.backgroundColor = "#FF0004";
    }

    if (year < 1850 && year > 2100 ) {
        submit_btn = document.getElementById("submit_btn");

        submit_btn.style.backgroundColor = "#FF0004";
    }


    // Date operation
    pkmn_ID = (day * month) % year;


    console.log(pkmn_ID);
    submit_animation();

    url = "https://pokeapi.co/api/v2/pokemon-form/" + pkmn_ID + "/";


    fetch(url).then(function (response) {
        // The API call was successful!
        return response.json();
    }).then(function (data) {
        // This is the JSON from our response
        console.log(data);
        const sprite = data.sprites["front_default"];
        var img = document.createElement('img');
        img.src = sprite;
        img.id = "pkmn_sprite_img";
        document.getElementById("pkmn_sprite_img").remove();
        document.getElementById("pkmn_sprite_container").appendChild(img);

        const pkmn_name = data.pokemon["name"];
        pkmn_name_element = document.getElementById("pkmn_name");
        document.getElementById("pkmn_name").innerHTML = pkmn_name;
        pkmn_name_element.style.opacity = 0.9; // Reveal element after submit

    }).catch(function (err) {
        // There was an error
        console.warn('Something went wrong.', err);
    });


}


// Supposed to allow for validating after pressing enter, need to figure how to implement it properly
function clickPress(event) {
    if (event.keyCode == 13) {
        submit_pkmn();
    }
}