diff --git a/TP4.html b/TP4.html new file mode 100644 index 0000000..2e7de3f --- /dev/null +++ b/TP4.html @@ -0,0 +1,16 @@ + + + + + + +
+
+ +

+

+ +
+
+ + diff --git a/static/assets/images/pokemons/26.png b/static/assets/images/pokemons/26.png new file mode 100644 index 0000000..45b0d4b Binary files /dev/null and b/static/assets/images/pokemons/26.png differ diff --git a/static/assets/images/pokemons/260.png b/static/assets/images/pokemons/260.png new file mode 100644 index 0000000..c18799f Binary files /dev/null and b/static/assets/images/pokemons/260.png differ diff --git a/static/assets/images/pokemons/282.png b/static/assets/images/pokemons/282.png new file mode 100644 index 0000000..c57a24b Binary files /dev/null and b/static/assets/images/pokemons/282.png differ diff --git a/static/assets/images/pokemons/297.png b/static/assets/images/pokemons/297.png new file mode 100644 index 0000000..ffb81ec Binary files /dev/null and b/static/assets/images/pokemons/297.png differ diff --git a/static/assets/images/pokemons/380.png b/static/assets/images/pokemons/380.png new file mode 100644 index 0000000..1bc0695 Binary files /dev/null and b/static/assets/images/pokemons/380.png differ diff --git a/static/assets/images/pokemons/6.png b/static/assets/images/pokemons/6.png new file mode 100644 index 0000000..4864bd7 Binary files /dev/null and b/static/assets/images/pokemons/6.png differ diff --git a/static/js/TP4.js b/static/js/TP4.js new file mode 100644 index 0000000..6266b8a --- /dev/null +++ b/static/js/TP4.js @@ -0,0 +1,38 @@ +var pokemons = [6,26,260,282,297,360] + +function chose_random_pokemon(){ + let randnum = Math.floor(Math.random() * pokemons.length); + let imageToDisplay = "static/assets/images/pokemons/"+pokemons[randnum]+".png" + get_name(pokemons[randnum]); + get_desc(pokemons[randnum]); + document.getElementById("pokemon_frame").src = imageToDisplay; +} + + +function get_name(number){ + fetch("https://pokeapi.co/api/v2/pokemon/"+number) + .then(function(response) { + return response.json(); + }) + .then(function(pokemon_data) { + let name = pokemon_data.name; + document.getElementById("pokemon_name").textContent = name; + }) + .catch(function(err) { + console.log('Fetch Error :-S', err); + }); +} + +function get_desc(number){ + fetch("https://pokeapi.co/api/v2/pokemon-species/"+number) + .then(function(response) { + return response.json(); + }) + .then(function(pokemon_data) { + let desc = pokemon_data.flavor_text_entries[0].flavor_text; + document.getElementById("pokemon_desc").textContent = desc; + }) + .catch(function(err) { + console.log('Fetch Error :-S', err); + }); +} diff --git a/static/style.css b/static/style.css index 2d919ff..02d4eef 100644 --- a/static/style.css +++ b/static/style.css @@ -8,9 +8,23 @@ } body { - background-color: #282A36; + color:#F8F8F2; display: flex; justify-content: center; + background-color: #282936; + flex-direction: column; +} + +#main{ + display: flex; + justify-content: center; + align-items: center; +} + +#pokemon_team{ + display: flex; + justify-content: center; + align-items: center; flex-direction: column; } @@ -34,8 +48,21 @@ body { justify-content: center; } +button { + color: black; + padding : 10px; + border-radius: 10px; + background-color: #BD93F9; + border: none; + text-decoration: none !important; +} + +button:hover { + background-color: #BD93F966; +} + .title_button { - color: inherit; + color: black; padding : 10px; border-radius: 10px; background-color: #BD93F9; @@ -67,3 +94,20 @@ body { width: 20rem; height: 20rem; } + +.hidden { + display: none; +} + +#player_input { + color: #F8F8F2; + border-radius: 30px; + border: none; + padding: 10px; + background-color: #44475A; +} + +#pokemon_frame{ + width: 200px; + height: 200px; +}