web-development-session-content · JahirPendhari09 · Jun 1, 2023 · Jun 2, 2023 · Jun 3, 2023 · Jun 3, 2023
diff --git a/README.md b/README.md
@@ -1 +1,3 @@
-# mini-project
+# mini-project
+
+https://647dc15071c69508a2ab286d--peaceful-praline-37ae17.netlify.app/
diff --git a/day-1/Padel.html b/day-1/Padel.html
@@ -0,0 +1,124 @@
+<!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>Padel</title>
+    <link rel="stylesheet" href="./style/Padel.css">
+</head>
+<body>
+    <div id="header">  
+        <img src="https://storage.sg.content-cdn.io/in-resources/b368029c-a4dd-448a-a888-58348cb1b144/Images/userimages/logo.jpg" alt="">
+        <input type="search" id="search" placeholder="Search">
+         <div>
+            <img src="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcSfBwmgx_LQcvFiy0srYMy4fskfDuV5fPvg8w&usqp=CAU" alt="">
+            <h3 id="shopcart"><a href="./cart.html">Shopping Cart</a></h3>
+         </div>
+    </div>
+    <hr>
+    <div id="navbar">
+        <ul > <a href="./index.html" >  <b class="sport-1">HOME</b></a>
+        </ul>
+        <ul > <a href="#" >  <b class="sport-1">SPORT</b></a>
+            <div class="sport">
+                <ul>
+                    <li><a href="#"> Cricket</a></li>
+                    <li><a href="#">Badminton</a></li>
+                </ul>
+            </div>
+        </ul>
+        <ul> <a href="#"> <b class="sport-1">FITNESS</b> </a>
+            <div class="sport">
+                <ul>
+                    <li><a href="#"> Cycling</a></li>
+                    <li><a href="#">Gym Accessories</a></li>
+                </ul>
+            </div>
+        </ul>
+        <ul> <a href="#"> <b class="sport-1">SHOES</b></a>
+            <div class="sport">
+                <ul>
+                    <li><a href="#"> Men</a></li>
+                    <li><a href="#">Women</a></li>
+                </ul>
+            </div>
+        </ul>
+        <ul> <a href="#"> <b class="sport-1">CLOTHING</b></a>
+            <div class="sport">
+                <ul>
+                    <li><a href="#"> Men</a></li>
+                    <li><a href="#">Women</a></li>
+                </ul>
+            </div>
+        </ul>
+        <ul> <a href="#"><b class="sport-1">ACCESSORIES</b> </a>
+            <div class="sport">
+                <ul>
+                    <li><a href="#"> By Sport</a></li>
+                    <li><a href="#">Sport Bag</a></li>
+                </ul>
+            </div>
+        </ul>
+        <ul> <a href="#"> <b class="sport-1">LEISURE SPORTS</b></a>
+            <div class="sport">
+                <ul>
+                    <li><a href="#"> Leisure Sports</a></li>
+                </ul>
+            </div>
+        </ul>
+        <ul> <a href="#"> <b class="sport-1">FANGEAR</b> </a>
+            <div class="sport">
+                <ul>
+                    <li><a href="#"> Scorrer Leagues</a></li>
+                </ul>
+            </div>
+        </ul>
+        <ul> <a href="#">  <b class="sport-1">BRANDS</b></a>
+            <div class="sport">
+                <ul>
+                    <li><a href="#"> Brand of Choice</a></li>
+                </ul>
+            </div>
+        </ul>
+    </div>
+    <hr>
+
+    <div id="pick">
+        <div id="filterSection">
+            <div>
+                <h3>CATEGORY MENU</h3>
+                <ul>Shoes</ul>
+                <ul>Badminton</ul>
+                <ul>Fitness</ul>
+                <ul>Men</ul>
+                <ul>Women</ul>
+            </div>
+            <div>
+                <!-- <label for=""> Price Range</label> -->
+                <h3>PRICE RANGE</h3>
+                <input type="range" name="" id="">
+            </div>
+        </div>
+        <div id="product">
+            <div>
+                <h2> PICKLEBALL</h2>
+                <select id="filter">
+                <option value="">SORT BY</option>
+                <option value="Price Low to High">Price Low to High</option>
+                <option value="Price High to Low">Price high to Low</option>
+                <option value="Discount">Discount</option>
+                </select>
+            </div>
+            <hr>
+            <div id="productData">
+
+            </div>
+        </div>
+
+    </div>
+    <img src="./endPic.png" alt="" id="end">
+</body>
+
+<script src="./Scripts/padel.js"></script>
+</html>
diff --git a/day-1/Scripts/cart.js 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<LS.length; i++)
+        {
+            let ele = LS[i];
+            let c = ele.count
+            if(ele.id===el.id)
+            {
+                if(c===1&&val===-1)
+                {
+                    return;
+                }
+                ele.count = ele.count+val;
+                LS[i] = ele;
+                localStorage.setItem("Bookmark",JSON.stringify(LS));
+                display(LS)
+                return;
+            }
+        }
+    }
diff --git a/day-1/Scripts/index.js b/day-1/Scripts/index.js
@@ -0,0 +1,46 @@
+// console.log("jjj")
+
+let headerImg = document.getElementById("imgd");
+
+let btn1 = document.getElementById("btn1");
+let btn2 = document.getElementById("btn2");
+let ind =0;
+let headImg =[
+    "https://storage.sg.content-cdn.io/in-resources/b368029c-a4dd-448a-a888-58348cb1b144/Images/userimages/PARAFA2023.jpg",
+    "https://storage.sg.content-cdn.io/in-resources/b368029c-a4dd-448a-a888-58348cb1b144/Images/userimages/Pro-Staff-V14-BUY-Now.jpg",
+    "https://storage.sg.content-cdn.io/in-resources/b368029c-a4dd-448a-a888-58348cb1b144/Images/userimages/Joma%20offer.jpg",
+    "https://storage.sg.content-cdn.io/in-resources/b368029c-a4dd-448a-a888-58348cb1b144/Images/userimages/osaka-ezone.jpg",
+    "https://storage.sg.content-cdn.io/in-resources/b368029c-a4dd-448a-a888-58348cb1b144/Images/userimages/ArcSaber11-1.jpg",
+    "https://storage.sg.content-cdn.io/in-resources/b368029c-a4dd-448a-a888-58348cb1b144/Images/userimages/speed2022.jpg"
+];
+let data = "https://www.google.com/";
+
+headerImg.setAttribute("src", headImg[ind]);
+
+btn1.addEventListener("click",function(){
+    ind--;
+    if(ind === -1){
+        ind=headImg.length-1;
+    }
+    headerImg.setAttribute("src", headImg[ind]); 
+})
+
+btn2.addEventListener("click",function(){
+    ind++;
+    if(ind === headImg.length){
+        ind=0;
+    }
+    headerImg.setAttribute("src", headImg[ind]);
+});
+
+let cart=document.getElementById("shopcart");
+
+cart.addEventListener("click",function(){
+
+})
+
+
+
+
+
+