Home > Software engineering >  Adding elements to cart (ul)
Adding elements to cart (ul)

Time：02-10

window.onload = function(){
    document.getElementById("search").value = ""
    setTimeout(() => {
        document.getElementById("contain1").style.opacity = 0
    }, 3000); 
    setTimeout(() => {
        document.getElementById("contain2").style.opacity = 1
    }, 3000); 
    setTimeout(() => {
        document.getElementById("contain2").style.opacity = 0
    }, 6000); 
    setTimeout(() => {
        document.getElementById("contain3").style.opacity = 1
    }, 6000); 
    setTimeout(() => {
        document.getElementById("contain3").style.opacity = 0
    }, 9000); 
    let startint = setInterval(() => {
           document.getElementById("contain1").style.opacity = 1 
       setTimeout(() => {
           document.getElementById("contain1").style.opacity = 0
       }, 3000); 
       setTimeout(() => {
           document.getElementById("contain2").style.opacity = 1
       }, 3000); 
       setTimeout(() => {
           document.getElementById("contain2").style.opacity = 0
       }, 6000); 
       setTimeout(() => {
           document.getElementById("contain3").style.opacity = 1
       }, 6000); 
       setTimeout(() => {
           document.getElementById("contain3").style.opacity = 0
       }, 9000); 
    }, 9000);
}
document.getElementById("searchbar").onclick = function(){
    document.getElementById('bar').classList.toggle("show")
    document.getElementById("search").focus()
}

