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.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 diff --git a/shradha/product.js b/shradha/product.js new file mode 100644 index 0000000..0b17b98 --- /dev/null +++ b/shradha/product.js @@ -0,0 +1,78 @@ +let mensData = JSON.parse(localStorage.getItem("mens")) + + //console.log(mensData) + + let cart = JSON.parse(localStorage.getItem("cart")) || [] + + + + + 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 ; + image.addEventListener("click",function(){ + adddetails(el) + }) + + 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" + btn.addEventListener("click",function(){ + addtocart(el) + }) + + ana.append(name,about,price,discount) + div.append(image,ana,btn); + 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) +} +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.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..d41786e --- /dev/null +++ b/shradha/product_details/product_details.js @@ -0,0 +1,39 @@ + + +let product = JSON.parse(localStorage.getItem("product_det")) + 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