From 1b86281adbc4bd8797328fd5f1eef0aee4f6a714 Mon Sep 17 00:00:00 2001 From: Mshradha <99673738+Mshradha@users.noreply.github.com> Date: Thu, 5 May 2022 11:56:12 +0530 Subject: [PATCH 1/4] mens product page --- shradha/deatils/details.html | 227 +++++++++++++++++++++++++++++++++++ shradha/product.js | 51 ++++++++ 2 files changed, 278 insertions(+) create mode 100644 shradha/deatils/details.html create mode 100644 shradha/product.js diff --git a/shradha/deatils/details.html b/shradha/deatils/details.html new file mode 100644 index 0000000..45f4fe7 --- /dev/null +++ b/shradha/deatils/details.html @@ -0,0 +1,227 @@ + + + + + + + + Document + + + + + + + + + + + diff --git a/shradha/product.js b/shradha/product.js new file mode 100644 index 0000000..1d5b6e0 --- /dev/null +++ b/shradha/product.js @@ -0,0 +1,51 @@ +let mensData = JSON.parse(localStorage.getItem("mens")) + + console.log(mensData) + + + + + let conta = document.getElementById("productshra").innerHTML = "" + + let data = mensData.map((el,index)=>{ + + + let div = document.createElement("div"); + div.id="divshr" + + let image = document.createElement("img"); + image.src = el.image ; + + let ana = document.createElement("div"); + ana.id = "anna" + + let name = document.createElement("h3"); + name.innerText = el.name ; + name.style.color = "#333333"; + name.style.fontSize = "16px" + + + let about = document.createElement("p"); + about.innerText = el.about ; + about.style.color = "#666666"; + about.style.fontSize = "13px" + + let price = document.createElement("h3"); + price.innerText = "$"+el.price ; + price.style.color = "#333333"; + + + let discount = document.createElement("p"); + discount.innerText = el.discount ; + discount.style.color = "#bd1906"; + discount.style.fontSize = "11px" + + let btn = document.createElement("button"); + btn.innerText = "ADD TO BAG"; + btn.id = "btnshr" + + ana.append(name,about,price,discount) + div.append(image,ana,btn); + document.getElementById("productshra").append(div) ; + + }) From 405839222517b1b606a0c0f2b17927026eb0cdf7 Mon Sep 17 00:00:00 2001 From: Mshradha <99673738+Mshradha@users.noreply.github.com> Date: Thu, 5 May 2022 11:56:33 +0530 Subject: [PATCH 2/4] mens --- shradha/product.css | 89 ++++++++++++++++++++++++++++++++++++++++++++ shradha/product.html | 40 ++++++++++++++++++++ 2 files changed, 129 insertions(+) create mode 100644 shradha/product.css create mode 100644 shradha/product.html diff --git a/shradha/product.css b/shradha/product.css new file mode 100644 index 0000000..556661c --- /dev/null +++ b/shradha/product.css @@ -0,0 +1,89 @@ +*{ + font-family: "Trade Gothic W01 Regular", "Trade Gothic W01 Light", Arial, sans-serif;; +} + + +#contashra{ + /* border: 1px solid green; */ + width: 100%; + /* height: 1000px; */ + display: flex; + gap: 30px; + +} +#filtershra{ + width: 15% ; + height: 500px; + border: 1px solid brown; +} +#productdiv{ + width: 80%; + /* height: 1000px; */ + /* border: 1px solid sienna; */ +} +#productdiv>div{ + margin-bottom: 20px; +} +#upperimgsh{ + width: 100%; + height: 320px; + /* border: 1px solid saddlebrown; */ +} +#upperimgsh>img{ + width: 100%; +} +#upperimgsh>h2{ + font-weight: 500; +} +#sortshra{ + width: 100%; + height: 60px; + border: 1px solid green; +} +#productshra{ + display: grid; + cursor: pointer; + grid-template-columns: repeat(4,1fr); + gap: 10px; + +} +#divshr{ + /* border: 1px solid goldenrod; */ + /* box-shadow: rgba(0, 0, 0, 0.1) 0px 4px 12px; */ + height: 460px; + line-height: 12px; + +} +#divshr>img{ + height: 60%; + width: 50%; + margin-top: 20px; + margin-left: 80px; +} + +#anna{ + height: 25%; + text-align: center; +} +#btnshr{ + margin-left: 30px; + background-color: #333333; + color: white; + width: 80%; + height: 40px; + border: #333333; + font-size: 11px; +} +#btnshr:hover{ + background: rgb(211, 208, 208); + color: black; +} +#lowshr{ + width: 74%; + margin-left: 320px; + line-height: 3px; +} +#lowshr>h2{ + text-align:right; + margin-right: 30px; +} \ No newline at end of file diff --git a/shradha/product.html b/shradha/product.html new file mode 100644 index 0000000..ff6c276 --- /dev/null +++ b/shradha/product.html @@ -0,0 +1,40 @@ + + + + + + + Men's Fragrance | Bath & Body Workst + + + + + + +
+
+ +
+
+
+

Men's Fragrance, Body Care & More

+ +
+
+
+
+
+ + +
+ +

1 2 3

