IMGIITRoorkee · khushiigoyall · Jul 11, 2025 · Jul 11, 2025
diff --git a/New folder (2)/.vscode/settings.json b/New folder (2)/.vscode/settings.json
@@ -0,0 +1,3 @@
+{
+    "liveServer.settings.port": 5501
+}
diff --git a/New folder (2)/ballimg-removebg-preview.png b/New folder (2)/ballimg-removebg-preview.png
diff --git a/New folder (2)/basket-removebg-preview.png b/New folder (2)/basket-removebg-preview.png
diff --git a/New folder (2)/brick.jpeg b/New folder (2)/brick.jpeg
diff --git a/New folder (2)/index2.html b/New folder (2)/index2.html
@@ -0,0 +1,23 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>basketball game</title>
+    <link rel="stylesheet" href="style2.css">
+</head>
+<body>
+    <div class="game">
+        <div class="first">hi play this game now </div>
+        <div class="heading"><h1>CATCH THE BASKET</h1></div>
+
+        <div id="gameArea">
+            <div id="scoreboard"></div>
+            <div id="basket"><img src="basket-removebg-preview.png" alt="" srcset=""></div>
+        </div>
+
+        <div class="playbutton"><button id="play">PLAY</button></div>
+    </div>
+<script src="script2.js"></script>
+</body>
+</html>
diff --git a/New folder (2)/script2.js b/New folder (2)/script2.js
@@ -0,0 +1,114 @@
+const gameArea = document.getElementById('gameArea');
+const basket = document.getElementById('basket');
+let score = 0;
+const gameareapos = gameArea.getBoundingClientRect();
+const scoreboard = document.getElementById('scoreboard');
+let arrayballs= [];
+
+function createBall() {
+  const ball = document.createElement('div');
+  ball.classList.add('ball');
+
+  let x = Math.random() * (gameArea.clientWidth - 120);
+  let y = 0;
+  ball.style.left = x + 'px';
+  ball.style.top = y + "px";
+
+  let vx = Math.random(); 
+  let vy = 2;
+
+  gameArea.appendChild(ball); 
+   console.log("ball created");
+   arrayballs.push(ball);
+
+
+
+   function bounceback() {
+   x = x + vx ; 
+   y = y + vy ;
+   ball.style.top = y + 'px';
+   ball.style.left = x + 'px';
+
+   const ballpos = ball.getBoundingClientRect();
+
+   if(ballpos.bottom >= gameareapos.bottom){
+      vy *= -1 ;
+   }
+
+   if(ballpos.top <= gameareapos.top ){
+      vy *= -1 ;
+   }
+
+   if(ballpos.left <= gameareapos.left){
+      vx *= -1 ;
+   }
+
+   if(ballpos.right >= gameareapos.right){
+      vx *= -1 ;
+   }
+
+
+    const basketpos = basket.getBoundingClientRect();
+
+    const Collide =
+        ballpos.bottom + 10 >= basketpos.bottom &&
+        ballpos.left >= basketpos.left&&
+        ballpos.right <= basketpos.right;
+
+    if (Collide) {
+      score++;
+      console.log("Score:", score);
+      ball.remove(); 
+    scoreboard.innerText = "Score:" + score ; 
+    }
+
+     requestAnimationFrame(bounceback);
+
+   } 
+
+   requestAnimationFrame(bounceback);
+
+}
+
+const play = document.getElementById('play');
+
+play.addEventListener('click' , () => {
+ score = 0;
+ scoreboard.innerText = "Score:" + score ;
+  const setint = setInterval(createBall,1000);
+  play.disabled = true;
+ setTimeout( () => {
+ clearInterval(setint);
+ console.log("stopped");
+
+ play.disabled = false; 
+ play.innerText = "restart" ;
+ alert(`Time's up! Your final score: ${score}`);
+
+ arrayballs.forEach ( ball => ball.remove());
+
+ } , 10000) ;
+});
+
+
+
+
+let basketLeft = (window.innerWidth) /2 ;
+let basketres = (window.innerWidth - gameArea.clientWidth) / 2 ; 
+let basketrightres = basketres + gameArea.clientWidth;
+
+ document.addEventListener('keydown', (e)=>{
+  const basketpos = basket.getBoundingClientRect();
+   if (basketpos.left >= basketres){
+  if(e.key === 'ArrowLeft'){
+    basketLeft -= 20 ;
+    basket.style.left = basketLeft + 'px';
+   }}
+
+   if (basketpos.right <= basketrightres){
+   if(e.key === 'ArrowRight'){
+    basketLeft += 20 ;
+    basket.style.left = basketLeft + 'px';
+   }}
+
+ }); 
diff --git a/New folder (2)/style2.css b/New folder (2)/style2.css
@@ -0,0 +1,67 @@
+*{
+    margin: 0;
+    padding: 0;
+}
+
+#gameArea{
+ background-color: aqua;
+ height:70vh;
+ margin:15vh 100px 15vh 100px;
+ margin-top: 30px;
+ margin-bottom: 10px;
+ position: relative;
+}
+
+.ball {
+    width:70px;
+    height:70px;
+    background-image: url('ballimg-removebg-preview.png');
+    background-size: cover;
+    position: absolute;
+
+}
+
+#basket img{
+    width: 120px;
+}
+
+#basket{
+    position: absolute;
+    bottom: 5vh;
+    left: 50vw;
+    z-index: 2;
+}
+
+.heading h1{
+    padding-top: 30px;
+    place-self: center;
+    color: rgb(4, 23, 39);
+    background-color: azure; 
+    padding: 20px;
+}
+
+.game {
+    background-image: url('brick.jpeg');
+    height: 100vh;
+    margin:0px;
+}
+
+.first {
+    visibility: none;
+}
+
+#play {
+    border-radius: 20px;
+    font-size:20px;
+    padding:10px;
+}
+
+.playbutton {
+    display: flex;
+    justify-content: center;
+}
+
+#scoreboard{
+    display: flex;
+    justify-content: center;
+}
diff --git a/New folder (3)/.vscode/settings.json b/New folder (3)/.vscode/settings.json
@@ -0,0 +1,3 @@
+{
+    "liveServer.settings.port": 5501
+}
diff --git a/New folder (3)/index3.html b/New folder (3)/index3.html
@@ -0,0 +1,21 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>e-commerce site</title>
+    <link rel="stylesheet" href="style3.css">
+</head>
+<body>
+    <div class="flex"><div class="heading"><h1>E-COMMERCE</h1></div>
+    <div class="flex1" ><input type="text" id="tab" placeholder="category name">
+    <button id="searchbut">search</button></div>
+
+    <div class="flex2" ><input type="text" id="tab2" placeholder="tag name">
+    <button id="searchbut2">search</button></div>
+     </div>
+    <div class="mainbody"><div class="categories"><h3>Choose A Category</h3></div>
+    <div class="items"></div></div>
+    <script src="script3.js"></script>
+</body>
+</html>
diff --git a/New folder (3)/script3.js b/New folder (3)/script3.js
@@ -0,0 +1,65 @@
+const catecont = document.querySelector('.categories');
+const itemscont = document.querySelector('.items');
+
+async function fetching() {
+      const [categoryres, itemres] = await Promise.all([
+    fetch("http://43.205.110.71:8000/categories"),
+    fetch("http://43.205.110.71:8000/items")
+  ]);
+    const categories = await categoryres.json() ; 
+    const items = await itemres.json();
+
+   function showitems(items) {
+    itemscont.innerHTML = "";
+    items.forEach((item) =>{
+       const itemcont = document.createElement("div");
+       itemcont.innerHTML = 
+
+       `<img src="https://picsum.photos/seed/${item.id}/200/200">
+       <h3>${item.name}</h3>
+       <h4>price: ${item.price}</h4>`;
+
+     itemcont.className = "item";
+     itemscont.append(itemcont);
+     console.log("hello");
+    });
+
+   }
+
+    showitems(items);
+
+
+    categories.forEach (category => {
+        const btn1 = document.createElement("button");
+        btn1.innerText = category.category ;
+        btn1.className = "btnclass";
+        catecont.append(btn1);
+
+        const itemcate = items.filter(item => item.category === category.category);
+
+        btn1.onclick = () => {
+         showitems(itemcate);
+        };
+    })
+
+    const tab = document.getElementById("tab");
+const searchbut = document.getElementById("searchbut");
+
+searchbut.onclick = () => {
+    const itemcate = items.filter(item => item.category === tab.value);
+     showitems(itemcate);
+     console.log(tab.value);
+}
+
+     const tab2 = document.getElementById("tab2");
+const searchbut2 = document.getElementById("searchbut2");
+
+searchbut2.onclick = () => {
+     const itemtag = items.filter(item => item.tags.includes(tab2.value));
+     showitems(itemtag);
+     console.log(tab2.value);
+}
+
+}
+
+fetching();
diff --git a/New folder (3)/style3.css b/New folder (3)/style3.css
@@ -0,0 +1,66 @@
+* {
+    margin:0;
+    padding:0;
+    font-family: 'Inter', sans-serif;
+    font-weight: 100;
+}
+
+.categories{
+    display:flex;
+    flex-direction: column;
+    width: 20vw;
+    border-right : 10px black;
+    height: 100vh;
+}
+
+.item{
+    background-color: rgb(182, 222, 222);
+    padding: 10px;
+    margin:10px;
+    border-radius: 10px;
+    width:200px;
+}
+
+.items{
+    display: flex;
+    flex-wrap: wrap;
+    width:80vw;
+}
+
+.btnclass{
+    width: 20vw;
+    font-size:20px;
+}
+
+.flex{
+    display: flex;
+    justify-content: space-between;
+    align-content: flex-end;
+}
+
+.flex1{
+    display: flex;
+    gap:10px;
+    height: 20px;
+    margin-top:30px;
+}
+
+.flex2{
+    display: flex;
+    gap:10px;
+    height: 20px;
+    margin-top:30px;
+}
+
+#tab{
+    width:300px;
+}
+
+#tab2{
+    width:300px;
+}
+
+.mainbody {
+    display: flex;
+
+}
diff --git a/assign1/.vscode/settings.json b/assign1/.vscode/settings.json
@@ -0,0 +1,3 @@
+{
+    "liveServer.settings.port": 5501
+}