Shephora-e-commerce-website/cart.html at main · vivekmohansingh27/Shephora-e-commerce-website · GitHub

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
<!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>Document</title>
    <link rel="stylesheet" href="cart.css">
</head>
<body>
    <div id="nav">
        <div><img width="100%" src="Cosmo.png" alt="logo"></div>
        <input id="search"  type="text" value="   Search">
        <button id="fav"><a href="fav.html">Favourites</a></button>
        <button id ="cart"><a href="index.html">Home</a></button>
       <button id="signin"><a href="signUp.html">Sign In</a></button>
    </div>

    <div id="benav">
        <p>New</p>
        <p>Brands</p>
        <p>Makeup</p>
        <p>Skincare</p>
        <p>Hair</p>
        <p>Fragrance</p>
        <p>Tools &Brushes</p>
        <p>Bath & Body</p>
        <p>Mini Size</p>
        <p>Gifts</p>
        <p>Beauty Under $20</p>
        <p>Sale & Offer</p>
    </div>
    <div style="background-color: whitesmoke; text-align: center;height: 30px;" ><b>shipping is delayed due to high demand.Need it sooner? Buy Online,Pick Up In Store or get Same-Day Delviery</b></div>
    <div id="two">
        <div id="container">
        </div>
        <div>

                <form>
                    <h1>Shipping Address</h1>
                    <label>Name</label>
                    <input id="name"  placeholder="Enter Full Name" type="text"/>
                    <label>Phone Number</label>
                    <input id="mob"  placeholder="Number" type="number"/>
                    <label>Email</label>
                    <input id="email"  placeholder="Email" type="text"/>
                    <label>Address</label>
                    <input id="address"  placeholder="Address" type="text"/>
                    <label>Pincode</label>
                    <input id="pin"  placeholder="Pincode" type="number"/>
                    <input  id="submit" type="submit" value="Submit">

                </form>

        </div>
    </div>


</body>
</html>

<script>


let data=JSON.parse(localStorage.getItem("cartPage"));

displayProduct(data)

function displayProduct(out){
    document.querySelector("#container").innerHTML=null;

    out.forEach(function(element,i)
    {
        let div = document.createElement("div")

    let Images = document.createElement("img")
    Images.setAttribute("src",element.images)

    let Name = document.createElement("h2")
    Name.innerText = element.name;

    let Des = document.createElement("p")
    Des.innerText = element.description

    let label= document.createElement("label")
    label.innerText = "Price:-"

    let Price = document.createElement("p")
    Price.innerHTML = element.price

    let remove = document.createElement("p")
    remove.innerText="Remove"
    remove.setAttribute("id","blue")
    remove.addEventListener("click",function(){
        delete1(element,i)
    })

    let div1 = document.createElement("div")

    div1.append(Name,Des,label,Price,remove)

    let pay = document.createElement("button")
    pay.innerText="Pay";
    pay.addEventListener("click",function(){
        alert("Please fill the Address Details")
    })

    div.append(Images,div1,pay)

    document.querySelector("#container").append(div)


    });
    }
    function delete1(element,i){
        data.splice(i,1)
        displayProduct(data)
        localStorage.setItem("FAV",JSON.stringify(data))
    }


    let admin_form=document.querySelector('form');
    admin_form.addEventListener('submit',myfun)
    let adminData=JSON.parse(localStorage.getItem("address"))||[]
    function myfun(event){
    event.preventDefault();
    let Obj={
        name:admin_form.name.value,
        mob:admin_form.mob.value,
        email:admin_form.email.value,
        address:admin_form.address.value,
        pin:admin_form.pin,

    }
    if(Obj.name==""||Obj.email==""||Obj.phone==""||Obj.gender==""||Obj.course==""){
        alert("Please fill all the details")
    }else{
        alert("Your is placed")
        adminData.push(Obj)
        localStorage.setItem("address",JSON.stringify(adminData))

    }

}

</script>