for(let i = 0 ; i < document.querySelector(".cart").children.length;  i  ){
    document.querySelectorAll(".cart li div i")[i].onclick = function(){
        this.parentElement.parentElement.style.opacity = 0
        setTimeout(() => {
            this.parentElement.parentElement.style.display = "none"
        }, 300);
    }
}
document.getElementById("addCart").onclick = function(){
    let ele =  document.createElement("li")
    let image = document.createElement("img")
    let div = document.createElement("div")
    let header = document.createElement("h3")
    let para = document.createElement("p")
    let icon = document.createElement("i")
    image.src = document.getElementById("addCart").parentElement.previousElementSibling.children[0].src
    header.innerHTML = document.getElementById("addCart").parentElement.parentElement.nextElementSibling.children[0].innerHTML
    para.innerHTML = document.getElementById("addCart").parentElement.parentElement.nextElementSibling.children[1].innerHTML
    icon.className = "fas fa-times"
    div.appendChild(icon)
    div.appendChild(para)
    div.appendChild(header)
    ele.appendChild(image)
    ele.appendChild(div)
    document.getElementById("cartt").appendChild(ele)
}
*,*::after,*::before{
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}
:root{
    --orange : #E99C2E;
    --grey : #998D80;
    --darkGrey :#616060;
}
body{
    height: 5000px;
}
.div1{
    height: 120vh;
    background: #F8F9FD;
}   
.container{
    width: 77%;
    margin: auto;
    height: 100%;
}
.flexed{
    display: flex;
    flex-direction: column;
    gap: 12.5%;
}
.container nav{
    display: flex;
    justify-content: space-between;
    padding: 3.5% 0 0 0 ;
    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;
}
nav *{
    transition: 0.3s ease;
}
li{
    list-style: none;
}
.container nav ul{
    display: flex;
    align-items: center;
}
.container >nav ul li{
    width: 100%;
    text-align: center;
    display: flex;
    justify-content: center;
    align-items: center;
    position: relative;
}
li:hover a{
    color: #E99C2E;
}
.list1{
    width: 53%;
    font-weight: 600;
    padding-left: 5%;
}
.list1 li:nth-child(3){
    text-align: right;
}
.list1 li:nth-child(5){
    text-align: left;
}
.list2{
    width: 12%;
}
a{
    text-decoration: none;
    color: black;
    width: 100%;
    height: 100%;
}
.list2 li:last-child:hover .cart{
    transform: translateY(0);
    visibility: visible;
    opacity: 1;
}
.cart{
    position: absolute;
    top: 40px;
    right: 0;
    border: 1px solid rgb(194, 191, 191);
    flex-direction: column;
    height: 200px;
    overflow-y: scroll;
    width: 550%;
    padding: 0 2px;
    transform: translateY(-20px);
    transition: 0.9s ease;
    visibility: hidden;
    opacity: 0;
    z-index: 999;
    background: white;
}
.cart li{
    height: 100%;
    padding: 17px 15px;
    gap: 8%;
    border-bottom: 1px solid rgb(206, 202, 202);
}
.cart li:first-child::after{
    content: '';
    height: 2px;
    width: 100%;
    background: var(--orange);
    position: absolute;
    top: 0;
}
.cart li img{
    width: 25%;
}
.cart li div{
    width: 75%;
    display: flex;
    flex-direction: column;
    align-items: left;
    text-align: left;
    position: relative;
}
.cart li div h3{
    font-size: 0.8rem;
    font-weight: 600;
    width: 10%;
}
.cart li div p{
    font-size: 0.8rem;
}
.cart li div i{
    position: absolute;
    top:0;
    right: 0;
    cursor: pointer;
}
.cart li:last-child{
    border: none;
    justify-content: space-between;
    align-items: flex-start
}
.cart li:last-child h3{
    font-size: 0.95rem;
    text-align: left;
    font-weight: 600;
}
.cart li:last-child button{
    background-color:var(--orange) ;
    border: none;
    padding: 2% 5%;
    border-radius: 5px;
    color: white;
}
.search{
    position: absolute;
    top:30px;
    right: 0;
    width: 400%;
    display: none;
}
.search::after{
    content: '';
    width: 0;
    height: 0;
    border: 5px solid transparent;
    border-top: 0;
    border-bottom: 10px solid rgb(224, 220, 220);
    position: absolute;
    top: -10px;
    right: 10%;
}
.search input{
    width: 100%;
    padding: 5px;
    outline: none;
    border-radius: 5px;
    border: 1px solid rgb(224, 220, 220);
}
.show{
    display: block;
}
nav >h1 span{
    color: var(--orange);
}
.mainPage{
    position: relative;
    height: 100%;
    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;
}
.mainPage>div{
    display: flex;
    position: absolute;
    width: 100%;
    gap: 2%;
    transition: 0.9s ease;
}
.contain2,.contain3{
    opacity: 0;
}
.left{
    width: 60%;
    display: flex;
    flex-direction: column;
    padding: 8.5% 2% 2% 2%;
    gap: 8%;
}
.left h3{
    font-size: 1.5rem;
    font-weight: 500;
    color: var(--grey);
    text-transform: capitalize;
}
.left h1{
    font-size: 2.9rem;
    font-weight: 600;
    color: #616060;
    text-transform: capitalize;
}
.left p{
    color: var(--grey);
    line-height: 150%;
    font-size: 1.1rem;
}
.left p:nth-of-type(2){
    color: black;
}
.left p span{
    color: var(--grey);
    text-decoration: line-through;
}
.left div{
    width: 50%;
    display: flex;
    justify-content: space-between;
    gap: 10%;
}
.left div button{
    width: 100%;
    padding: 5%;
    background: var(--orange);
    border: none;
    border-radius: 5px;
    color: white;
    font-size: 1rem;
}
.right{
    width: 35%;
    padding-top: 4%;
}
.right img{
    width: 100%;
}
.div2{
    height: 50vh;
    margin: 6% 0;
    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;
}
.rowed{
    display: flex;
    gap: 2%;
    padding: 1% 0%;
    height: 100%;
}
.rowed>div{
    background: #F8F9FD;
    padding: 3%; 
    height: 90%;
}
.rowed p{
    font-size: 0.9rem;
    color: var(--grey);
    line-height: 1.5;
    text-align: center;
}
.rowed h3{
    font-size: 1rem;
    color: var(--darkGrey);
}
.rowed >div:not(.divCenter){
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: space-between;
    width: 40%;
}
.divCenter{
    flex-grow: 1;
    display: flex;
    gap: 4%;
}
.divCenter div{
    flex-grow: 1;
    display: flex;
    flex-direction: column;
    justify-content: space-around;
    align-items: flex-start;
}
.divCenter div p{
    text-align: left;
}
.divCenter div p:nth-of-type(2){
    color: black;
    font-weight: 600;
}
.divCenter div p span{
    color: var(--orange);
}
.divCenter div button{
    padding: 3%;
    border: none;
    background: var(--orange);
    color: white;
    border-radius: 4px;
    font-size: 0.95rem;
}
.rowed div:not(.divCenter) img{
    width: 70%;
}
.divCenter img{
    height: 90%;
}
.divRight{
    padding:0 3% 2% 3% !important;
    position: relative;
}
.divRight h3{
    position: relative;
    text-shadow: 3px 3px rgb(201, 195, 195); 
}
.divRight h3::after{
    content: '';
    width: 122%;
    border-radius: 30px;
    position: absolute;
    top:-11px;
    opacity: 0.5;
    border-bottom: 20px solid #f5f5c6;
    border-right: 20px solid transparent;
    border-left: 20px solid transparent;
    left: 50%;
    transform: translateX(-50%);
}
.div3{
    height: 120vh;
    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;
}
.forGrid{
    display: flex;
    flex-direction: column;
    gap: 10%;
    height: 100%;
}
.grided{
    display: grid;
    grid-template-columns: 1fr 1fr 1fr 1fr;
    grid-template-rows:1fr 1fr ;
    gap: 4%;
    height: 100%;
    text-transform:capitalize ;
}
.grided>div{
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 4%;
    position: relative;
}
.top{
    background-color: #F8F9FD;
    width: 100%;
    display: flex;
    justify-content: center;
    align-items: flex-start;
    height: 80%;
    position: relative;
}
.top >div:first-child{
    width: 100%;
    height: 90%;
    display:flex;
    justify-content: center;
    align-items: center;
    position: relative;
}
.bottom{
    display: flex;
    flex-direction: column;
    align-items: center;
    height: auto;
    flex-grow: 1;
    width: 100%;
    gap: 15%;
    justify-content: center;
}
.one{
    grid-column: 1/2;
    grid-row: 1/2;
}
.top >div:first-child img{
    transition: 0.5s ease;
}
.top:hover >div:first-child img{
    transform: scale(1.25);
}
.top:hover div:first-child::after{
    width: 100%;
    height: 100%;
    top :0;
    bottom: 0;
    left: 0;
    right: 0;
}
.top >div:first-child::after{
    content: '';
    width: 0;
    height: 0;
    position: absolute;
    top:50%;
    left: 50%;
    background-color: #a9abad;
    opacity: 0.1;
    transition: 0.5s ease;

}
.div3 h1{
    text-align: center;
}
.popUp{
    position: absolute;
    bottom: 0;
    width: 100%;
    height: 0%;
    opacity: 0;
    background: #33383C;
    color: white;
    display: flex;
    align-items: center;
    padding: 0 10%;
    transition: 0.7s ease;
    gap: 5%;
}
.top:hover .popUp{
    height: 10%;
    opacity: 1;
}
.popUp a{
    display: flex;
    align-items: center;
    gap: 5%;
    cursor: pointer;
    width: 60%;
    transition: 0.5s ease;
}
.popUp a:hover{
    color: var(--orange);
}
.popUp a:hover i{
    animation: cartMoving 1s ease  infinite ;
    color: var(--orange);
}
@keyframes cartMoving {
    0%{
        transform: translateX(0);
    }
    50%{
        transform: translateX(4px);
    }
    100%{
        transform: translateX(0);
    }
}
.popUp i{
    cursor: pointer;
    transition: 0.5s ease
}
.popUp i:nth-child(2){
    margin-left: auto;
}
.popUp i:nth-child(2):hover{
    color: rgb(197, 91, 91);
}
.popUp i:nth-child(3):hover{
    transform: scale(1.2);
}
.popUp a,.popUp i{
    color: white;
}
.grided h3{
    font-size: 1.1rem;
    font-weight: 600;
    color: var(--darkGrey);
}
.grided .bottom p{
    color: var(--grey);
}
<!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">
    <title>Furniture</title>
    <link rel="stylesheet" href="furnstyle.css">
    <link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.0.7/css/all.css">