+
+
+ + + + + + + \ No newline at end of file From 049801edf2fa39b65544d12eab78832dd1229308 Mon Sep 17 00:00:00 2001 From: Mshradha <99673738+Mshradha@users.noreply.github.com> Date: Fri, 6 May 2022 00:08:53 +0530 Subject: [PATCH 3/4] productdeatils --- shradha/product.js | 17 ++++++++++++++- shradha/product_details/product_details.css | 12 +++++++++++ shradha/product_details/product_details.html | 22 ++++++++++++++++++++ shradha/product_details/product_details.js | 4 ++++ 4 files changed, 54 insertions(+), 1 deletion(-) create mode 100644 shradha/product_details/product_details.css create mode 100644 shradha/product_details/product_details.html create mode 100644 shradha/product_details/product_details.js diff --git a/shradha/product.js b/shradha/product.js index 1d5b6e0..7a828ed 100644 --- a/shradha/product.js +++ b/shradha/product.js @@ -1,6 +1,6 @@ let mensData = JSON.parse(localStorage.getItem("mens")) - console.log(mensData) + //console.log(mensData) @@ -12,6 +12,9 @@ let mensData = JSON.parse(localStorage.getItem("mens")) let div = document.createElement("div"); div.id="divshr" + div.addEventListener("click",function(){ + adddetails(el) + }) let image = document.createElement("img"); image.src = el.image ; @@ -49,3 +52,15 @@ let mensData = JSON.parse(localStorage.getItem("mens")) document.getElementById("productshra").append(div) ; }) + + + + + +function adddetails(el){ + let details = [] + details.push(el) + localStorage.setItem("product_det",JSON.stringify(details)) + window.location.href="./product_details/product_details.html" + //console.log(details) +} diff --git a/shradha/product_details/product_details.css b/shradha/product_details/product_details.css new file mode 100644 index 0000000..3d798ce --- /dev/null +++ b/shradha/product_details/product_details.css @@ -0,0 +1,12 @@ +#mainshr{ + display: grid; + border: 1px solid black; + width: 60%; + height: 600px; + margin: auto; + grid-template-columns: repeat(2,1fr); + gap: 10px; +} +#mainshr>DIV{ + border: 1px solid saddlebrown; +} \ No newline at end of file diff --git a/shradha/product_details/product_details.html b/shradha/product_details/product_details.html new file mode 100644 index 0000000..681e5d5 --- /dev/null +++ b/shradha/product_details/product_details.html @@ -0,0 +1,22 @@ + + + + + + + Document + + + +

Product Details

+
+
+ +
+
+ +
+
+ + + \ No newline at end of file diff --git a/shradha/product_details/product_details.js b/shradha/product_details/product_details.js new file mode 100644 index 0000000..8d15d7b --- /dev/null +++ b/shradha/product_details/product_details.js @@ -0,0 +1,4 @@ + + +let product = JSON.parse(localStorage.getItem("product_det")) +// console.log(product) \ No newline at end of file From 9763c2da7c4501aa2979cc28656da8cbde3c9cdd Mon Sep 17 00:00:00 2001 From: Mshradha <99673738+Mshradha@users.noreply.github.com> Date: Sat, 7 May 2022 12:25:34 +0530 Subject: [PATCH 4/4] sdfghj --- shradha/product.js | 18 +++++++++-- shradha/product_details/product_details.js | 37 +++++++++++++++++++++- 2 files changed, 51 insertions(+), 4 deletions(-) diff --git a/shradha/product.js b/shradha/product.js index 7a828ed..0b17b98 100644 --- a/shradha/product.js +++ b/shradha/product.js @@ -2,6 +2,8 @@ let mensData = JSON.parse(localStorage.getItem("mens")) //console.log(mensData) + let cart = JSON.parse(localStorage.getItem("cart")) || [] + @@ -12,12 +14,13 @@ let mensData = JSON.parse(localStorage.getItem("mens")) let div = document.createElement("div"); div.id="divshr" - div.addEventListener("click",function(){ - adddetails(el) - }) + let image = document.createElement("img"); image.src = el.image ; + image.addEventListener("click",function(){ + adddetails(el) + }) let ana = document.createElement("div"); ana.id = "anna" @@ -46,6 +49,9 @@ let mensData = JSON.parse(localStorage.getItem("mens")) let btn = document.createElement("button"); btn.innerText = "ADD TO BAG"; btn.id = "btnshr" + btn.addEventListener("click",function(){ + addtocart(el) + }) ana.append(name,about,price,discount) div.append(image,ana,btn); @@ -64,3 +70,9 @@ function adddetails(el){ window.location.href="./product_details/product_details.html" //console.log(details) } +function addtocart(el){ + cart.push(el); + localStorage.setItem("cart",JSON.stringify(cart)) + console.log(cart) + +} \ No newline at end of file diff --git a/shradha/product_details/product_details.js b/shradha/product_details/product_details.js index 8d15d7b..d41786e 100644 --- a/shradha/product_details/product_details.js +++ b/shradha/product_details/product_details.js @@ -1,4 +1,39 @@ let product = JSON.parse(localStorage.getItem("product_det")) -// console.log(product) \ No newline at end of file + console.log(product) + +product.map((el)=>{ + let image = document.createElement("img"); + image.src = el.image; + + let name = document.createElement("p"); + name.innerText = el.name ; + name.id = "namesh" + + let about = document.createElement("p"); + about.innerText = el.about ; + about.id = "aboshr" + + let price = document.createElement("h5"); + price.innerText = "$"+ el.price ; + price.id = "pricesh" + + + let des = document.createElement("p"); + des.innerText = "10 fl oz / 295 mL"; + + + let hor = document.createElement("hr") + + + + + + + + + document.getElementById("detailshra").append(name,about,price,des,hor); + + document.getElementById("imageshr").append(image) +}) \ No newline at end of file