diff --git a/frontend/cart.css b/frontend/cart.css
new file mode 100644
index 0000000000000000000000000000000000000000..7a54880097f8d5a5477ea2caa85fd5f4ea622694
--- /dev/null
+++ b/frontend/cart.css
@@ -0,0 +1,69 @@
+#back {
+ position: absolute;
+ top: 0;
+ left: 10%;
+ width: 13vw;
+ height: 4vh;
+ margin-top: 6.5vh;
+ text-align: center;
+ font-size: 1.5vw;
+ font-family: gb;
+ transform: translateX(-50%);
+ background-color: rgb(255, 255, 255);
+ mix-blend-mode: screen;
+ overflow: hidden;
+ border-radius: 5px 5px;
+ backdrop-filter: blur(8px);
+ color: rgba(255,27,0,1);
+ cursor: pointer;
+ text-decoration: none;
+}
+
+#back:hover{
+
+
+ color: rgb(0, 102, 255);
+
+}
+
+main{
+ display: flex;
+ width: 100vw;
+
+
+}
+
+#container {
+
+ position: relative;
+ left: 50%;
+ transform: translate(-50%);
+ width: 90%;
+ height: 100%;
+
+ margin-top: 5vh;
+ padding-left: 2.5vh;
+ padding-right: 2.5vh;
+
+
+}
+
+.pokemon {
+ display: flex;
+ flex-direction: row;
+ 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;
+ margin-top: 2.5vh;
+ margin-bottom: 2.5vh;
+}
+
+.typeAndName{
+
+
+ display: flex;
+ flex-direction: column;
+ text-align: center;
+ font-size: 1.25vw;
+ justify-content: center;
+
+}
\ No newline at end of file
diff --git a/frontend/cart.html b/frontend/cart.html
new file mode 100644
index 0000000000000000000000000000000000000000..65a70520fb55e55a23358ddfd98f7e06b92e5abd
--- /dev/null
+++ b/frontend/cart.html
@@ -0,0 +1,45 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+ <meta charset="UTF-8">
+ <meta http-equiv="X-UA-Compatible" content="IE=edge">
+ <meta name="viewport" content="width=device-width, initial-scale=1.0">
+ <link rel="preconnect" href="https://fonts.gstatic.com">
+ <link href="https://fonts.googleapis.com/css2?family=Titillium+Web:wght@200&display=swap" rel="stylesheet">
+ <title>Document</title>
+
+ <link rel="stylesheet" href="menu.css">
+ <link rel="stylesheet" href="cart.css">
+ <link rel="stylesheet" href="button.css">
+
+</head>
+<body>
+
+ <nav>
+
+
+ <a href="shop.html" id="back">BACK TO SHOP</a>
+ <p id="fill">BAG</p>
+
+ </nav>
+
+ <main>
+
+ <div id="container">
+ <div class = "pokemon">
+ <img src="https://img.pokemondb.net/sprites/x-y/normal/kingler.png" alt="Kingler">
+ <div class="typeAndName">
+ <p>Kraboss</p>
+ <div class="typebox"><img src="img/types/water.png" alt=""><img src="" alt=""><img src="img/types/water.png" alt=""><img src="" alt=""></div>
+ </div>
+ </div>
+ </div>
+
+
+
+ </main>
+
+ <script src="js/bag.js"></script>
+
+</body>
+</html>
\ No newline at end of file
diff --git a/frontend/index.html b/frontend/index.html
index 87407287419acd90a9ef16597c8b38389b24fa34..a0ee5a25005ab0e3adc1d24c2d501f618cb4fdc8 100644
--- a/frontend/index.html
+++ b/frontend/index.html
@@ -19,7 +19,7 @@
<p id="fill">POKESHOP</p>
<div class="shop">
- <div id="sac"></div>
+ <a id="sac"></a>
</div>
diff --git a/frontend/js/bag.js b/frontend/js/bag.js
new file mode 100644
index 0000000000000000000000000000000000000000..1b5e63ede20bf869c9b3dce970f9ff8a1bffcc61
--- /dev/null
+++ b/frontend/js/bag.js
@@ -0,0 +1,82 @@
+function typeBox(src1,src2){
+
+ var typeBox = document.createElement("div");
+ typeBox.className = "typebox"
+
+
+ var type1 = document.createElement("img");
+ var type2 = document.createElement("img");
+ type1.className = "type";
+ type2.className = "type";
+
+ type1.src = src1;
+
+ if(src2 == ""){
+ type2.style.display = "none";
+ }
+ else{
+ type2.src = src2;
+ }
+
+
+ typeBox.appendChild(type1);
+ typeBox.appendChild(type2);
+
+ return typeBox;
+
+}
+
+
+function createArticle(name,number,type1,type2,attacks,talent,shiny){
+
+ let container = document.getElementById("container");
+
+ let pokemon = document.createElement("div");
+ pokemon.className = "pokemon";
+
+ let img = document.createElement("img");
+ img.src = "https://raw.githubusercontent.com/PokeAPI/sprites/master/sprites/pokemon/" + number + ".png";
+
+ let typeAndName = document.createElement("div");
+ typeAndName.className = "typeAndName";
+
+ let pokname = document.createElement("p");
+ pokname.innerHTML = name;
+
+ let typebox = typeBox(type1,type2);
+
+ typeAndName.appendChild(pokname);
+ typeAndName.appendChild(typebox);
+
+ pokemon.appendChild(img);
+ pokemon.appendChild(typeAndName);
+
+ container.appendChild(pokemon);
+
+}
+
+
+function getItem(index){
+ return localStorage.getItem(localStorage.key(index));
+}
+
+
+
+
+for(let i = 0; i<localStorage.length; i++){
+
+
+ if(localStorage.key(i)=="oui"){
+ continue
+ }
+ else{
+
+ let data = getItem(i).split(',');
+ let attacks = [data[4],data[5],data[6],data[7]];
+ createArticle(data[0],data[1],data[2],data[3],attacks,data[8],0)
+
+ }
+
+
+
+}
\ No newline at end of file
diff --git a/frontend/js/index.js b/frontend/js/index.js
index a24d0d8c758a8d134bbf14d17d0d30871b394ba2..c9349433dd222e415262fefed411a153182cffeb 100644
--- a/frontend/js/index.js
+++ b/frontend/js/index.js
@@ -190,11 +190,6 @@
}
- pokedex(0,20);
-
-
-
-
function scrollEffect(){
@@ -216,6 +211,24 @@
+
+ pokedex(0,20);
+ if(localStorage.length > 0){
+ let after = document.createElement("p");
+ after.className = "after";
+ after.innerHTML = localStorage.length -1;
+
+ let bag = document.getElementById("sac");
+ bag.after(after);
+ }
+
+
+ for(let i =0; i<localStorage.length; i++){
+
+
+ console.log(localStorage.getItem(localStorage.key(i)));
+
+ }
diff --git a/frontend/js/product.js b/frontend/js/product.js
index c03977c1ea28218681f9491a3efc18df4a3d32c9..6c1efe52a3ab04ddd84af1046ad44c859e283391 100644
--- a/frontend/js/product.js
+++ b/frontend/js/product.js
@@ -54,6 +54,7 @@
if(choice.childNodes.length == 4){
let add = document.createElement("button");
+ add.className = "addcart"
add.innerHTML = "Add to Cart";
let after = document.createElement("p");
@@ -67,24 +68,13 @@
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];
+ newData = [pokemon,number,data[1],data[2],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);
-
-
}
}
@@ -100,6 +90,12 @@
choice.style.display = "none";
}
+
+ let button = document.getElementsByClassName("addcart")[0];
+ if(button != undefined){
+ button.remove();
+ }
+
}
}
@@ -113,6 +109,7 @@
ability.className = "ability";
let txt = document.createElement("p");
+ txt.className = "tooltip";
txt.innerHTML = data.moves[i].move.name;
let type = document.createElement("img");
@@ -386,4 +383,20 @@
}
- gotSelect();
\ No newline at end of file
+ gotSelect();
+ if(localStorage.length > 0){
+ let after = document.createElement("p");
+ after.className = "after";
+ after.innerHTML = localStorage.length -1;
+
+ let bag = document.getElementById("sac");
+ bag.after(after);
+ }
+
+
+ for(let i =0; i<localStorage.length; i++){
+
+
+ console.log(localStorage.getItem(localStorage.key(i)));
+
+ }
\ No newline at end of file
diff --git a/frontend/menu.css b/frontend/menu.css
index 7029fd0aa79ecfbf3320197299cdbf5705ddaf7d..6952a2cf5873b069e4398cad743c97ec94686ad8 100644
--- a/frontend/menu.css
+++ b/frontend/menu.css
@@ -75,9 +75,7 @@ nav {
color: rgba(255,27,0,1);
}
-#fill:hover{
-
-}
+
#logo{
@@ -121,4 +119,18 @@ nav {
font-size: large;
+}
+
+.after{
+
+
+ font-size: small;
+ text-align: center;
+ background-color: rgb(0, 102, 255);
+ width: 2%;
+ position: relative;
+ left:85%;
+ transform: translateX(-50%);
+ color:white;
+ border-radius: 20px 20px;
}
\ No newline at end of file
diff --git a/frontend/select.css b/frontend/select.css
index 43620ea838764fb62e679a77e1bc6c0cb763f3d7..c3025878bf8326f832d9983dad992b5a64858e99 100644
--- a/frontend/select.css
+++ b/frontend/select.css
@@ -280,16 +280,6 @@ button {
-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
+
+
\ No newline at end of file
diff --git a/frontend/shop.html b/frontend/shop.html
index 69bdbffbc8f11f478f8eebebcdfefdb0c91a8cb6..fb0ad9a71331a0fd20b478dd361d1d7c546fa060 100644
--- a/frontend/shop.html
+++ b/frontend/shop.html
@@ -21,7 +21,7 @@
<div class="shop">
<div id="sac">
- <img src="img/sac.svg" id="logo">
+ <a href="cart.html"><img src="img/sac.svg" id="logo"></a>
</div>
</div>