Merge branch 'main' into Raghav-patch-1

Chayandas07 · Oct 24, 2023 · 4eb8768 · 4eb8768
2 parents 58c2f36 + 7e050f7
commit 4eb8768
Show file tree

Hide file tree

Showing 60 changed files with 30,661 additions and 2 deletions.
diff --git a/.talismanrc b/.talismanrc
@@ -0,0 +1,4 @@
+fileignoreconfig:
+- filename: Search Bar/yarn.lock
+  checksum: 3aa2a354bcdab7bc6969ff6cbc8ba618498bb208105009d18f57ad441ac2d061
+version: ""
diff --git a/AudioPlayer/audio-file.mp3 b/AudioPlayer/audio-file.mp3
diff --git a/AudioPlayer/audioPlayer.js b/AudioPlayer/audioPlayer.js
@@ -0,0 +1,35 @@
+document.addEventListener("DOMContentLoaded", function () {
+    const audio = document.getElementById("audio");
+    const playPauseButton = document.getElementById("playPause");
+    const stopButton = document.getElementById("stop");
+    const volumeUpButton = document.getElementById("volumeUp");
+    const volumeDownButton = document.getElementById("volumeDown");
+
+    playPauseButton.addEventListener("click", function () {
+        if (audio.paused) {
+            audio.play();
+            playPauseButton.innerHTML = "Pause";
+        } else {
+            audio.pause();
+            playPauseButton.innerHTML = "Play";
+        }
+    });
+
+    stopButton.addEventListener("click", function () {
+        audio.pause();
+        audio.currentTime = 0;
+        playPauseButton.innerHTML = "Play";
+    });
+
+    volumeUpButton.addEventListener("click", function () {
+        if (audio.volume < 1.0) {
+            audio.volume += 0.1;
+        }
+    });
+
+    volumeDownButton.addEventListener("click", function () {
+        if (audio.volume > 0.0) {
+            audio.volume -= 0.1;
+        }
+    });
+});
diff --git a/AudioPlayer/index.html b/AudioPlayer/index.html
@@ -0,0 +1,22 @@
+<!DOCTYPE html>
+<html>
+
+<head>
+    <title>Simple Audio Player</title>
+</head>
+
+<body>
+    <h1>Simple Audio Player</h1>
+    <audio id="audio" controls>
+        <source src="audio-file.mp3" type="audio/mpeg">
+        Your browser does not support the audio element.
+    </audio>
+    <button id="playPause">Play/Pause</button>
+    <button id="stop">Stop</button>
+    <button id="volumeUp">Volume Up</button>
+    <button id="volumeDown">Volume Down</button>
+
+    <script src="audioPlayer.js"></script>
+</body>
+
+</html>
diff --git a/Ecommerce/app.js b/Ecommerce/app.js
@@ -0,0 +1,137 @@
+const wrapper = document.querySelector(".sliderWrapper");
+const menuItems = document.querySelectorAll(".menuItem");
+
+const products = [
+  {
+    id: 1,
+    title: "Nike",
+    price: 119,
+    colors: [
+      {
+        code: "black",
+        img: "./img/nike.png",
+      },
+      {
+        code: "darkblue",
+        img: "./img/nike2.png",
+      },
+    ],
+  },
+  {
+    id: 2,
+    title: "Adidas",
+    price: 149,
+    colors: [
+      {
+        code: "lightgray",
+        img: "./img/adidas.png",
+      },
+      {
+        code: "green",
+        img: "./img/adidas2.png",
+      },
+    ],
+  },
+  {
+    id: 3,
+    title: "Puma",
+    price: 109,
+    colors: [
+      {
+        code: "lightgray",
+        img: "./img/puma.png",
+      },
+      {
+        code: "green",
+        img: "./img/puma2.png",
+      },
+    ],
+  },
+  {
+    id: 4,
+    title: "Reebok",
+    price: 129,
+    colors: [
+      {
+        code: "black",
+        img: "./img/reebok.png",
+      },
+      {
+       code: "lightgray",
+       img: "./img/reebok2.png",
+      },
+    ],
+  },
+  {
+    id: 5,
+    title: "Sketchers",
+    price: 99,
+    colors: [
+      {
+        code: "gray",
+        img: "./img/sketchers.png",
+      },
+      {
+        code: "black",
+        img: "./img/sketchers2.png",
+      },
+    ],
+  },
+];
+
+let choosenProduct = products[0];
+
+const currentProductImg = document.querySelector(".productImg");
+const currentProductTitle = document.querySelector(".productTitle");
+const currentProductPrice = document.querySelector(".productPrice");
+const currentProductColors = document.querySelectorAll(".color");
+const currentProductSizes = document.querySelectorAll(".size");
+
+menuItems.forEach((item, index) => {
+  item.addEventListener("click", () => {
+    //change the current slide
+    wrapper.style.transform = `translateX(${-100 * index}vw)`;
+
+    //change the choosen product
+    choosenProduct = products[index];
+
+    //change texts of currentProduct
+    currentProductTitle.textContent = choosenProduct.title;
+    currentProductPrice.textContent = "$" + choosenProduct.price;
+    currentProductImg.src = choosenProduct.colors[0].img;
+
+    //assing new colors
+    currentProductColors.forEach((color, index) => {
+      color.style.backgroundColor = choosenProduct.colors[index].code;
+    });
+  });
+});
+
+currentProductColors.forEach((color, index) => {
+  color.addEventListener("click", () => {
+    currentProductImg.src = choosenProduct.colors[index].img;
+  });
+});
+
+currentProductSizes.forEach((size, index) => {
+  size.addEventListener("click", () => {
+    currentProductSizes.forEach((size) => {
+      size.style.backgroundColor = "white";
+      size.style.color = "black";
+    });
+    size.style.backgroundColor = "black";
+    size.style.color = "white";
+  });
+});
+
+const productButton = document.querySelector(".productButton");
+const payment = document.querySelector(".payment");
+const close = document.querySelector(".close");
+
+productButton.addEventListener("click", () => {
+  payment.style.display = "flex";
+});
+
+close.addEventListener("click", () => {
+  payment.style.display = "none";
+});
diff --git a/Ecommerce/img/adidas.png b/Ecommerce/img/adidas.png
diff --git a/Ecommerce/img/adidas2.png b/Ecommerce/img/adidas2.png
diff --git a/Ecommerce/img/contact.png b/Ecommerce/img/contact.png
diff --git a/Ecommerce/img/facebook.png b/Ecommerce/img/facebook.png
diff --git a/Ecommerce/img/gift.png b/Ecommerce/img/gift.png
diff --git a/Ecommerce/img/instagram.png b/Ecommerce/img/instagram.png
diff --git a/Ecommerce/img/master.png b/Ecommerce/img/master.png
diff --git a/Ecommerce/img/nike.png b/Ecommerce/img/nike.png
diff --git a/Ecommerce/img/nike2.png b/Ecommerce/img/nike2.png
diff --git a/Ecommerce/img/puma.png b/Ecommerce/img/puma.png
diff --git a/Ecommerce/img/puma2.png b/Ecommerce/img/puma2.png
diff --git a/Ecommerce/img/reebok.png b/Ecommerce/img/reebok.png
diff --git a/Ecommerce/img/reebok2.png b/Ecommerce/img/reebok2.png
diff --git a/Ecommerce/img/return.png b/Ecommerce/img/return.png
diff --git a/Ecommerce/img/search.png b/Ecommerce/img/search.png
diff --git a/Ecommerce/img/shipping.png b/Ecommerce/img/shipping.png
diff --git a/Ecommerce/img/sketchers.png b/Ecommerce/img/sketchers.png
diff --git a/Ecommerce/img/sketchers2.png b/Ecommerce/img/sketchers2.png
diff --git a/Ecommerce/img/sneakers.png b/Ecommerce/img/sneakers.png
diff --git a/Ecommerce/img/twitter.png b/Ecommerce/img/twitter.png
diff --git a/Ecommerce/img/visa.png b/Ecommerce/img/visa.png
diff --git a/Ecommerce/img/whatsapp.png b/Ecommerce/img/whatsapp.png