</head>
<body>
    <div >
        <div >
            <nav>
                <h1>Sine<span>Mkt</span>.</h1>
                <ul >
                    <li>
                        <a href="#">Home</a>
                    </li>
                    <li>
                        <a href="#">New Arrival</a>
                    </li>
                    <li>
                        <a href="#">Feautures</a>
                    </li>
                    <li>
                        <a href="#">Blog</a>
                    </li>
                    <li>
                        <a href="#">Contact</a>
                    </li>
                </ul>
                <ul >
                    <li>
                        <a href="#" id="searchbar"><i ></i></a>
                        <div  id="bar">
                            <input type="search" id="search">
                        </div>
                    </li>
                    <li>
                        <a href="#"><i ></i></a>
                    </li>
                    <li>
                        <a href="#"><i ></i></a>
                        <ul  id="cartt">
                            <li >
                                <img src="https://www.free-css.com/assets/files/free-css-templates/preview/page275/furn/assets/images/collection/arrivals1.png" alt="">
                                <div >
                                    <h3>Arm Chair</h3>
                                    <p>1 x - $180.00</p>
                                    <i ></i>
                                </div>
                            </li>
                            <li >
                                <img src="https://www.free-css.com/assets/files/free-css-templates/preview/page275/furn/assets/images/collection/arrivals2.png" alt="">
                                <div >
                                    <h3>Arm Chair</h3>
                                    <p>1 x - $180.00</p>
                                    <i ></i>
                                </div>
                            </li>
                            <li >
                                <img src="https://www.free-css.com/assets/files/free-css-templates/preview/page275/furn/assets/images/collection/arrivals3.png" alt="">
                                <div >
                                    <h3>Arm Chair</h3>
                                    <p>1 x - $180.00</p>
                                    <i ></i>
                                </div>
                            </li>
                            <li>
                                <h3>Total : $xx.xx</h3>
                                <button>View Cart</button>
                            </li>
                        </ul>
                    </li>
                </ul>
            </nav>
            <div >
                <div  id="contain1">
                <div >
                    <h3>great design collection</h3>
                    <h1>cloth covered accent chair</h1>
                    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiuiana smod tempor ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip.</p>
                    <p>$ 199.00 <span>$ 499.00</span></p>
                    <div>
                        <button >Add to Cart</button>
                        <button >More Info</button>
                    </div>
                </div>
                <div >
                    <img src="https://www.free-css.com/assets/files/free-css-templates/preview/page275/furn/assets/images/slider/slider1.png" alt="">
                </div>
            </div>
                <div  id="contain2">
                <div >
                    <h3>great design collection</h3>
                    <h1>mapple wood accent chair</h1>
                    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiuiana smod tempor ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip.</p>
                    <p>$ 199.00 <span>$ 299.00</span></p>
                    <div>
                        <button >Add to Cart</button>
                        <button >More Info</button>
                    </div>
                </div>
                <div >
                    <img src="https://www.free-css.com/assets/files/free-css-templates/preview/page275/furn/assets/images/slider/slider2.png" alt="">
                </div>
            </div>
                <div  id="contain3">
                <div >
                    <h3>great design collection</h3>
                    <h1>valvet accent arm chair</h1>
                    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiuiana smod tempor ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip.</p>
                    <p>$ 299.00 <span>$ 399.00</span></p>
                    <div>
                        <button >Add to Cart</button>
                        <button >More Info</button>
                    </div>
                </div>
                <div >
                    <img src="https://www.free-css.com/assets/files/free-css-templates/preview/page275/furn/assets/images/slider/slider3.png" alt="">
                </div>
            </div>
            </div>
        </div>
    </div>
    <div >
        <div >
            <div >
                <img src="https://www.free-css.com/assets/files/free-css-templates/preview/page275/furn/assets/images/populer-products/p1.png" alt="">
                <h3>Arm Chair</h3>
                <p>Nemo enim ipsam voluptatem quia volu ptas sit asperna aut odit aut fugit.</p>
            </div>
            <div >
                <img src="https://www.free-css.com/assets/files/free-css-templates/preview/page275/furn/assets/images/populer-products/p2.png" alt="">
                <div>
                <h3>Latest designed stool and chair</h3>
                <p>Edi ut perspiciatis unde omnis iste natusina error sit voluptatem accusantium doloret mque laudantium, totam rem aperiam.</p>
                <p>Sales Start from <span>$99.00</span></p>
                <button>Discover More</button>
            </div>
            </div>
            <div >
                <img src="https://www.free-css.com/assets/files/free-css-templates/preview/page275/furn/assets/images/populer-products/p3.png" alt="">
                <h3>Hanging lamp</h3>
                <p>Nemo enim ipsam voluptatem quia volu ptas sit asperna aut odit aut fugit.</p>
            </div>
        </div>
    </div>
    <div >
        <div >
            <h1>New Arrival</h1>
            <div >
            <div >
                <div >
                    <div>
                        <img src="https://www.free-css.com/assets/files/free-css-templates/preview/page275/furn/assets/images/collection/arrivals1.png" alt="">
                    </div>
                    <div >
                        <a id="addCart"><i ></i>Add to Cart</a>
                        <i ></i>
                        <i ></i>
                    </div>
                </div>
                <div >
                    <h3>Wooden Chair</h3>
                    <p>$65.00</p>
                </div>
            </div>
            <div >
                <div >
                    <div>
                        <img src="https://www.free-css.com/assets/files/free-css-templates/preview/page275/furn/assets/images/collection/arrivals2.png" alt="">
                    </div>
                    <div >
                        <a id=""><i ></i>Add to Cart</a>
                        <i ></i>
                        <i ></i>
                    </div>
                </div>
                <div >
                    <h3>single armchair</h3>
                    <p>$80.00</p>
                </div>
            </div>
            <div >
                <div >
                    <div>
                        <img src="https://www.free-css.com/assets/files/free-css-templates/preview/page275/furn/assets/images/collection/arrivals3.png" alt="">
                    </div>
                    <div >
                        <a id=""><i ></i>Add to Cart</a>
                        <i ></i>
                        <i ></i>
                    </div>
                </div>
                <div >
                    <h3>wooden armchair</h3>
                    <p>$40.00</p>
                </div>
            </div>
            <div >
                <div >
                    <div>
                        <img src="https://www.free-css.com/assets/files/free-css-templates/preview/page275/furn/assets/images/collection/arrivals4.png" alt="">
                    </div>
                    <div >
                        <a id=""><i ></i>Add to Cart</a>
                        <i ></i>
                        <i ></i>
                    </div>
                </div>
                <div >
                    <h3>stylish chair</h3>
                    <p>$100.00</p>
                </div>
            </div>
            <div >
                <div >
                    <div>
                        <img src="https://www.free-css.com/assets/files/free-css-templates/preview/page275/furn/assets/images/collection/arrivals5.png" alt="">
                    </div>
                    <div >
                        <a id=""><i ></i>Add to Cart</a>
                        <i ></i>
                        <i ></i>
                    </div>
                </div>
                <div >
                    <h3>modern chair</h3>
                    <p>$120.00</p>
                </div>
            </div>
            <div >
                <div >
                    <div>
                        <img src="https://www.free-css.com/assets/files/free-css-templates/preview/page275/furn/assets/images/collection/arrivals6.png" alt="">
                    </div>
                    <div >
                        <a id=""><i ></i>Add to Cart</a>
                        <i ></i>
                        <i ></i>
                    </div>
                </div>
                <div >
                    <h3>mapple wood dinning table</h3>
                    <p>$140.00</p>
                </div>
            </div>
            <div >
                <div >
                    <div>
                        <img src="https://www.free-css.com/assets/files/free-css-templates/preview/page275/furn/assets/images/collection/arrivals7.png" alt="">
                    </div>
                    <div >
                        <a id=""><i ></i>Add to Cart</a>
                        <i ></i>
                        <i ></i>
                    </div>
                </div>
                <div >
                    <h3>arm chair</h3>
                    <p>$90.00</p>
                </div>
            </div>
            <div >
                <div >
                    <div>
                        <img src="https://www.free-css.com/assets/files/free-css-templates/preview/page275/furn/assets/images/collection/arrivals8.png" alt="">
                    </div>
                    <div >
                        <a id=""><i ></i>Add to Cart</a>
                        <i ></i>
                        <i ></i>
                    </div>
                </div>
                <div >
                    <h3>wooden bed</h3>
                    <p>$140.00</p>
                </div>
            </div>
        </div>
        </div>
    </div>
    <script src="furnjava.js"></script>
</body>
</html>

There are Items under the header "New Arrival" & I have a cart that will show up if you hover on the cart icon in the right of the Navbar. when You hover on each of the Items there is a div that has an " Add to cart " button ,I need when I press this button for this item to be added to the cart. I tried with only the first item (last code in the js file) but it didn't work

CodePudding user response：

Page link：https//www.codepudding.com/Softwareengineering/294100.html

Prev:How to tell if a website is static or dynamic?
Next:Hello, can I work as a freelancer while I study at the university and I have the skills
  •  Tags：  
  • Related

About Us:  Contact Us      Terms of Service       Privacy Policy

Copyright © 2010-2023，Powered By CodePudding