From 6e7c582b498307af8c5529107ed44e7aa6a316b6 Mon Sep 17 00:00:00 2001 From: Priyanka Date: Fri, 26 Aug 2022 15:56:20 +0530 Subject: [PATCH 1/6] productDetailsPage 1 --- P_ProductDetailsPage/P_index.html | 20 ++++++ P_ProductDetailsPage/P_index.js | 110 ++++++++++++++++++++++++++++++ P_ProductDetailsPage/P_style.css | 76 +++++++++++++++++++++ 3 files changed, 206 insertions(+) create mode 100644 P_ProductDetailsPage/P_index.html create mode 100644 P_ProductDetailsPage/P_index.js create mode 100644 P_ProductDetailsPage/P_style.css diff --git a/P_ProductDetailsPage/P_index.html b/P_ProductDetailsPage/P_index.html new file mode 100644 index 0000000..51ae787 --- /dev/null +++ b/P_ProductDetailsPage/P_index.html @@ -0,0 +1,20 @@ + + + + + + + + + + + TX + + + +
+ + + + + \ No newline at end of file diff --git a/P_ProductDetailsPage/P_index.js b/P_ProductDetailsPage/P_index.js new file mode 100644 index 0000000..5a885a9 --- /dev/null +++ b/P_ProductDetailsPage/P_index.js @@ -0,0 +1,110 @@ +let data = { + "image": "https://www.jiomart.com/images/product/330x410/rvxfwfpfyt/aadi-men-s-black-synthetic-leather-daily-casual-slider-product-images-rvxfwfpfyt-0-202205312236.jpg", + "title": "Aadi Men's Black Synthetic Leather Daily Casual Slider", + "priceold": 999, + "pricenew": 229, +} +localStorage.setItem("product", JSON.stringify(data)); +// -------------------------------------------------------------------------// + +let products = JSON.parse(localStorage.getItem("product")); +console.log(products) + +let append = () => { + let save=products.priceold-products.pricenew; + document.getElementById("P_container1").innerHTML= + ` +
+
+
+ +
+
+ +
+
+ +
+
+ +
+
+ +
+ +
+
+
+

${products.title}

+ +

₹ ${products.pricenew}.00 M.R.P ₹ ${products.priceold}.00

+
+

You Save: ₹ ${save} Inclusive all taxes

+

In Stock

+ +

Inaugural Offer Free Shipping

+ +
+ +

Delivery

+
CHECK
+ +

Delivery Between 29th Aug to 30th Aug

+ + +
Available Offer
2
+ +
+ + +
+
BANK OFFERS
+

SBI Offers

+ +

View 1 offer

+
+
+
COUPONS
+

Flat Rs. 1000 OFF on Mobiles & Electronics

+

View 1 offer

