مساعدة في كود html,css

Rol Ian · 28 يناير

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

تم التعديل في 28 يناير بواسطة Rol Ian

Hossam Mohamed15 · 28 يناير

اعتقد انك نسيت ان تغلق ال css rule في سطر 132
image.png.aa770f63537dced02233e1a557867d3d.png

المنتجات تعرض بجانب الروابط في ال nav
image.png.cf78413fb56a07455a0ddd13f9038e53.png
وذلك بسبب انك استخدمت نفس اسم الكلاس list على ال ul وعلى الdiv الذي يجب ان تظهر به العناصر .. قم بإزالة الكلاس list من ال ul التي في الnav ولاحظ الفرق.
تمنياتي بالتوفيق

Hossam Mohamed15 · 28 يناير

لاحظت أيضاً استخدامك للكلاس list في ال ul التي في ال footer .. قم بتغيرها هناك أيضاً
للتوضيح : querySelector تعيد اول عنصر يطابق الselector الذي اخترته وكان في حالتك ال ul التي في الnav

مساعدة في كود html,css

السؤال

Rol Ian

2 أجوبة على هذا السؤال

Recommended Posts

Hossam Mohamed15

Hossam Mohamed15

انضم إلى النقاش

إعلانات

تابعنا على

الرئيسية

تابعنا

دروس ومقالات

أسئلة وأجوبة

كتب

دورات

بطاقات هدية