Skip to content
Snippets Groups Projects
Commit bc697d8b authored by benjamin.sitbon's avatar benjamin.sitbon
Browse files

cart fonctionnel

parent 462024a7
No related branches found
No related tags found
No related merge requests found
Show whitespace changes
Inline Side-by-side
frontend/cart.css 0 → 100644
+ 69
− 0
View file @ bc697d8b
#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
frontend/cart.html 0 → 100644
+ 45
− 0
View file @ bc697d8b
<!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
frontend/index.html
+ 1
− 1
View file @ bc697d8b
...@@ -19,7 +19,7 @@ ...@@ -19,7 +19,7 @@
<p id="fill">POKESHOP</p> <p id="fill">POKESHOP</p>
<div class="shop"> <div class="shop">
<div id="sac"></div> <a id="sac"></a>
</div> </div>
......
frontend/js/bag.js 0 → 100644
+ 82
− 0
View file @ bc697d8b
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
frontend/js/index.js
+ 18
− 5
View file @ bc697d8b
...@@ -190,11 +190,6 @@ ...@@ -190,11 +190,6 @@
} }
pokedex(0,20);
function scrollEffect(){ function scrollEffect(){
...@@ -217,6 +212,24 @@ ...@@ -217,6 +212,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)));
}
\ No newline at end of file
frontend/js/product.js
+ 26
− 13
View file @ bc697d8b
...@@ -54,6 +54,7 @@ ...@@ -54,6 +54,7 @@
if(choice.childNodes.length == 4){ if(choice.childNodes.length == 4){
let add = document.createElement("button"); let add = document.createElement("button");
add.className = "addcart"
add.innerHTML = "Add to Cart"; add.innerHTML = "Add to Cart";
let after = document.createElement("p"); let after = document.createElement("p");
...@@ -67,24 +68,13 @@ ...@@ -67,24 +68,13 @@
let attack3 = choice.children[2].children[2].innerHTML; let attack3 = choice.children[2].children[2].innerHTML;
let attack4 = choice.children[3].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); 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"; window.location.href = "shop.html";
} }
document.getElementsByClassName("box")[0].appendChild(add); document.getElementsByClassName("box")[0].appendChild(add);
} }
} }
...@@ -100,6 +90,12 @@ ...@@ -100,6 +90,12 @@
choice.style.display = "none"; choice.style.display = "none";
} }
let button = document.getElementsByClassName("addcart")[0];
if(button != undefined){
button.remove();
}
} }
} }
...@@ -113,6 +109,7 @@ ...@@ -113,6 +109,7 @@
ability.className = "ability"; ability.className = "ability";
let txt = document.createElement("p"); let txt = document.createElement("p");
txt.className = "tooltip";
txt.innerHTML = data.moves[i].move.name; txt.innerHTML = data.moves[i].move.name;
let type = document.createElement("img"); let type = document.createElement("img");
...@@ -387,3 +384,19 @@ ...@@ -387,3 +384,19 @@
} }
gotSelect(); 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
frontend/menu.css
+ 15
− 3
View file @ bc697d8b
...@@ -75,9 +75,7 @@ nav { ...@@ -75,9 +75,7 @@ nav {
color: rgba(255,27,0,1); color: rgba(255,27,0,1);
} }
#fill:hover{
}
#logo{ #logo{
...@@ -122,3 +120,17 @@ nav { ...@@ -122,3 +120,17 @@ nav {
} }
.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
frontend/select.css
+ 2
− 12
View file @ bc697d8b
...@@ -280,16 +280,6 @@ button { ...@@ -280,16 +280,6 @@ button {
-webkit-transform: rotate(135deg) translateY(-100%); -webkit-transform: rotate(135deg) translateY(-100%);
} }
.after{
font-size: small;
text-align: center; \ No newline at end of file
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
frontend/shop.html
+ 1
− 1
View file @ bc697d8b
...@@ -21,7 +21,7 @@ ...@@ -21,7 +21,7 @@
<div class="shop"> <div class="shop">
<div id="sac"> <div id="sac">
<img src="img/sac.svg" id="logo"> <a href="cart.html"><img src="img/sac.svg" id="logo"></a>
</div> </div>
</div> </div>
......
0% or .
You are about to add 0 people to the discussion. Proceed with caution.
Please register or to comment