DjalimSimaila/site-perso-poly
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

feat(HTML, CSS, JS): add new TP4.html file with Pokémon randomizer functionality and associated assets
All checks were successful
DEPLOY / deploy (push) Successful in 6s
Details

Browse Source 
feat(images): add Pokémon images for random selection feature
style(CSS): enhance styling for body, buttons, and layout for better user experience
This commit is contained in:
Djalim Simaila 2025-01-22 11:44:16 +01:00
parent e4d6f39880
commit 270aa2d740
9 changed files with 100 additions and 2 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

16
TP4.html Normal file
View File

@ -0,0 +1,16 @@
<head>
<meta name="Acceuil">
<meta charset="UTF-8">
<link rel="stylesheet" href="static/style.css">
</head>
<body>
<div id="main">
<div id="pokemon_team">
<img id="pokemon_frame" src="" alt="">
<p id="pokemon_name"></p>
<p id="pokemon_desc"></p>
<button type="button" onclick="chose_random_pokemon()">Check out a random pokemon</button>
</div>
</div>
<script src="static/js/TP4.js" defer></script>
</body>

BIN
static/assets/images/pokemons/26.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 866 B

BIN
static/assets/images/pokemons/260.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 1.2 KiB

BIN
static/assets/images/pokemons/282.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 784 B

BIN
static/assets/images/pokemons/297.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 1.0 KiB

BIN
static/assets/images/pokemons/380.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 1.8 KiB

BIN
static/assets/images/pokemons/6.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 1.6 KiB

38
static/js/TP4.js Normal file
View File

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

48
static/style.css
View File

@ -8,9 +8,23 @@
} }
body { body {
background-color: #282A36; color:#F8F8F2;
display: flex; display: flex;
justify-content: center; 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; flex-direction: column;
} }
@ -34,8 +48,21 @@ body {
justify-content: center; 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 { .title_button {
color: inherit; color: black;
padding : 10px; padding : 10px;
border-radius: 10px; border-radius: 10px;
background-color: #BD93F9; background-color: #BD93F9;
@ -67,3 +94,20 @@ body {
width: 20rem; width: 20rem;
height: 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;
}