product.html
<!DOCTYPE html>
<html lang="en" >
<head>
<meta charset="UTF-8">
<title> Products </title>
<link rel="icon" href="image/icon-removebg-preview.png">
<link rel="stylesheet" href="style.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.5.1/css/all.min.css" integrity="sha512-DTOQO9RWCH3ppGqcWaEA1BIZOC6xxalwEsw9c2QQeAIftl+Vegovlnee1c9QX4TctnWMn13TZye+giMm8e2LwA==" crossorigin="anonymous" referrerpolicy="no-referrer" />
</head>
<body>
<header class="header">
<nav>
<ul class="list">
<li><a href="index.html"><img class="nav-img" src="image/im10.png"/></a></li>
<li><a href="index.html">Home</a></li>
<li><a href="about.html">About Us</a></li>
<li><a href="product.html">Products</a></li>
<li><a href="contact.html">Contact us</a></li>
<li><a href="log.html" class="fas fa-user"></a></li>
<li><a href="#" class="fas fa-shopping-cart"><div class="shopping"><span class="quantity">0</span></div></a></li>
</ul>
</nav>
</header>
<div class="heading">
<h1 class="h" > List Products </h1>
</div>
<div class="container">
<div class="list">
</div>
</div>
<div class="card">
<h1>Cart</h1>
<ul class="listCard">
</ul>
<div class="checkOut">
<div class="total">0</div>
<div class="closeShopping">Close</div>
</div>
</div>
<footer class="footer">
<div class="social">
<a href="#"><i class="fab fa-instagram"></i></a>
<a href="#"><i class="fab fa-snapchat"></i></a>
<a href="#"><i class="fab fa-twitter"></i></a>
<a href="#"><i class="fab fa-facebook"></i></a>
</div>
<ul class="list">
<li><a href="index.html">Home</a></li>
<li><a href="about.html">About Us</a></li>
<li><a href="product.html">Products</a></li>
<li><a href="contact.html">Contact us</a></li>
</ul>
</footer>
<script src="app.js"></script>
</body>
</html>
style.css
*{
margin: 0;
padding: 0;
box-sizing: border-box;
font-family: 'Poppins', sans-serif;
}
body {
display: flex;
flex-direction: column;
min-height: 100vh;
margin: 0;
align-items: center;
justify-content: center;
background: #e0d9d5;
}
.header{
height: 120vh;
width: 100%;
padding: 0 10%;
}
nav{
width: 100%;
display: flex;
align-items: center;
justify-content: space-between;
padding: 20px 0;
position: relative;
z-index: 100;
}
.nav-img{
width: 150px;
}
nav ul li{
display: inline-block;
list-style: none;
margin: 10px 30px;
}
nav ul li a{
text-decoration: none;
color: #ffffff;
font-size: 20px;
}
.text-box{
margin-top: 100px;
max-width: 600px;
}
.text-box h1{
font-size: 50px;
margin-bottom: 25px;
color: #2e2f29;
}
.text-box a{
display: inline-block;
text-decoration: none;
color: white;
background: #797D67;
padding: 15px 30px;
font-size: 18px;
margin-top:50px ;
border-radius: 60px;
}
.bor-box{
display: inline-block;
color: #797D67;
background: #f6f5f4;
padding: 20px 80px;
font-size: 20px;
border-radius: 70px;
margin-top:20px ;
text-align: center;
}
.bor-box img{
width: 90px;
}
.user-box{
background: #2e2f29;
position: absolute;
top:0;
right: 1%;
z-index: 1;
}
.user-box img{
display: block;
padding-top: 180px;
width: 360px;
margin-bottom: -190px;
}
.heading {
padding: 30px 0;
margin-bottom: 50px;
}
.h {
margin: auto;
color: white;
text-align: center;
font-size: 50px;
}
.container{
padding: 15px;
width: 90%;
margin: auto;
transition: 0.5s;
}
.shopping{
position: relative;
text-align: right;
font-weight: bold;
font-size: 15px;
}
.shopping span{
background: #919468;
border-radius: 50%;
display: flex;
justify-content: center;
align-items: center;
color: #fff;
position: absolute;
top: -30px;
left: 70%;
padding: 1px 5px;
}
.list{
display: grid;
grid-template-columns: repeat(4, 1fr);
column-gap: 20px;
row-gap: 20px;
margin-top: 50px;
.list .item{
background-color: white;
border-radius: 10px;
overflow: hidden;
display: flex;
flex-direction: column;
align-items: center;
text-align: center;
box-shadow: 5px 5px 10px 1px rgb(0, 0, 0, 12%);
gap: 18px;
}
.list .item img{
width: 100%;
cursor: pointer;
object-fit: cover;
}
.list .item .title{
font-size: 20px;
color: #505050;
}
.list .item .price{
font-weight: 800;
font-size: 20px;
color: #505050;
}
.list .item button{
margin-bottom: 25px;
color: white;
background-color: #919468;
display: inline-block;
padding: 10px 15px;
text-decoration: none;
font-weight: 600;
font-size: 15px;
border-radius: 50px;
}
.card{
position: fixed;
top:0;
left: 100%;
width: 500px;
background-color: rgba(237, 237, 237, 0.9);
height: 100vh;
transition: 0.5s;
}
.active .card{
left: calc(100% - 500px);
}
.card h1{
font-size: 40px;
color: #919468;
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: #919468;
color: white;
width: 100%;
height: 60px;
display: flex;
justify-content: center;
align-items: center;
font-size: 25px;
cursor: pointer;
}
.card .checkOut div:nth-child(2){
background-color: #505050;
}
.listCard li{
display: grid;
grid-template-columns: 80px repeat(5, 1fr);
color: #505050;
row-gap: 10px;
}
.listCard li div{
font-size: 20px;
display: flex;
justify-content: center;
align-items:center ;
}
.listCard li img{
width: 82%;
}
.listCard li button{
background-color: #ffffff;
border: none;
font-size: 20px;
}
.listCard .count{
margin: 0 10px;
}
.footer{
padding: 20px 0;
background-color: white;
text-align: center;
width: 100%;
}
.footer .social{
text-align: center;
padding-bottom: 10px;
color: #6e7548;
}
.social a{
font-size: 24px;
color: inherit;
width: 50px;
height: 50px;
line-height: 38px;
display: inline-block;
text-align: center;
border-radius: 50%;
margin: 0 8px;
opacity: 0.75;
}
.footer .social a:hover{
opacity: 1;
}
.footer ul{
margin-bottom: 25px;
padding: 0;
font-size: 20px;
line-height: 1.6;
text-align: center;
}
.footer ul li{
display: inline-block;
padding: 0 15px;
color: #3e4228;
}
.footer ul li a{
color: inherit;
text-decoration: none;
opacity: 0.8;
}
.footer ul li a:hover{
opacity: 1;
}
.footer .copyright{
text-align: center;
font-size: 20px;
color: #aaa;
}
app.js
let openShopping = document.querySelector('.shopping');
let closeShopping = document.querySelector('.closeShopping');
let list = document.querySelector('.list');
let listCard = document.querySelector('.listCard');
let body = document.querySelector('body');
let total = document.querySelector('.total');
let quantity = document.querySelector('.quantity');
openShopping.addEventListener('click', ()=>{
body.classList.add('active');
})
closeShopping.addEventListener('click', ()=>{
body.classList.remove('active');
})
let products = [
{
id: 1,
name: '1',
image:'im6.jpg',
price: 100,
},
{
id: 2,
name: '2',
image:'im13.jpg',
price: 150,
},
{
id:3,
name: '3',
image:'im15.jpg',
price: 200,
},
{
id:4,
name: '4',
image:'im6.jpg',
price: 100,
}
];
let listCards = [];
function initApp(){
products.forEach((value, key) =>{
let newDiv = document.createElement('div');
newDiv.classList.add('item');
newDiv.innerHTML = `
<img src="image/${value.image}">
<div class="title">${value.name}</div>
<div class="price">${value.price.toLocaleString()}</div>
<button onclick="addToCard(${key})">أضف إلى السلة</button>`;
list.appendChild(newDiv);
})
}
initApp();
function addToCard(key){
if(listCards[key] == null){
// copy product form list to list card
listCards[key] = JSON.parse(JSON.stringify(products[key]));
listCards[key].quantity = 1;
}
reloadCard();
}
function reloadCard(){
listCard.innerHTML = '';
let count = 0;
let totalPrice = 0;
listCards.forEach((value, key)=>{
totalPrice = totalPrice + value.price;
count = count + value.quantity;
if(value != null){
let newDiv = document.createElement('li');
newDiv.innerHTML = `
<div><img src="image/${value.image}"/></div>
<div>${value.name}</div>
<div>${value.price.toLocaleString()}</div>
<div>
<button onclick="changeQuantity(${key}, ${value.quantity - 1})">-</button>
<div class="count">${value.quantity}</div>
<button onclick="changeQuantity(${key}, ${value.quantity + 1})">+</button>
</div>`;
listCard.appendChild(newDiv);
}
})
total.innerText = totalPrice.toLocaleString();
quantity.innerText = count;
}
function changeQuantity(key, quantity){
if(quantity == 0){
delete listCards[key];
}else{
listCards[key].quantity = quantity;
listCards[key].price = quantity * products[key].price;
}
reloadCard();
}
في هذا الكود أريد إظهار المنتجات في صفحة product باستخدام javascript وذلك يعمل ولكن المشكلة في إظهارها بشكل متناسق مع header , footer والمشكلة هي في class list هل من طريقة من إظهارها بالشكل اللازم مع المحافظة على شكل header , footer