+
+ + +
+ +
+ +
+
+
+ +
+ `; +} + +append(); +document.getElementById("P_cart").addEventListener("click", function(){ +localStorage.setItem("products", JSON.stringify(products)); +// window.location.replace("#") +}); + +document.getElementById("P_buyNow").addEventListener("click", function(){ +localStorage.setItem("products", JSON.stringify(products)); +// window.location.replace("#") +}) + +document.getElementById("P_check").addEventListener("click", function(){ + document.getElementById("P_deliveryAvl").style.display="none"; + + if(document.getElementById("P_pinCode").value.trim().length==6){ + document.getElementById("P_deliveryAvl").style.display="block"; + } + + else{ + document.getElementById("P_deliveryAvl").innerText="Please enter a valid pincode"; + document.getElementById("P_deliveryAvl").style.color="red"; + document.getElementById("P_deliveryAvl").style.display="block"; + + } + +}) diff --git a/P_ProductDetailsPage/P_style.css b/P_ProductDetailsPage/P_style.css new file mode 100644 index 0000000..63dffe2 --- /dev/null +++ b/P_ProductDetailsPage/P_style.css @@ -0,0 +1,76 @@ +*{ + margin: 0; + padding: 0; +} +#P_container1{ + text-align: center; + margin: auto; + margin-top: 30px; + margin-bottom: 20px; + width: 90%; + display: flex; + justify-content: space-around; + + font-family: 'Gill Sans', 'Gill Sans MT', Calibri, 'Trebuchet MS', sans-serif; + box-shadow: rgba(0, 0, 0, 0.15) 0px 3px 3px 0px; +} +#div1{ + /* margin: auto; */ + width: 40%; + height: 70vh; + display: flex; + justify-content: space-between; + align-items: center; + +} +#div2{ + /* margin: auto; */ + text-align: left; + width: 45%; + height: 120vh; + display: flex; + flex-direction: column; + + box-shadow: rgba(0, 0, 0, 0.15) 2.4px 2.4px 3.2px; +} +#div11{ + margin: auto; + width: 25%; + display: flex; + flex-direction: column; + justify-content: space-around; + height: 100%; + + +} +#div12{ + margin: auto; + width: 70%; + height: 80%; + + box-shadow: rgba(0, 0, 0, 0.16) 0px 1px 4px; +} +#div12>img{ + margin: auto; + width: 100%; + height: 100%; + +} +#div111{ + width: 80%; + height: 20%; + /* padding: 8px; */ + + box-shadow: rgba(0, 0, 0, 0.16) 0px 1px 4px; +} +#div111>img{ + width: 100%; + height: 100%; + +} +#P_deliveryAvl{ + display: none; +} +#P_check:hover{ + cursor: pointer; +} \ No newline at end of file From e0c75bf45ac6b89f2de3842aa02a645ab9369eca Mon Sep 17 00:00:00 2001 From: Priyanka Date: Fri, 26 Aug 2022 17:25:45 +0530 Subject: [PATCH 2/6] added rating & feedback & return policy sections --- P_ProductDetailsPage/P_index.html | 134 ++++++++++++++++++++++++++- P_ProductDetailsPage/P_style.css | 26 +++++- P_ProductDetailsPage/rate image.jpeg | Bin 0 -> 11777 bytes 3 files changed, 158 insertions(+), 2 deletions(-) create mode 100644 P_ProductDetailsPage/rate image.jpeg diff --git a/P_ProductDetailsPage/P_index.html b/P_ProductDetailsPage/P_index.html index 51ae787..80f0242 100644 --- a/P_ProductDetailsPage/P_index.html +++ b/P_ProductDetailsPage/P_index.html @@ -13,8 +13,140 @@
+ +
+ +

Return Policy

+

Items are eligible for return within 7 Days of Delivery (T&C Apply*)

+ +

All accessories, product & packaging need to be returned in original condition

+ +
+ +
+

Product Rating

+
+
+ +
+ +
+

Rate Product + + + + + + + + + + + +

+ +
+ +
+ + +
+
+
+ - \ No newline at end of file + + \ No newline at end of file diff --git a/P_ProductDetailsPage/P_style.css b/P_ProductDetailsPage/P_style.css index 63dffe2..cac1c07 100644 --- a/P_ProductDetailsPage/P_style.css +++ b/P_ProductDetailsPage/P_style.css @@ -31,7 +31,7 @@ display: flex; flex-direction: column; - box-shadow: rgba(0, 0, 0, 0.15) 2.4px 2.4px 3.2px; + /* box-shadow: rgba(0, 0, 0, 0.15) 2.4px 2.4px 3.2px; */ } #div11{ margin: auto; @@ -73,4 +73,28 @@ } #P_check:hover{ cursor: pointer; +} +#returnPolicy{ + font-family: 'Gill Sans', 'Gill Sans MT', Calibri, 'Trebuchet MS', sans-serif; +} +#productRating{ + font-family: 'Gill Sans', 'Gill Sans MT', Calibri, 'Trebuchet MS', sans-serif; +} +#solid1{ + display: none; +} +#solid2{ + display: none; +} +#solid3{ + display: none; +} +#solid4{ + display: none; +} +#solid5{ + display: none; +} +#review{ + display: none; } \ No newline at end of file diff --git a/P_ProductDetailsPage/rate image.jpeg b/P_ProductDetailsPage/rate image.jpeg new file mode 100644 index 0000000000000000000000000000000000000000..76e02424093271376a5bf855094d96f55c455115 GIT binary patch literal 11777 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 Ou>KCifguD} Date: Fri, 26 Aug 2022 17:31:39 +0530 Subject: [PATCH 3/6] added rating & feedback & return policy sections2 --- P_ProductDetailsPage/P_index.html | 91 ------------------------------- P_ProductDetailsPage/P_index.js | 91 +++++++++++++++++++++++++++++++ 2 files changed, 91 insertions(+), 91 deletions(-) diff --git a/P_ProductDetailsPage/P_index.html b/P_ProductDetailsPage/P_index.html index 80f0242..55ff693 100644 --- a/P_ProductDetailsPage/P_index.html +++ b/P_ProductDetailsPage/P_index.html @@ -59,94 +59,3 @@

Product Rating

- \ No newline at end of file diff --git a/P_ProductDetailsPage/P_index.js b/P_ProductDetailsPage/P_index.js index 5a885a9..2a5aabc 100644 --- a/P_ProductDetailsPage/P_index.js +++ b/P_ProductDetailsPage/P_index.js @@ -108,3 +108,94 @@ document.getElementById("P_check").addEventListener("click", function(){ } }) + + +let solid1=document.getElementById("solid1"); +let solid2=document.getElementById("solid2"); +let solid3=document.getElementById("solid3"); +let solid4=document.getElementById("solid4"); +let solid5=document.getElementById("solid5"); + +function starFunc1(){ + document.getElementById("empty1").style.display="none"; + solid1.style.display="block"; + solid1.style.color="red"; +} +function starFunc2(){ + document.getElementById("empty1").style.display="none"; + document.getElementById("empty2").style.display="none"; + solid1.style.display="block"; + solid2.style.display="block"; + + solid1.style.color="red"; + solid2.style.color="red"; +} +function starFunc3(){ + document.getElementById("empty1").style.display="none"; + document.getElementById("empty2").style.display="none"; + document.getElementById("empty3").style.display="none"; + solid1.style.display="block"; + solid2.style.display="block"; + solid3.style.display="block"; + + solid1.style.color="yellow"; + solid2.style.color="yellow"; + solid3.style.color="yellow"; +} +function starFunc4(){ + document.getElementById("empty1").style.display="none"; + document.getElementById("empty2").style.display="none"; + document.getElementById("empty3").style.display="none"; + document.getElementById("empty4").style.display="none"; + solid1.style.display="block"; + solid2.style.display="block"; + solid3.style.display="block"; + solid4.style.display="block"; + + solid1.style.color="green"; + solid2.style.color="green"; + solid3.style.color="green"; + solid4.style.color="green"; +} +function starFunc5(){ + document.getElementById("empty1").style.display="none"; + document.getElementById("empty2").style.display="none"; + document.getElementById("empty3").style.display="none"; + document.getElementById("empty4").style.display="none"; + document.getElementById("empty5").style.display="none"; + solid1.style.display="block"; + solid2.style.display="block"; + solid3.style.display="block"; + solid4.style.display="block"; + solid5.style.display="block"; + + solid1.style.color="green"; + solid2.style.color="green"; + solid3.style.color="green"; + solid4.style.color="green"; + solid5.style.color="green"; +} + +let value=0; +function reviewFunc(){ + // let login=JSON.parse(localStorage.getItem("login")); + login="true"; + if(login=="true" && value==0){ + document.getElementById("review").style.display="block"; + value=1; + }else if(login=="true" && value==1){ + document.getElementById("review").style.display="none"; + setTimeout(()=>{ + alert("Thanks for your feedback!"); + },0) + + value=0; + } + + else{ + window.location.replace("../P_SignIn/P_index.html"); + } + let feedback=document.getElementById("reviewInput").value; + + localStorage.setItem("review", JSON.stringify(feedback)); + } \ No newline at end of file From 4337c264a838a336e6c4b812682ec96d7c1bee36 Mon Sep 17 00:00:00 2001 From: Priyanka Date: Fri, 26 Aug 2022 20:17:18 +0530 Subject: [PATCH 4/6] made products as array --- P_ProductDetailsPage/P_index.js | 7 +++++-- 1 file changed, 5 insertions(+), 2 deletions(-) diff --git a/P_ProductDetailsPage/P_index.js b/P_ProductDetailsPage/P_index.js index 2a5aabc..92aef11 100644 --- a/P_ProductDetailsPage/P_index.js +++ b/P_ProductDetailsPage/P_index.js @@ -83,13 +83,16 @@ let append = () => { } append(); +let ProductsArr=[]; document.getElementById("P_cart").addEventListener("click", function(){ -localStorage.setItem("products", JSON.stringify(products)); + ProductsArr.push(products); +localStorage.setItem("products", JSON.stringify(ProductsArr)); // window.location.replace("#") }); document.getElementById("P_buyNow").addEventListener("click", function(){ -localStorage.setItem("products", JSON.stringify(products)); + ProductsArr.push(products); +localStorage.setItem("products", JSON.stringify(ProductsArr)); // window.location.replace("#") }) From ca15009cb0006316ff2b9b0a4ba65bb61e6142a9 Mon Sep 17 00:00:00 2001 From: Priyanka Date: Fri, 26 Aug 2022 20:48:59 +0530 Subject: [PATCH 5/6] products2 --- P_ProductDetailsPage/P_index.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/P_ProductDetailsPage/P_index.js b/P_ProductDetailsPage/P_index.js index 92aef11..85fb256 100644 --- a/P_ProductDetailsPage/P_index.js +++ b/P_ProductDetailsPage/P_index.js @@ -83,7 +83,7 @@ let append = () => { } append(); -let ProductsArr=[]; +let ProductsArr=JSON.parse(localStorage.getItem("products"))||[]; document.getElementById("P_cart").addEventListener("click", function(){ ProductsArr.push(products); localStorage.setItem("products", JSON.stringify(ProductsArr)); From f9db3e2256132673f37d297e922eeadb2db7135f Mon Sep 17 00:00:00 2001 From: Priyanka Date: Sat, 27 Aug 2022 11:16:25 +0530 Subject: [PATCH 6/6] navbar footer added 1 --- P_ProductDetailsPage/P_index.html | 14 ++ P_ProductDetailsPage/P_index.js | 10 +- P_ProductDetailsPage/P_style.css | 4 +- P_ProductDetailsPage/footer.js | 54 +++++ P_ProductDetailsPage/navbar.css | 367 ++++++++++++++++++++++++++++++ P_ProductDetailsPage/navbar1.js | 251 ++++++++++++++++++++ P_ProductDetailsPage/navbar2.js | 98 ++++++++ 7 files changed, 791 insertions(+), 7 deletions(-) create mode 100644 P_ProductDetailsPage/footer.js create mode 100644 P_ProductDetailsPage/navbar.css create mode 100644 P_ProductDetailsPage/navbar1.js create mode 100644 P_ProductDetailsPage/navbar2.js diff --git a/P_ProductDetailsPage/P_index.html b/P_ProductDetailsPage/P_index.html index 55ff693..b876c14 100644 --- a/P_ProductDetailsPage/P_index.html +++ b/P_ProductDetailsPage/P_index.html @@ -8,10 +8,14 @@ + + TX + +
@@ -54,8 +58,18 @@

Product Rating

+ + + + + diff --git a/P_ProductDetailsPage/P_index.js b/P_ProductDetailsPage/P_index.js index 85fb256..e308621 100644 --- a/P_ProductDetailsPage/P_index.js +++ b/P_ProductDetailsPage/P_index.js @@ -72,18 +72,18 @@ let append = () => { -
+
-
-
-
+
+
+
`; } append(); -let ProductsArr=JSON.parse(localStorage.getItem("products"))||[]; +let ProductsArr=[]; document.getElementById("P_cart").addEventListener("click", function(){ ProductsArr.push(products); localStorage.setItem("products", JSON.stringify(ProductsArr)); diff --git a/P_ProductDetailsPage/P_style.css b/P_ProductDetailsPage/P_style.css index cac1c07..1faeec4 100644 --- a/P_ProductDetailsPage/P_style.css +++ b/P_ProductDetailsPage/P_style.css @@ -27,10 +27,10 @@ /* margin: auto; */ text-align: left; width: 45%; - height: 120vh; + height: 100vh; display: flex; flex-direction: column; - + margin-bottom: 20px; /* box-shadow: rgba(0, 0, 0, 0.15) 2.4px 2.4px 3.2px; */ } #div11{ diff --git a/P_ProductDetailsPage/footer.js b/P_ProductDetailsPage/footer.js new file mode 100644 index 0000000..680a2ef --- /dev/null +++ b/P_ProductDetailsPage/footer.js @@ -0,0 +1,54 @@ +function footer (){ + return ` + + + ` + +} + +export default footer; \ No newline at end of file diff --git a/P_ProductDetailsPage/navbar.css b/P_ProductDetailsPage/navbar.css new file mode 100644 index 0000000..6861ad6 --- /dev/null +++ b/P_ProductDetailsPage/navbar.css @@ -0,0 +1,367 @@ +*{ + padding: 0px; + margin: 0px; + box-sizing: border-box; +} +body{ + width: 100vw; + overflow-x: hidden; + font-family: 'Gill Sans', 'Gill Sans MT', Calibri, 'Trebuchet MS', sans-serif; +} +#Anavbar{ + + position: fixed; + width: 100%; + top: 0; + +} + +#Atopnavbar{ + width: 100%; + top: 0; + height: 80px; + background-color: + #008ecc; + color: aliceblue; + display: flex; + +} +#Alogo{ + width: 30px; + height: 30px; + background: transparent; + margin: 20px; + margin-left: 100%; +} +#Aweblogo{ + margin-left: 80px; + margin-top: 10%; +} + +#Asearch{ + height: 40px; + width: 500px; + padding: 0px 10px; + border-radius: 5px; + margin-left: 25%; + margin-top: 20px; + } + #Alog_sign{ + font-size: 20px; + margin-left: 13%; + margin-top: 13px; + + } + #Auserlogo{ + width: 30px; + height: 30px; + background: transparent; + margin-right: 10px; + position: relative; + top:10px + + } + #Alogin{ + color: aliceblue; + } + #Asignup{ + color: aliceblue; + } + #Acartdiv{ + font-size: 20px; + margin-left: 5%; + margin-top: 13px; + color: aliceblue; + } + #Acartlogo{ + width: 30px; + height: 30px; + background: transparent; + margin-right: 10px; + position: relative; + top:10px + + } + #Alogodiv{ + + position: relative; + cursor: pointer; + left: 20px; + } + #Amenu{ + display: none; + width: 30%; + border: 1px solid gray; + height: 600px; + position: relative; + top: -120px; + background-color: rgb(252, 252, 252); + + } + #Auserlogo2{ + width: 30px; + height: 30px; + margin-right: 20px; + } + #Amenu h2{ + padding: 20px; + } + #Across{ + position: relative; + left: 150px; + font-size: 30px; + font-weight: 600; + width: 30px; + } + #Amenunav{ + background-color: #008ecc; + color: aliceblue; + } + #Aaccount{ + height: 30px; + padding: 0px 50px; + margin-left: 30px; + margin-bottom: 10px; + color: aliceblue; + background-color: #008ecc; + border: 1px solid white; + } + #Aoffer{ + height: 30px; + padding: 0px 50px; + margin-left: 40px; + margin-bottom: 10px; + color: aliceblue; + background-color: #008ecc; + border: 1px solid white; + } + #Aoptions h3{ + color: rgb(54, 52, 52); + margin: 15px 20px; + font-weight:lighter; + + } + #Asearchdiv{ + position:absolute; + width: 500px; + top: 60px; + height: 500px; + left: 30%; + border: 1px solid gray; + visibility: hidden; + overflow: scroll; + background-color:#a3ddf8; + + } + .AappendName{ + display: flex; + border: 1px solid gray; + padding: 20px; + cursor: pointer; + } + #Aclose{ + position:absolute; + padding: 10px; + left: 93%; + + + } + #Adel{ + width: 100px; + } + #Asearchbar{ + position: relative; + left: 114%; + font-size: 25px; + top: -35px; + background-color: aliceblue; + border: none; + cursor: pointer; + } + #Asearchlogo{ + width: 20px; + height: 20px; + } + .sa-menu-bar h3{ + padding-left: 16px; + transition: 100ms; + + } + .sa-menu-bar h3:hover{ + padding-left: 20px; + cursor: pointer; + background-color: rgba(0,0,0,.2); + } + + + *{ + padding: 0px; + margin: 0px; + /* box-sizing: border-box; */ + } + #Adeliver{ + width: 150px; + display: flex; + } + #Adeliver h3{ + color: gray; + font-size: 15px; + } + .Adropdown{ + + width: 100%; + margin: auto; + + background-color: rgb(238, 237, 237); + display: flex; + text-align: center; + height: 40px; + padding-left: 2%; + } + .Adropdown ul{ + display: inline-flex; + z-index: 200; + } + #Aloimg{ + width: 20px; + height: 40px; + margin: 0px 10px 10px 10px; + } + .Adropdown ul li{ + width: 160px; + margin: 5px 2px; + padding: 5px 0px; + list-style: none; + cursor: pointer; + } + .Ainner{ + display: flex; + + padding: 10px; + background-color: rgb(238, 237, 237); + display: none; + + } + .Ainner1{ + width: 200px; + display: none; + } + .Ainner2{ + width: 200px; + display: none; + } + .Adropdown>ul>li:hover{ + background-color: #94b4db; + + } + .Adropdown ul li:hover .Ainner{ + display: block; + width: 400px; + display: flex; + + + } + .Adropdown ul li:hover .Ainner1{ + display: block; + + } + .Ainner1 ul{ + + display: grid; + grid-template-columns: repeat(1,1fr); + background-color: rgb(238, 237, 237); + } + .Adropdown ul li:hover .Ainner2{ + display: block; + position: relative; + /* left: 51px; */ + + } + .Ainner2 ul{ + + display: grid; + grid-template-columns: repeat(1,1fr); + background-color: rgb(238, 237, 237); + } + .Ahr{ + position: relative; + /* left: 50px; */ + } + .Ainner2 ul li{ + width: 90%; + padding: 5px 10px; + margin: 10px 20px; + text-align: left; + } + .Ainner1 ul li{ + width: 90%; + padding: 5px 10px; + margin: 10px 20px; + text-align: left; + } + .Ainner2 ul li:hover{ + background-color: rgb(255, 255, 255); + + color: #0e72ed; + cursor: pointer; + + + } + .Ainner1 ul li:hover{ + background-color: rgb(255, 255, 255); + color: #0e72ed; + cursor: pointer; + + } + + /* //////////////////////////// FOOTER /////////////////////////// */ + + +#sa-footer-container { + display: flex; + width: 100%; + height: 400px; + gap: 40px; + justify-content: center; + align-items: center; + background: rgba(21, 27, 57, .08); + margin-top: 3%; + font-family: 'Gill Sans', 'Gill Sans MT', Calibri, 'Trebuchet MS', sans-serif; + +} + +#sa-footer-container .sa-footer-box { + width: 25%; + height: 90%; + line-height: 30px; + padding-left: 1%; +} + +#sa-footer-container .sa-footer-box h5 { + font-weight: bolder; + font-size: 15px; +} + +#sa-footer-container .sa-footer-box p { + color: grey; +} + +#sa-footer-container .sa-footer-box #download { + margin: 0 20px; + text-align: center; +} +#sa-footer-container .sa-footer-box:nth-child(1), #sa-footer-container .sa-footer-box:nth-child(2){ + line-height: 5px; +} +#sa-footer-container .sa-footer-box:last-child { + border-left: 1px solid rgba(128, 128, 128, 0.254); + margin-right: 1%; +} + +#sa-footer-end { + display: flex; + width: 100%; + justify-content: space-evenly; + border-top: 1px solid rgba(128, 128, 128, 0.254); + background: rgba(21, 27, 57, .08); +} \ No newline at end of file diff --git a/P_ProductDetailsPage/navbar1.js b/P_ProductDetailsPage/navbar1.js new file mode 100644 index 0000000..5ebc6db --- /dev/null +++ b/P_ProductDetailsPage/navbar1.js @@ -0,0 +1,251 @@ + + +function navigation(){ + return` +
+
+ +
+
+ +
+
+ + + + +
+
+ +
+
+ + + +
+ +
+ + + + + Sign in / Sign up + +
+
+ + + + 0 + + + Cart + +
+
+ +
+
+ +
+

Deliver to

+

430209

+
+
+
    +
  • + Groceries +
    +
    +
      +
    • Fruits & Vegetables
      • +
    • Dairy & Bakery
      • +
    • Staples
      • +
    • Snacks & Branded Food
      • +
    • Beverages
      • +
    +
    +
    +
    +
      +
    • Personal Care
      • +
    • Home Care
      • +
    • Home & Kitchen
      • +
    • Mom & Baby Care
      • +
    • Books
      • +
    • Pets
      • +
    +
    +
    +
    • +
  • + Premium Fruits +
    +
    +
      +
    • Apples & Pears
      • +
    • Avocado,Peach, Plum
      • +
    • Banana, Melona & Coconut
      • +
    • Cherries, Berries & Exotic Fruits
      • +
    • Citrus, Mango & Grapes
      • +
    +
    +
    +
    +
      +
    • Dates
      • +
    • Gift,Assorted & XL Packs
      • +
    • Pomegranate, Papaya & Pineapple
      • +
    • Seasonal & Minor Fruits
      • +
    • Premium Fruits
      • +
    +
    +
    +
    • +
  • + Home & Kitchen +
    +
    +
      +
    • Kitchenware
      • +
    • Dining
      • +
    • Furnishing
      • +
    • Home Decor
      • +
    • Furniture
      • +
    • Home Appliances
      • +
    • Home Appliances
      • +
    • Toys, Games & Fitness
      • +
    • Electrical
      • +
    • Bathroom & Laundry Accessories
      • +
    • Disposables
      • +
    • Stationery
      • +
    +
    +
    +
    +
      +
    • Bags & Travel Lugguge Mops, Brushes & Scrubs
      • +
    • Auto Care
      • +
    • Garden & Outdoor
      • +
    • Carpentry & work accessories
      • +
    • Pooja Needs
      • +
    • Bathroom & Laundry
      • +
    • Industrial & Scientific Supplies
      • +
    • Home Safety & Automation
      • +
    • Kitchen & Bath Fixtures
      • +
    • Paint, Wall Treatments & Supplies
      • +
    • Power & Hand Tools
      • +
    +
    +
    +
    • +
  • + Fashion + +
    +
      +
    • Men
      • +
    • Women
      • +
    • Boys
      • +
    • Girls
      • +
    • Junior Boys
      • +
    • Infants
      • +
    +
    +
    • +
  • + Electronecs +
    +
      +
    • Mobiles & Tablets
      • +
    • TV & Speaker
      • +
    • Home Appliances
      • +
    • Computers
      • +
    • Cameras
      • +
    • Kitchen Appliances
      • +
    • Personal Care & Grooming
      • +
    • Smart Devices
      • +
    • Gaming
      • +
    • Accessories
      • +
    • Phones
      • +
    • Office Products
      • +
    • Health Care Devices
      • +
    +
    +
    • +
  • + Beauty +
    +
      +
    • Make-Up
      • +
    • Hair
      • +
    • Skin Care
      • +
    • Fragrances
      • +
    • Personal Care
      • +
    • Mom & Baby
      • +
    • Men's Grooming
      • +
    • Tools & Appliances
      • +
    • Covid Essentails
      • +
    • Wellness
      • +
    • Fitness
      • +
    • Ayush
      • +
    • Treatments
      • +
    +
    +
    • +
  • + Jewellary +
    +
      +
    • Fine Jewellary
      • +
    +
    +
    • +
+
+
+
+
+
+

+ + Hello, + Sign in + + +

+
+ + +
+ +
+
+

Home

+

Shop by Category

+

My List

+

JioMart Wallet

+

JioMart Gift Store

+

JioMart Gift Card

+

GoGreen with JioMart

+

All Offers

+
+

My Account

+

Need Help

+

About us

+

Guide

+
+
+
+ +
+ +
+ ` +} + +export default navigation; \ No newline at end of file diff --git a/P_ProductDetailsPage/navbar2.js b/P_ProductDetailsPage/navbar2.js new file mode 100644 index 0000000..c3ddf79 --- /dev/null +++ b/P_ProductDetailsPage/navbar2.js @@ -0,0 +1,98 @@ +import navigation from "../P_ProductDetailsPage/navbar1.js" +let navbar = document.querySelector("#navigation").innerHTML = navigation(); + console.log('heloooo') + + + + +document.getElementById("Alogodiv").addEventListener("click",()=>{ + document.getElementById("Amenu").style.marginLeft="0px"; + document.getElementById("Amenu").style.transition="0.5s all ease-in-out"; + + document.getElementById("Amenu").style.opacity="1"; + document.getElementById("Amenu").style.opacity="1"; + document.getElementById("blur-div").style.marginLeft="0px"; + document.getElementById("blur-div").style.transition="0.9s all ease-in-out"; + document.querySelector("body").style.overflow="hidden"; + + }) + document.getElementById("Across").addEventListener("click",()=>{ + document.getElementById("Amenu").style.marginLeft="-1000px"; + document.getElementById("Amenu").style.transition="1s all ease-in-out"; + document.getElementById("Amenu").style.opacity="0"; + document.getElementById("blur-div").style.marginLeft="-2000px"; + document.getElementById("blur-div").style.transition="0.5s all ease-in-out"; + document.querySelector("body").style.overflow="scroll"; + + }) + + let searchProduct=async (event)=>{ + if(event.key=="Enter"){ + let query=document.getElementById("Asearch").value; + let res= await fetch(`https://secure-waters-87632.herokuapp.com/api/${query}`); + let data=await res.json(); + console.log(data) + + // document.getElementById("Asearchbar").innerHTML="X"; + // document.getElementById("Asearchbar").addEventListener("click",()=>{ + // document.getElementById("Asearchdiv").style.visibility="hidden"; + // document.getElementById("Asearch").value=""; + // let img=document.createElement("img"); + // img.id="Asearchlogo" + + // document.getElementById("Asearchbar").innerText=null; + // document.getElementById("Asearchbar").append(img); + + // }) + appendData(data); + } + + } + document.getElementById('Asearch').addEventListener("keypress",searchProduct); +// document.getElementById("Asearchdiv").innerHTML=null; + + document.getElementById('Asearchbar').addEventListener("click",searchProduct); + + + + cartItemCount() +function cartItemCount(){ + + let cartPlace = document.querySelector('#Aitemcount'); + let cartItem = JSON.parse(localStorage.getItem('products')); + cartPlace.innerHTML = null + cartPlace.innerHTML = cartItem.length + +} + + +let appendData = (data) => { + + console.log(data) + // document.getElementById("Asearchdiv").append(close); + let container = document.querySelector('#Asearchdiv'); + console.log(container) + container.innerHTML = null; + data.forEach(({title,pricenew,image,priceold}) => { + let div1=document.createElement("div"); + + let h3=document.createElement("h3"); + h3.innerText=title + let p=document.createElement("p"); + p.innerText=`Price:- ${pricenew}`; + p.style.marginTop="30px" + div1.append(h3,p) + let img=document.createElement('img'); + img.src=image; + let div=document.createElement('div'); + div.classList.add("AappendName") + div.append(div1,img); + div.addEventListener("click",()=>{ + localStorage.setItem("product",JSON.stringify({title,pricenew,image,priceold})) + }) + console.log(div) + container.append(div) + }); + document.getElementById("Asearchdiv").style.visibility="visible"; + document.getElementById("Asearchdiv").style.display="block"; +}