Skip to content
Snippets Groups Projects
Commit a5d90d19 authored by leonard.beck's avatar leonard.beck :zzz:
Browse files

merge??

parents f90fc4e9 46298237
No related branches found
No related tags found
No related merge requests found
//Créer une type qui contient 2 img de types pokemons
function typeBox(src1,src2){ function typeBox(src1,src2){
var typeBox = document.createElement("div"); var typeBox = document.createElement("div");
...@@ -12,6 +13,7 @@ function typeBox(src1,src2){ ...@@ -12,6 +13,7 @@ function typeBox(src1,src2){
type1.src = src1; type1.src = src1;
if(src2 == ""){ if(src2 == ""){
//si le pokemon n'a qu'un seul type on n'affiche rien pour la 2em image
type2.style.display = "none"; type2.style.display = "none";
} }
else{ else{
...@@ -27,6 +29,7 @@ function typeBox(src1,src2){ ...@@ -27,6 +29,7 @@ function typeBox(src1,src2){
} }
//Créer une croix à l'article qui permet de le supprimer de la liste des articles dans le sac et dans le storage
function toDeleteArticle(poke,name){ function toDeleteArticle(poke,name){
let x = document.createElement("img"); let x = document.createElement("img");
x.className = "x"; x.className = "x";
...@@ -45,6 +48,7 @@ function toDeleteArticle(poke,name){ ...@@ -45,6 +48,7 @@ function toDeleteArticle(poke,name){
} }
//Créer un article
function createArticle(name,number,type1,type2,attacks,talent,shiny){ function createArticle(name,number,type1,type2,attacks,talent,shiny){
let container = document.getElementById("container"); let container = document.getElementById("container");
...@@ -57,6 +61,7 @@ function createArticle(name,number,type1,type2,attacks,talent,shiny){ ...@@ -57,6 +61,7 @@ function createArticle(name,number,type1,type2,attacks,talent,shiny){
let price = document.createElement("p"); let price = document.createElement("p");
price.className = "price"; price.className = "price";
//On change le sprite du pokemon si il est shiny
if(shiny == 1){ if(shiny == 1){
img.src = "https://raw.githubusercontent.com/PokeAPI/sprites/master/sprites/pokemon/shiny/" + number + ".png"; img.src = "https://raw.githubusercontent.com/PokeAPI/sprites/master/sprites/pokemon/shiny/" + number + ".png";
price.innerHTML = "4.00 CHF"; price.innerHTML = "4.00 CHF";
...@@ -77,11 +82,12 @@ function createArticle(name,number,type1,type2,attacks,talent,shiny){ ...@@ -77,11 +82,12 @@ function createArticle(name,number,type1,type2,attacks,talent,shiny){
let typebox = typeBox(type1,type2); let typebox = typeBox(type1,type2);
//Champ attack pour préciser quels sont les attaques
let title = document.createElement("p"); let title = document.createElement("p");
title.className = "name"; title.className = "name";
title.innerHTML = "Attacks:"; title.innerHTML = "Attacks:";
//Pareil pour le talent
let talentName = document.createElement("p"); let talentName = document.createElement("p");
talentName.className = "text"; talentName.className = "text";
talentName.innerHTML = talent; talentName.innerHTML = talent;
...@@ -92,11 +98,11 @@ function createArticle(name,number,type1,type2,attacks,talent,shiny){ ...@@ -92,11 +98,11 @@ function createArticle(name,number,type1,type2,attacks,talent,shiny){
typeAndName.appendChild(typebox); typeAndName.appendChild(typebox);
pokemon.appendChild(x); pokemon.appendChild(x);
pokemon.appendChild(img); pokemon.appendChild(img);
pokemon.appendChild(typeAndName); pokemon.appendChild(typeAndName);
pokemon.appendChild(title); pokemon.appendChild(title);
//Box contenant les attaques afin de mieux les visualiser
let box = document.createElement("div"); let box = document.createElement("div");
box.className = "attackbox"; box.className = "attackbox";
...@@ -119,18 +125,19 @@ function createArticle(name,number,type1,type2,attacks,talent,shiny){ ...@@ -119,18 +125,19 @@ function createArticle(name,number,type1,type2,attacks,talent,shiny){
} }
//Permet de récupérer un élément dans le storage par rapport à son index
function getItem(index){ function getItem(index){
return localStorage.getItem(localStorage.key(index)); return localStorage.getItem(localStorage.key(index));
} }
//On affiche le nombre d'article actuellement dans le sac
document.getElementById("number").innerHTML = localStorage.length-1; document.getElementById("number").innerHTML = localStorage.length-1;
for(let i = 0; i<localStorage.length; i++){ for(let i = 0; i<localStorage.length; i++){
//On ignore la clef oui qui une clef supplémentaire destiné à une autre utilisation
if(localStorage.key(i)=="oui"){ if(localStorage.key(i)=="oui"){
continue continue
} }
......
//récupère une liste de tous les noms des pokemons
function Pokemons(){ function Pokemons(){
return fetch("https://pokeapi.co/api/v2/pokemon/?limit=900") return fetch("https://pokeapi.co/api/v2/pokemon/?limit=900")
...@@ -7,6 +7,7 @@ ...@@ -7,6 +7,7 @@
} }
//effectue une requête
function get(that) { function get(that) {
return fetch(that) return fetch(that)
...@@ -15,7 +16,7 @@ ...@@ -15,7 +16,7 @@
} }
//Créer une type qui contient 2 img de types pokemons
function typeBox(){ function typeBox(){
var typeBox = document.createElement("div"); var typeBox = document.createElement("div");
...@@ -35,6 +36,7 @@ ...@@ -35,6 +36,7 @@
} }
//Creer un bouton spécifique (rien de spécial à comprendre)
function createStyleButton(){ function createStyleButton(){
let cssButton = document.createElement("div"); let cssButton = document.createElement("div");
...@@ -62,10 +64,9 @@ ...@@ -62,10 +64,9 @@
} }
//Génère toutes les boxs de la page du shop, prend un intervalle de valeur car la page génère au fur et à mesure les pokemons (presque 900) pour ne pas trop charger la page
function boxGenerator(init,number){ function boxGenerator(init,number){
for(let i = init; i<init+number; i++){ for(let i = init; i<init+number; i++){
var tab = document.getElementsByClassName("tab"); var tab = document.getElementsByClassName("tab");
...@@ -83,7 +84,7 @@ ...@@ -83,7 +84,7 @@
var button = createStyleButton(); var button = createStyleButton();
button.id = i; button.id = i;
//Lorsqu'on clique on enregistre la séléction et les éléments important du pokemon
button.onclick = function(){ button.onclick = function(){
let pokemon = document.getElementById(i).children; let pokemon = document.getElementById(i).children;
...@@ -113,7 +114,7 @@ ...@@ -113,7 +114,7 @@
} }
//Prend une intervalle pour les mêmes raison que box generator et récupère les pokemons de l'intervalle pour les ajouter au box de la page
function pokedex(init,number){ function pokedex(init,number){
let pokemons = Pokemons(); let pokemons = Pokemons();
...@@ -122,6 +123,7 @@ ...@@ -122,6 +123,7 @@
pokemons.then(Poks => { pokemons.then(Poks => {
//classe contenant le noms des pokemons
let names = document.getElementsByClassName("css-button-text"); let names = document.getElementsByClassName("css-button-text");
let types = document.getElementsByClassName("type"); let types = document.getElementsByClassName("type");
...@@ -129,16 +131,19 @@ ...@@ -129,16 +131,19 @@
for(let i = init; i<init+number; i++){ for(let i = init; i<init+number; i++){
names[i].innerHTML = Poks.results[i].name; names[i].innerHTML = Poks.results[i].name;
//Ajout d'un élément before pour donner le numéro pokedex du pokemon
let before = document.createElement("p"); let before = document.createElement("p");
before.innerHTML = i+1; before.innerHTML = i+1;
before.className ="before"; before.className ="before";
names[i].before(before); names[i].before(before);
//On va récupérer depuis l'API l'url menant aux informations précise du pokemon afin d'avoir accès à ses types
let stats = get(Poks.results[i].url); let stats = get(Poks.results[i].url);
stats.then(stat => { stats.then(stat => {
//Parcours 2 par 2 des types
if(stat.types.length > 1){ if(stat.types.length > 1){
types[2*i].src = "img/types/" + stat.types[0].type.name + ".png"; types[2*i].src = "img/types/" + stat.types[0].type.name + ".png";
types[(2*i)+1].src = "img/types/" + stat.types[1].type.name + ".png"; types[(2*i)+1].src = "img/types/" + stat.types[1].type.name + ".png";
...@@ -155,6 +160,7 @@ ...@@ -155,6 +160,7 @@
} }
//Fonction qui permet la recherche du pokemon
function search() { function search() {
var input, filter, txtValue, names, boxs; var input, filter, txtValue, names, boxs;
...@@ -178,10 +184,8 @@ ...@@ -178,10 +184,8 @@
} }
} }
//Génération au fur et à mesure des pokemons pour ne pas rendre le chargement de la page trop long
function scrollEffect(){ function loadEffect(){
let main = document.getElementsByTagName("main")[0].scrollTop; let main = document.getElementsByTagName("main")[0].scrollTop;
for(let i = 1; i<45; i++){ for(let i = 1; i<45; i++){
......
//Affiche le nombre d'article dans le sac qui sont enregistré dans le local storage
if(localStorage.length > 0){ if(localStorage.length > 0){
let after = document.createElement("p"); let after = document.createElement("p");
after.className = "after"; after.className = "after";
//On soustrait de -1 car il y'a un élément dans le storage qui n'est pas un article
after.innerHTML = localStorage.length -1; after.innerHTML = localStorage.length -1;
let bag = document.getElementById("sac"); let bag = document.getElementById("sac");
......
...@@ -10,7 +10,7 @@ ...@@ -10,7 +10,7 @@
<link rel="stylesheet" href="css/button.css"> <link rel="stylesheet" href="css/button.css">
<title>Pokeshop</title> <title>Pokeshop</title>
</head> </head>
<body onload="scrollEffect()" > <body onload="loadEffect()" >
<nav> <nav>
<div class="shop"> <div class="shop">
......
0% Loading or .
You are about to add 0 people to the discussion. Proceed with caution.
Please register or to comment