Skip to content

Commit

Permalink
fixed bugs
Browse files Browse the repository at this point in the history
  • Loading branch information
@chensov
chensov committed Sep 22, 2023
1 parent 771454c commit 49e38e4
Show file tree
Hide file tree
Showing 8 changed files with 144 additions and 145 deletions.
30 changes: 15 additions & 15 deletions app.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -16,39 +16,39 @@ closeShopping.addEventListener("click", () => {
let products = [
{
id: 1,
name: "PRODUCT NAME 1",
name: "Hunter Bridle w/ Reins",
image: "1.PNG",
price: "£20",
price: 99.99,
},
{
id: 2,
name: "PRODUCT NAME 2",
name: "Close Contact Jump Saddle",
image: "2.PNG",
price: 120000,
price: 334.99,
},
{
id: 3,
name: "PRODUCT NAME 3",
name: "Stable Rug 400g",
image: "3.PNG",
price: 220000,
price: 169.99,
},
{
id: 4,
name: "PRODUCT NAME 4",
name: "Rambo Travel Boots",
image: "4.PNG",
price: 123000,
price: 86.99,
},
{
id: 5,
name: "PRODUCT NAME 5",
name: "Bee Combo Fly Rug",
image: "5.PNG",
price: 320000,
price: 59.99,
},
{
id: 6,
name: "PRODUCT NAME 6",
name: "Treeless ANTI SLIP saddle pad",
image: "6.PNG",
price: 120000,
price: 49.99,
},
];
let listCards = [];
Expand All @@ -59,7 +59,7 @@ function initApp() {
newDiv.innerHTML = `
<img src="image/${value.image}">
<div class="title">${value.name}</div>
<div class="price">${value.price.toLocaleString()}</div>
<div class="price">£${value.price.toLocaleString()}</div>
<button onclick="addToCard(${key})">Add To Card</button>`;
list.appendChild(newDiv);
});
Expand All @@ -85,7 +85,7 @@ function reloadCard() {
newDiv.innerHTML = `
<div><img src="image/${value.image}"/></div>
<div>${value.name}</div>
<div>${value.price.toLocaleString()}</div>
<div>£${value.price.toLocaleString()}</div>
<div>
<button onclick="changeQuantity(${key}, ${
value.quantity - 1
Expand All @@ -98,7 +98,7 @@ function reloadCard() {
listCard.appendChild(newDiv);
}
});
total.innerText = totalPrice.toLocaleString();
total.innerText = `£ ${totalPrice.toLocaleString()}`;
quantity.innerText = count;
}
function changeQuantity(key, quantity) {
Expand Down
Binary file modified image/1.PNG
View file
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file modified image/2.PNG
View file
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file modified image/3.PNG
View file
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file modified image/4.PNG
View file
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file modified image/5.PNG
View file
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file modified image/6.PNG
View file
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
259 changes: 129 additions & 130 deletions style.css
View file
Original file line number Diff line number Diff line change
@@ -1,131 +1,130 @@
body{
background-color: #E3E7E8;
font-family: system-ui;
}
.container{
width: 1000px;
margin: auto;
transition: 0.5s;
}
header{
display: grid;
grid-template-columns: 1fr 50px;
margin-top: 50px;
}
header .shopping{
position: relative;
text-align: right;
}
header .shopping img{
width: 40px;
}
header .shopping span{
background: red;
border-radius: 50%;
display: flex;
justify-content: center;
align-items: center;
color: #fff;
position: absolute;
top: -5px;
left: 80%;
padding: 3px 10px;
}
.list{
display: grid;
grid-template-columns: repeat(3, 1fr);
column-gap: 20px;
row-gap: 20px;
margin-top: 50px;
}
.list .item{
text-align: center;
background-color: #DCE0E1;
padding: 20px;
box-shadow: 0 50px 50px #757676;
letter-spacing: 1px;
}
.list .item img{
width: 90%;
height: 430px;
object-fit: cover;
}
.list .item .title{
font-weight: 600;
}
.list .item .price{
margin: 10px;
}
.list .item button{
background-color: #1C1F25;
color: #fff;
width: 100%;
padding: 10px;
}
.card{
position: fixed;
top:0;
left: 100%;
width: 500px;
background-color: #453E3B;
height: 100vh;
transition: 0.5s;
}
.active .card{
left: calc(100% - 500px);
}
.active .container{
transform: translateX(-200px);
}
.card h1{
color: #E8BC0E;
font-weight: 100;
margin: 0;
padding: 0 20px;
height: 80px;
display: flex;
align-items: center;
}
.card .checkOut{
position: absolute;
bottom: 0;
width: 100%;
display: grid;
grid-template-columns: repeat(2, 1fr);

}
.card .checkOut div{
background-color: #E8BC0E;
width: 100%;
height: 70px;
display: flex;
justify-content: center;
align-items: center;
font-weight: bold;
cursor: pointer;
}
.card .checkOut div:nth-child(2){
background-color: #1C1F25;
color: #fff;
}
.listCard li{
display: grid;
grid-template-columns: 100px repeat(3, 1fr);
color: #fff;
row-gap: 10px;
}
.listCard li div{
display: flex;
justify-content: center;
align-items: center;
}
.listCard li img{
width: 90%;
}
.listCard li button{
background-color: #fff5;
border: none;
}
.listCard .count{
margin: 0 10px;
body {
background-color: #e3e7e8;
font-family: system-ui;
}
.container {
width: 1000px;
margin: auto;
transition: 0.5s;
}
header {
display: grid;
grid-template-columns: 1fr 50px;
margin-top: 50px;
}
header .shopping {
position: relative;
text-align: right;
}
header .shopping img {
width: 40px;
}
header .shopping span {
background: red;
border-radius: 50%;
display: flex;
justify-content: center;
align-items: center;
color: #fff;
position: absolute;
top: -5px;
left: 80%;
padding: 3px 10px;
}
.list {
display: grid;
grid-template-columns: repeat(3, 1fr);
column-gap: 20px;
row-gap: 20px;
margin-top: 50px;
}
.list .item {
text-align: center;
background-color: #dce0e1;
padding: 20px;
box-shadow: 0 50px 50px #757676;
letter-spacing: 1px;
}
.list .item img {
width: 90%;
height: 430px;
object-fit: cover;
}
.list .item .title {
font-weight: 600;
}
.list .item .price {
margin: 10px;
}
.list .item button {
background-color: #1c1f25;
color: #fff;
width: 100%;
padding: 10px;
}
.card {
position: fixed;
top: 0;
left: 100%;
width: 500px;
background-color: #453e3b;
height: 100vh;
transition: 0.5s;
}
.active .card {
left: calc(100% - 500px);
}
.active .container {
transform: translateX(-200px);
}
.card h1 {
color: #e8bc0e;
font-weight: 100;
margin: 0;
padding: 0 20px;
height: 80px;
display: flex;
align-items: center;
}
.card .checkOut {
position: absolute;
bottom: 0;
width: 100%;
display: grid;
grid-template-columns: repeat(2, 1fr);
}
.card .checkOut div {
background-color: #e8bc0e;
width: 100%;
height: 70px;
display: flex;
justify-content: center;
align-items: center;
font-weight: bold;
cursor: pointer;
}
.card .checkOut div:nth-child(2) {
background-color: #1c1f25;
color: #fff;
}
.listCard li {
display: grid;
grid-template-columns: 100px repeat(3, 1fr);
color: #fff;
row-gap: 10px;
}
.listCard li div {
display: flex;
justify-content: center;
align-items: center;
}
.listCard li img {
width: 90%;
}
.listCard li button {
background-color: #fff5;
border: none;
}
.listCard .count {
margin: 0 10px;
}

0 comments on commit 49e38e4

Please sign in to comment.