E commerce web application

Readme.md

@@ -0,0 +1,81 @@
+# Essential Stuff
+
+## Html import links
+
+Google font
+
+``` html
+<link rel="preconnect" href="https://fonts.googleapis.com">
+<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
+<link
+  href="https://fonts.googleapis.com/css2?family=Montserrat:wght@500;600;700;800&family=Poppins:wght@400;500;600;700&display=swap"
+  rel="stylesheet">
+```
+
+Ionicon
+
+``` html
+<script type="module" src="https://unpkg.com/ionicons@5.5.2/dist/ionicons/ionicons.esm.js"></script>
+<script nomodule src="https://unpkg.com/ionicons@5.5.2/dist/ionicons/ionicons.js"></script>
+```
+
+---
+
+## Colors
+
+``` css
+--united-nations-blue: hsl(214, 56%, 58%);
+--bright-navy-blue: hsl(214, 57%, 51%);
+--spanish-gray: hsl(0, 0%, 60%);
+--black-coral: hsl(225, 8%, 42%);
+--oxford-blue: hsl(208, 97%, 12%);
+--yale-blue: hsl(214, 72%, 33%);
+--blue-ncs: hsl(197, 100%, 36%);
+--gunmetal: hsl(206, 34%, 20%);
+--gainsboro: hsl(0, 0%, 88%);
+--cultured: hsl(0, 0%, 98%);
+--white: hsl(0, 0%, 100%);
+--black: hsl(0, 0%, 0%);
+--onyx: hsl(0, 0%, 25%);
+--jet: hsl(0, 0%, 20%);
+```
+
+## Typography
+
+``` css
+--ff-poppins: "Poppins", sans-serif;
+--ff-montserrat: "Montserrat", sans-serif;
+
+--fs-1: calc(20px + 3.5vw);
+--fs-2: calc(18px + 1.6vw);
+--fs-3: calc(16px + 0.45vw);
+--fs-4: 15px;
+--fs-5: 14px;
+--fs-6: 13px;
+--fs-7: 12px;
+--fs-8: 11px;
+
+--fw-500: 500;
+--fw-600: 600;
+--fw-700: 700;
+--fw-800: 800;
+```
+
+## Transition
+
+``` css
+--transition: 0.25s ease-in-out;
+```
+
+## Spacing
+
+``` css
+--section-padding: 60px;
+```
+
+## Border radius
+
+``` css
+--radius-15: 15px;
+--radius-25: 25px;
+```

app.js

@@ -0,0 +1,174 @@
+const wrapper = document.querySelector(".sliderWrapper");
+const menuItems = document.querySelectorAll(".menuItem");
+
+const products = [
+  {
+    id: 1,
+    title: "Nike",
+    price: 2500,
+    colors: [
+      {
+        code: "black",
+        img: "./img/air.png",
+      },
+      {
+        code: "darkblue",
+        img: "./img/air2.png",
+      },
+    ],
+  },
+  {
+    id: 2,
+    title: "Air Jordan",
+    price: 5000,
+    colors: [
+      {
+        code: "lightgray",
+        img: "./img/jordan.png",
+      },
+      {
+        code: "green",
+        img: "./img/jordan2.png",
+      },
+    ],
+  },
+  {
+    id: 3,
+    title: "Blazer",
+    price: 900,
+    colors: [
+      {
+        code: "lightgray",
+        img: "./img/blazer.png",
+      },
+      {
+        code: "green",
+        img: "./img/blazer2.png",
+      },
+    ],
+  },
+  {
+    id: 4,
+    title: "Crater",
+    price: 760,
+    colors: [
+      {
+        code: "black",
+        img: "./img/crater.png",
+      },
+      {
+        code: "lightgray",
+        img: "./img/crater2.png",
+      },
+    ],
+  },
+  {
+    id: 5,
+    title: "Athletic",
+    price: 500,
+    colors: [
+      {
+        code: "gray",
+        img: "./img/hippie.png",
+      },
+      {
+        code: "black",
+        img: "./img/hippie2.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";
+});
+
+// Sample array of products
+const product = [
+    { id: 1, name: 'Nike', category: 'Shoes' },
+    { id: 2, name: 'JORDAN', category: 'Shoes' },
+    { id: 3, name: 'BLAZER', category: 'Shoes' },
+    { id: 4, name: 'CRATER', category: 'Shoes' },
+    { id: 5, name: 'ATHLETIC', category: 'Shoes' },
+    // Add more products as needed
+  ];
+
+  // Function to perform search
+  function search() {
+    const searchTerm = document.getElementById('searchInput').value.toLowerCase();
+    const searchResults = products.filter(product => {
+      return product.name.toLowerCase().includes(searchTerm) || product.category.toLowerCase().includes(searchTerm);
+    });
+
+    displayResults(searchResults);
+  }
+
+  // Function to display search results
+  function displayResults(results) {
+    const searchResultsDiv = document.getElementById('searchResults');
+    searchResultsDiv.innerHTML = '';
+
+    if (results.length === 0) {
+      searchResultsDiv.innerHTML = '<p>No results found.</p>';
+    } else {
+      results.forEach(result => {
+        const resultDiv = document.createElement('div');
+        resultDiv.innerHTML = `<p>${result.name} - ${result.category}</p>`;
+        searchResultsDiv.appendChild(resultDiv);
+      });
+    }
+  }
+