Mise en place du sac pour les achats

frontend/js/product.js

     let talentnb = 0;
+    /** Création de la box du pokemon */
+    let data = localStorage.getItem("oui").split(',');
+    //Nom du pokemon
+    let pokemon = data[0];
+    //Numéro du pokedex
+    let number = data[3];
      
      function typeBox(src1,src2){
 
@@ -45,6 +51,41 @@
                 choice.appendChild(ability);
                 choice.style.display = "block";
             }
+            if(choice.childNodes.length == 4){
+
+                let add = document.createElement("button");
+                add.innerHTML = "Add to Cart";
+
+                let after = document.createElement("p");
+                after.className = "after";
+
+                add.onclick = function(){
+
+                    let talent = document.getElementsByClassName("talent")[0].children[0].children[0].innerHTML;
+                    let attack1 = choice.children[0].children[2].innerHTML;
+                    let attack2 = choice.children[1].children[2].innerHTML;
+                    let attack3 = choice.children[2].children[2].innerHTML;
+                    let attack4 = choice.children[3].children[2].innerHTML;
+        
+                    newData = [pokemon,number,data[1],data[1],attack1,attack2,attack3,attack4,talent];
+        
+                    localStorage.setItem(pokemon,newData);
+                    document.getElementById("sac");
+        
+                    for(let i = 0; i<localStorage.length; i++){
+                        console.log(localStorage.getItem(localStorage.key(i)));
+                    }
+        
+                    after.innerHTML = localStorage.length-1;
+                    sac.after(after);
+                    window.location.href = "shop.html";
+        
+                }
+
+                document.getElementsByClassName("box")[0].appendChild(add);
+                
+
+            }
             
         }
     }
@@ -159,7 +200,7 @@
                 leftArrow.onclick = function() {
                     if(talentnb > 0){
                         talentnb -= 1;
-                        name.innerHTML = data.abilities[talentnb].ability.name;   
+                        name.innerHTML = "Talent: " + data.abilities[talentnb].ability.name;   
             
                         get(data.abilities[talentnb].ability.url).then(ability => {
                             text.innerHTML = ability.effect_entries[1].effect;
@@ -174,7 +215,7 @@
                 rightArrow.onclick = function() {
                     if(talentnb < data.abilities.length-1){
                         talentnb += 1;
-                        name.innerHTML = data.abilities[talentnb].ability.name;   
+                        name.innerHTML = "Talent: " + data.abilities[talentnb].ability.name;   
             
                         get(data.abilities[talentnb].ability.url).then(ability => {
                             text.innerHTML = ability.effect_entries[1].effect;
@@ -187,7 +228,7 @@
                 }
             }
 
-            name.innerHTML = data.abilities[0].ability.name;   
+            name.innerHTML = "Talent: " + data.abilities[0].ability.name;   
             
             get(data.abilities[0].ability.url).then(ability => {
                 text.innerHTML = ability.effect_entries[1].effect;
@@ -204,6 +245,9 @@
 
     }
 
+
+
+
     function addToDescription(description,infos,text){
         description.appendChild(infos);
         description.appendChild(text);
@@ -265,13 +309,12 @@
 
 
 
+
+    
+
     function gotSelect(){
 
-        /** Création de la box du pokemon */
-        let data = localStorage.getItem("oui").split(',');
-        let pokemon = data[0];
         
-        let number = data[3];
 
         console.log(data);
         let main = document.getElementById("selected");
@@ -331,15 +374,16 @@
         box.appendChild(name);
         box.appendChild(button);
         box.appendChild(choice);
+        
         main.appendChild(box);
 
 
         /** Création des box des capacités */
         displayOfAbilities(main,selection,choice);
 
-    }
 
         
         
+    }
 
     gotSelect();
\ No newline at end of file

frontend/select.css

@@ -17,13 +17,14 @@ main {
     display: flex;
     flex-direction: column;
     width: 25vw;
-    height: 30vw;
+    height: 32vw;
     border-radius: 20px 20px;
     
     box-shadow:inset 2px 2px 10px 0px rgba(255,255,255,.5), 2px 2px 10px 0px rgba(0,0,0,.1), 2px 2px 10px 0px rgba(0,0,0,.1);
     margin-left: 2.5vw;
     margin-right: 2.5vw;    
     margin-top: 2.5vh; 
+    margin-bottom: 2.5vh;
     
 }
 
@@ -56,20 +57,21 @@ main {
 }
 
 button {
-    width: 50%;
+
+    margin-top: 5%;
     position: relative;
     left: 50%;
     transform: translateX(-50%);
     border: none;
-    background-image: url(img/poke.svg);
-    background-color: rgba(0, 0, 0, 0);
-    font-size: small;
-    width: 15.2%;
-    height: 15.2%;
+    font-size: 0.75vw;
+    width: 20%;
+    height: 10%;
     transition: 0.1s linear;
     outline: none;
     cursor: pointer;
-
+    background-color: deepskyblue;
+    color: white;
+    border-radius: 20px 20px 20px 20px;
     
 }
 
@@ -127,7 +129,7 @@ button {
 }
 
 .talent {
-    height: 30%;
+    height: 40%;
     margin-top: 1vh;
     box-shadow:inset 2px 2px 10px 0px rgba(255,255,255,.5), 2px 2px 10px 0px rgba(0,0,0,.1), 2px 2px 10px 0px rgba(0,0,0,.1);
     border-radius: 20px 20px;
@@ -277,3 +279,17 @@ button {
     transform: rotate(135deg);
     -webkit-transform: rotate(135deg) translateY(-100%);
   }
+
+  .after{
+
+    
+    font-size: small;
+    text-align: center;
+    background-color: rgba(255,27,0,1);
+    width: 2%;
+    position: relative;
+    left:85%;
+    transform: translateX(-50%);
+    color:white;
+    border-radius: 20px 20px;
+}
\ No newline at end of file