diff --git a/README.md b/README.md index 0e166a2..82ecbb8 100644 --- a/README.md +++ b/README.md @@ -1 +1,3 @@ -# mini-project \ No newline at end of file +# mini-project + +https://647dc15071c69508a2ab286d--peaceful-praline-37ae17.netlify.app/ diff --git a/day-1/Padel.html b/day-1/Padel.html new file mode 100644 index 0000000..31673dc --- /dev/null +++ b/day-1/Padel.html @@ -0,0 +1,124 @@ + + + + + + + Padel + + + + +
+ +
+ +
+
+
+

CATEGORY MENU

+
    Shoes
+
    Badminton
+
    Fitness
+
    Men
+
    Women
+
+
+ +

PRICE RANGE

+ +
+
+
+
+

PICKLEBALL

+ +
+
+
+ +
+
+ +
+ + + + + \ No newline at end of file diff --git a/day-1/Scripts/cart.js b/day-1/Scripts/cart.js new file mode 100644 index 0000000..7533316 --- /dev/null +++ b/day-1/Scripts/cart.js @@ -0,0 +1,84 @@ +let LS = JSON.parse(localStorage.getItem("Bookmark"))||[]; + +let box = document.getElementById("box"); + +display(LS); + +function display(data){ + box.innerHTML=""; + data.forEach(function(el){ + let div = document.createElement("div"); + + let nameImg = document.createElement("div") + nameImg.style.flexDirection="column" + + let productImg = document.createElement("img"); + productImg.setAttribute("src", el.image) ; + + let name = document.createElement("h3"); + name.innerText=el.name; + let price = document.createElement("div"); + price.innerText="₹"+el.price; + + let quantity = document.createElement("div"); + quantity.className = "quantity" + let but1 = document.createElement("button"); + but1.innerText = "-" + but1.className = "but" + but1.addEventListener("click",function(){quantityy(el,-1)}) + let but2 = document.createElement("button"); + but2.innerText = "+" + but2.className = "but" + but2.addEventListener("click",function(){quantityy(el,1)}) + let p = document.createElement("p"); + p.innerText = el.count; + quantity.append(but1,p,but2) + + let total = document.createElement("div"); + total.innerText="₹" + Number(el.count)*Number(el.price); + + let remove = document.createElement("div"); + remove.innerText="Remove"; + remove.id = "remove" + remove.style.cursor = "pointer" + + nameImg.append(productImg,name); + + + box.append(nameImg,price,quantity,total,remove); + + + remove.addEventListener("click",function(){ + alert("Are You Sure") + LS = LS.filter((e)=>{ + if(e.id !== el.id){ + return e; + } + }) + localStorage.setItem("Bookmark",JSON.stringify(LS)); + display(LS) + + }) + + }) + + } + function quantityy(el,val){ + for(let i=0; i{ + // return a.price - b.price; + if(a.price >b.price){ + return 1; + }else if(a.price { + // return b.price - a.price; + if(a.price b.price){ + return -1; + }else{ + return 0; + } + }) + + display(filterd); + } + else if(filter.value === "Discount"){ + let filterd = data.sort((a,b)=>{ + if(a.discount < b.discount){ + return 1; + }else if(a.discount > b.discount){ + return -1; + }else{ + return 0; + } + }) + display(filterd); + } + +}) + +display(data) + + + +function display(data){ + product.innerHTML=""; + data.forEach(function(el,i,arr){ + let div = document.createElement("div"); + + let imageD= document.createElement("img"); + // imageD.setAttribute("src",el.image); + imageD.src = el.image + + let name= document.createElement("h2"); + name.innerText = el.name; + let price= document.createElement("h3"); + price.innerText= el.price; + let discount= document.createElement("p"); + discount.innerText = el.discount; + discount.style.color="red"; + + let addCart = document.createElement("button") + addCart.innerText = "Add Cart"; + + div.append(imageD,name,price,discount,addCart); + + product.append(div); + addCart.addEventListener("click",function(){ + + let flag = true; + for(let i=0; i{ + // return a.price - b.price; + if(a.price >b.price){ + return 1; + }else if(a.price { + // return b.price - a.price; + if(a.price b.price){ + return -1; + }else{ + return 0; + } + }) + + display(filterd); + } + else if(filter.value === "Discount"){ + let filterd = data.sort((a,b)=>{ + if(a.discount < b.discount){ + return 1; + }else if(a.discount > b.discount){ + return -1; + }else{ + return 0; + } + }) + display(filterd); + } + +}) + +display(data) + +function display(data){ + product.innerHTML=""; + data.forEach(function(ele){ + let div = document.createElement("div"); + + let imageD= document.createElement("img"); + imageD.src =ele.image; + + let name= document.createElement("h2"); + name.innerText = ele.name; + let price= document.createElement("h3"); + price.innerText= ele.price; + let discount= document.createElement("p"); + discount.innerText = ele.discount; + discount.style.color="red"; + + let addCart = document.createElement("button") + addCart.innerText = "Add Cart"; + + div.append(imageD,name,price,discount,addCart); + + product.append(div); + addCart.addEventListener("click",function(){ + let flag = true; + + for(let i=0; i + + + + + + Badminton + + + + +
+ +
+ +
+ +
+

PURE AERO RAFA 2023 SERIES RACQUET

+
+ + + +
+

+ +

PURE AERO RAFA 2023 SERIES KITBAG

+
+ + +
+ + + \ No newline at end of file diff --git a/day-1/cart.html b/day-1/cart.html new file mode 100644 index 0000000..e894051 --- /dev/null +++ b/day-1/cart.html @@ -0,0 +1,101 @@ + + + + + + + Cart + + + + +
+ +
+ +

SHOPPING CART

+ +
+
Product Name
+
Unit Price
+
Quantity
+
Total
+
Remove
+
+
+
+ + + + \ No newline at end of file diff --git a/day-1/endPic.png b/day-1/endPic.png new file mode 100644 index 0000000..321754b Binary files /dev/null and b/day-1/endPic.png differ diff --git a/day-1/index.html b/day-1/index.html new file mode 100644 index 0000000..bd5decc --- /dev/null +++ b/day-1/index.html @@ -0,0 +1,159 @@ + + + + + + + Mini_Project + + + + +
+ +
+ +
+ + + + +
+
+
+ +

SPORTS

+
+
+ +

FITNESS

+
+
+ +

SHOES

+
+
+ +
+

OUR CUSTOMIZED SERVICES

+
+
+ +
+

RACKET STRINGING

+

HYBRID STRINGING

+

TT ASSEMBLY

+

BAT KNOCKING

+
+
+
+

HYBRID RACKET STRINING

+

Intermediate and advanced rackets usually come in unstrung condition. We help you with stringing it with your choice of strings, to get your racket perform as per your playing style. + + At Sportsjam.in , we offer the best range of tennis and badminton rackets and strings of top brands. To avail this service, choose your favourite new racket, add Racket Stringing Service, mentioning your choice of string and tension in your order. Get your very own customised racket – ready to play!

+ +
+
+ +

PICKLEBALL SPORTS

+
+
+ +

PADAL SPORTS

+
+
+
+ +
+
+
+ +
+
+

ABOUT SPORTSJAM

+

Let's get going to dig out the best products in your game & make 'em available right at your doorstep. We will be glad to serve you in any city in India & speedily, so that you enjoy your product in the coming weekend! All this, with no shipping charges if you purchase above Rs.1000. + + Scout through your favourite brands with latest technologies. Just click & be its proud owner, at the best available price in the market. Come, help us help you to fly high with your new & improved game with high quality sportsgear!

+ +
+
+ +

TESTIMONIALS

+

Amazing products and Excellent Service. Whenever I have called, I have got professional, prompt and consistent reply. Even during giving the free tshirt, you guys called to know the size, but unfortunately the size is large on me. Any chances I can exchange with M size. Although I am loving my new racquet. - Rajnish, New Delhi

+

+ + + + \ No newline at end of file diff --git a/day-1/pickleball.html b/day-1/pickleball.html new file mode 100644 index 0000000..f65fdf4 --- /dev/null +++ b/day-1/pickleball.html @@ -0,0 +1,124 @@ + + + + + + + Pickleball + + + + +
+ +
+ +
+
+
+

CATEGORY MENU

+
    Shoes
+
    Badminton
+
    Fitness
+
    Men
+
    Women
+
+
+ +

PRICE RANGE

+ +
+
+
+
+

PICKLEBALL

+ +
+
+
+ +
+
+
+ + + + + + \ No newline at end of file diff --git a/day-1/style/Padel.css b/day-1/style/Padel.css new file mode 100644 index 0000000..cf35ff9 --- /dev/null +++ b/day-1/style/Padel.css @@ -0,0 +1,166 @@ +*{ + box-sizing: border-box; + font-family: Robota,sans-serif; +} +#header { + width: 100%; + height: 100px; + display: flex; + justify-content: space-between; +} +#header >img{ + width: 30%; +} +#search{ + margin-top: 30px; + margin-bottom: 30px; + border-radius: 5px ; + width: 300px; +} + +#header >div{ + display: flex; + width: 200px; + /* justify-content: space-between; */ + padding-right: 20px; +} +#header >div >img{ + padding-top: 20px; + width: 40%; + height: 80px; +} + +#navbar{ + width: 100%; + display: flex; +} +#navbar :hover{ + background-color:black; + color: white; +} + +#navbar ul a { + text-decoration: none; +} +.sport{ + display: none; +} +.sport-1{ + text-align: center; + padding-right: 20px; +} +#navbar :hover .sport{ + display: block; + position: absolute; + margin-top: 10px; + background-color: lightblue; +} +.main a { + text-decoration: none; +} + +#shopcart{ + padding-top: 20px; + padding-left: 20px; +} +#shopcart a{ + text-decoration: none; +} +#pick { + padding-top: 20px; + padding-left: 10px; + width: 90%; + margin: auto; + display: grid; + grid-template-columns: 20% 80%; + gap: 20px 20px; +} + +#filterSection { + padding-left: 10px; + box-shadow: rgba(0, 0, 0, 0.24) 0px 3px 8px; + height: 400px; +} +#product >div:nth-child(1){ + padding-top: 10px; + width: 100%; + display: flex; + justify-content: space-between; +} +#product >div > select{ + margin-top: 20px; + margin-right: 50px; + height: 30px; + width: 300px; +} + +#productData { + width: 100%; + display: grid; + grid-template-columns: repeat(3,1fr); + gap: 20px 20px; + /* border: 2px dotted red; */ +} + +#productData >div{ + text-align: center; + padding-bottom: 20px; +} + +#productData >div:hover{ + box-shadow: rgba(0, 0, 0, 0.25) 0px 14px 28px, rgba(0, 0, 0, 0.22) 0px 10px 10px; +} + +#productData >div img{ + width: 100%; +} + +#end{ + padding-top: 50px; + width: 100%; +} +#shopcart{ + padding-top: 20px; + padding-left: 20px; +} +#shopcart a{ + text-decoration: none; +} + +@media screen and (max-width :400px) { + #header{ + display: none; + } + #navbar{ + display: none; + } + + #pick { + display: flex; + flex-direction: column; + } + + #product{ + display: flex; + flex-direction: column; + } + #productData { + display: grid; + grid-template-columns: repeat(1,1fr); + } +} +@media screen and (min-width :401px) and (max-width :800px) { + #pick { + display: flex; + flex-direction: column; + } + + #product{ + display: flex; + flex-direction: column; + } + #productData { + display: grid; + grid-template-columns: repeat(2,1fr); + } +} \ No newline at end of file diff --git a/day-1/style/badminton.css b/day-1/style/badminton.css new file mode 100644 index 0000000..2c92355 --- /dev/null +++ b/day-1/style/badminton.css @@ -0,0 +1,128 @@ +*{ + box-sizing: border-box; + font-family: Robota,sans-serif; +} +#header { + width: 100%; + height: 100px; + display: flex; + justify-content: space-between; +} +#header >img{ + width: 30%; +} +#search{ + margin-top: 30px; + margin-bottom: 30px; + border-radius: 5px ; + width: 300px; +} + +#header >div{ + display: flex; + width: 200px; + padding-right: 20px; +} +#header >div >img{ + margin-top: 20px; + width: 50%; + height: 60px; +} + +#navbar{ + width: 100%; + display: flex; +} +#navbar :hover{ + background-color:black; + color: white; +} +#navbar ul a { + text-decoration: none; +} +.sport{ + display: none; +} + +#navbar :hover .sport{ + display: block; + position: absolute; + margin-top: 10px; + background-color: lightblue; +} +.sport-1{ + text-align: center; + padding-right: 20px; +} +#pic{ + width: 100%; +} + +#pic img{ + width: 100%; +} + +.kit { + width: 90%; + display: grid; + grid-template-columns: repeat(3,1fr); + gap: 20px; + margin: auto; +} + +.kit img{ + width: 100%; +} + +img{ + width: 100%; +} +.bag{ + width: 100%; + display: grid; + grid-template-columns: repeat(2,1fr); + gap: 20px; +} + +.bag img{ + width: 100%; +} + +#end{ + padding-top: 50px; + width: 100%; +} +#shopcart{ + padding-top: 20px; + padding-left: 20px; +} +#shopcart a{ + text-decoration: none; +} + +@media screen and (max-width :400px) { + #header{ + display: none; + } + #navbar{ + display: none; + } + .kit{ + display: flex; + flex-direction: column; + } + .bag{ + display: flex; + flex-direction: column; + } +} +@media screen and (min-width :401px) and (max-width :800px) { + .kit{ + display: flex; + flex-direction: column; + } + .bag{ + display: flex; + flex-direction: column; + } +} \ No newline at end of file diff --git a/day-1/style/cart.css b/day-1/style/cart.css new file mode 100644 index 0000000..0843498 --- /dev/null +++ b/day-1/style/cart.css @@ -0,0 +1,119 @@ +*{ + box-sizing: border-box; + font-family: Robota,sans-serif; +} +#header { + width: 100%; + height: 100px; + display: flex; + justify-content: space-between; +} +#header >img{ + width: 30%; +} +#search{ + margin-top: 30px; + margin-bottom: 30px; + border-radius: 5px ; + width: 300px; +} + +#header >div{ + display: flex; + width: 200px; + /* justify-content: space-between; */ + padding-right: 20px; +} +#header >div >img{ + padding-top: 20px; + width: 40%; + height: 80px; +} + +#navbar{ + width: 100%; + display: flex; +} +#navbar :hover{ + background-color:black; + color: white; +} + +#navbar ul a { + text-decoration: none; + +} +.sport{ + display: none; +} +.sport-1{ + text-align: center; + padding-right: 20px; +} +#navbar :hover .sport{ + display: block; + position: absolute; + margin-top: 10px; + background-color: lightblue; +} +#shopcart{ + padding-top: 20px; + padding-left: 20px; + text-decoration: none; +} + +#cont{ + width: 100%; + display: grid; + grid-template-columns: repeat(5,1fr); + margin: auto; + +} +#cont div { + display: flex; + justify-content: center; + border: 2px solid black; + padding-top: 10px; + padding-bottom: 10px; +} + +#box{ + width: 100%; + display: grid; + grid-template-columns: repeat(5,1fr); + margin: auto; + text-align: center; +} +#box div { + display: flex; + align-items: center; + justify-content: center; + border: 2px solid black; +} +#box div img{ + padding-top: 20px; + width: 25%; +} +.quantity{ + display: flex; + justify-content: space-between; + gap:1rem; + align-items: center; +} +#remove:hover{ + background-color: rgb(230, 167, 167); + color:rgb(231, 31, 9); + border-radius: 5px; + border:1px solid green; + padding: 9px 14px; +} + +@media screen and (max-width :400px) { + #header{ + display: none; + } + #navbar{ + display: none; + } + +} diff --git a/day-1/style/home.css b/day-1/style/home.css new file mode 100644 index 0000000..30b49e2 --- /dev/null +++ b/day-1/style/home.css @@ -0,0 +1,190 @@ +* { + box-sizing: border-box; + font-family: Robota,sans-serif; +} +#header { + width: 100%; + height: 100px; + display: flex; + justify-content: space-between; +} +#header >img{ + width: 30%; +} +#search{ + margin-top: 30px; + margin-bottom: 30px; + border-radius: 5px ; + width: 300px; +} + +#header >div{ + display: flex; + width: 200px; + padding-right: 20px; +} +#header >div >img{ + padding-top: 20px; + width: 40%; + height: 80px; +} + +#navbar{ + width: 100%; + display: flex; +} +#navbar :hover{ + background-color:black; + color: white; +} +.sport-1{ + text-align: center; + padding-right: 20px; +} +#Image{ + width: 100%; + display: flex; + align-items: center; + +} +#Image Button{ + background-color: azure; + font-size: 30px; + width: 5%; + height: 70px; +} +#Image > a>img{ + overflow: hidden; + width: 100%; +} +#cont{ + width: 90%; + padding-top: 50px; + margin: auto; + display: grid; + grid-template-columns: repeat(3,1fr); + gap: 20px 20px; + text-align: center; +} + +#cont img{ + width: 100%; +} + +#midSection{ + width: 90%; + margin: auto; + display: grid; + grid-template-columns: repeat(2,1fr); + gap: 20px 40px; +} +#midSection img{ + width: 100%; +} + +#midSection >div >div{ + width: 100%; + display: flex; + justify-content: space-around; +} + +.cont2{ + padding-top: 50px; + width: 100%; +} +.cont2 img{ + width: 100%; +} +.cont3 { + width: 100%; + padding-top: 50px; + margin: auto; + display: grid; + grid-template-columns: repeat(2,1fr); + gap: 20px 40px; +} +.cont3 img{ + width: 100%; +} +#btn{ + width: 200px; + height: 50px; + color:white; + background-color: black; +} + +#end{ + padding-top: 50px; + width: 100%; +} + +.btnend{ + font-size: 20px; + width: 150px; + height: 50px; + margin: auto; + +} +#navbar ul a { + text-decoration: none; + +} +.sport{ + display: none; +} + +#navbar :hover .sport{ + display: block; + position: absolute; + margin-top: 30px; + background-color: lightblue; +} +.main a { + text-decoration: none; +} + +#shopcart{ + padding-top: 20px; + padding-left: 20px; +} +#shopcart a{ + text-decoration: none; +} +@media screen and (max-width :400px) { + #header{ + display: none; + } + #navbar{ + display: none; + } + #cont { + display: flex; + flex-direction: column; + } + #midSection { + display: flex; + flex-direction: column; + } + .cont3 { + display: grid; + grid-template-columns: repeat(1,1fr); + gap: 20px 40px; + text-align: center; + } +} +@media screen and (min-width :401px) and (max-width :800px) { + #cont { + display: flex; + flex-direction: column; + } + #midSection { + display: flex; + flex-direction: column; + } + .cont3 { + display: grid; + grid-template-columns: repeat(1,1fr); + gap: 20px 40px; + text-align: center; + } +} \ No newline at end of file diff --git a/day-1/style/pickleball.css b/day-1/style/pickleball.css new file mode 100644 index 0000000..f5468f2 --- /dev/null +++ b/day-1/style/pickleball.css @@ -0,0 +1,154 @@ +*{ + box-sizing: border-box; + font-family: Robota,sans-serif; +} +#header { + width: 100%; + height: 100px; + display: flex; + justify-content: space-between; +} +#header >img{ + width: 30%; +} +#search{ + margin-top: 30px; + margin-bottom: 30px; + border-radius: 5px ; + width: 300px; +} + +#header >div{ + display: flex; + width: 200px; + /* justify-content: space-between; */ + padding-right: 20px; +} +#header >div >img{ + padding-top: 20px; + width: 40%; + height: 80px; +} + +#navbar{ + width: 100%; + display: flex; +} +#navbar :hover{ + background-color:black; + color: white; +} + +#navbar ul a { + text-decoration: none; +} +.sport{ + display: none; +} +.sport-1{ + text-align: center; + padding-right: 20px; +} +#navbar :hover .sport{ + display: block; + position: absolute; + margin-top: 10px; + background-color: lightblue; +} +#pick { + padding-top: 20px; + padding-left: 10px; + width: 90%; + margin: auto; + display: grid; + grid-template-columns: 20% 80%; + gap: 20px 20px; +} + +#filterSection { + padding-left: 10px; + box-shadow: rgba(0, 0, 0, 0.24) 0px 3px 8px; + height: 400px; +} +#product >div:nth-child(1){ + padding-top: 10px; + width: 100%; + display: flex; + justify-content: space-between; +} +#product >div > select{ + margin-top: 20px; + margin-right: 50px; + height: 30px; + width: 300px; +} + +#productData { + width: 100%; + display: grid; + grid-template-columns: repeat(3,1fr); + gap: 20px 20px; + +} + +#productData >div{ + text-align: center; + padding-bottom: 20px; +} +#productData >div:hover{ + box-shadow: rgba(0, 0, 0, 0.25) 0px 14px 28px, rgba(0, 0, 0, 0.22) 0px 10px 10px; +} + +#productData >div img{ + width: 100%; +} + +#end{ + padding-top: 50px; + width: 100%; +} +#shopcart{ + padding-top: 20px; + padding-left: 20px; +} +#shopcart a{ + text-decoration: none; +} + +@media screen and (max-width :400px) { + #header{ + display: none; + } + #navbar{ + display: none; + } + + #pick { + display: flex; + flex-direction: column; + } + + #product{ + display: flex; + flex-direction: column; + } + #productData { + display: grid; + grid-template-columns: repeat(1,1fr); + } +} +@media screen and (min-width :401px) and (max-width :800px) { + #pick { + display: flex; + flex-direction: column; + } + + #product{ + display: flex; + flex-direction: column; + } + #productData { + display: grid; + grid-template-columns: repeat(2,1fr); + } +} \ No newline at end of file