Majd hussein react w1

week1/project/TO_DO.md

@@ -0,0 +1,11 @@
+# TO-DO List
+
+-
+- Create a Product component ✔
+- button component ✔
+- product list from the product component ✔
+- responsive ✔
+- all categ. buttons ✔
+- disable other cat. >>> not disable just keep the button highlighted ✔
+- deploy the app ✔
+- function >> when i press a button of categ. it will show only the same ones (filter) ✔

week1/project/ecommerce/.gitignore

@@ -0,0 +1,24 @@
+# Logs
+logs
+*.log
+npm-debug.log*
+yarn-debug.log*
+yarn-error.log*
+pnpm-debug.log*
+lerna-debug.log*
+
+node_modules
+dist
+dist-ssr
+*.local
+
+# Editor directories and files
+.vscode/*
+!.vscode/extensions.json
+.idea
+.DS_Store
+*.suo
+*.ntvs*
+*.njsproj
+*.sln
+*.sw?

week1/project/ecommerce/README.md

@@ -0,0 +1,16 @@
+# React + Vite
+
+This template provides a minimal setup to get React working in Vite with HMR and some ESLint rules.
+
+Currently, two official plugins are available:
+
+- [@vitejs/plugin-react](https://github.com/vitejs/vite-plugin-react/blob/main/packages/plugin-react) uses [Babel](https://babeljs.io/) (or [oxc](https://oxc.rs) when used in [rolldown-vite](https://vite.dev/guide/rolldown)) for Fast Refresh
+- [@vitejs/plugin-react-swc](https://github.com/vitejs/vite-plugin-react/blob/main/packages/plugin-react-swc) uses [SWC](https://swc.rs/) for Fast Refresh
+
+## React Compiler
+
+The React Compiler is not enabled on this template because of its impact on dev & build performances. To add it, see [this documentation](https://react.dev/learn/react-compiler/installation).
+
+## Expanding the ESLint configuration
+
+If you are developing a production application, we recommend using TypeScript with type-aware lint rules enabled. Check out the [TS template](https://github.com/vitejs/vite/tree/main/packages/create-vite/template-react-ts) for information on how to integrate TypeScript and [`typescript-eslint`](https://typescript-eslint.io) in your project.

week1/project/ecommerce/components/category.jsx

@@ -0,0 +1,58 @@
+import React from "react";
+
+function CategoryBtn(props) {
+  // onClick:
+  let isClicked = false;
+  let buttunsArr = [];
+  const buttonClick = (event) => {
+    const button = event.target.id;
+    const products = document.querySelectorAll(".product-item");
+    // console.log(products);
+
+    // if pressed the same button twice
+    if (buttunsArr.includes(button)) {
+      products.forEach((product) => {
+        product.style.display = "block";
+      });
+      buttunsArr = [];
+      isClicked = false;
+      return;
+    }
+    buttunsArr.push(button);
+    console.log("button ++++", buttunsArr);
+    isClicked = true;
+
+    products.forEach((product) => {
+      if (product.id !== button) {
+        product.style.display = "none";
+      } else {
+        product.style.display = "block";
+      }
+    });
+
+    console.log("isClicked status:", isClicked);
+    console.log("Button clicked >> [", button, "]");
+  };
+
+  //
+  const { allCategories = [] } = props;
+  return (
+    <div className="fixed top-0 left-0 right-0 z-50 bg-white/80 backdrop-blur-md p-4 flex flex-wrap justify-center gap-2 shadow-sm">
+      {allCategories.map((category) => {
+        return (
+          <button
+            id={category.replace("FAKE: ", "")}
+            key={category}
+            className="rounded-md bg-green-500 py-2 px-4 text-sm text-white hover:bg-green-700 transition-all"
+            type="button"
+            onClick={buttonClick}
+          >
+            {category.replace("FAKE: ", "")}
+          </button>
+        );
+      })}
+    </div>
+  );
+}
+
+export default CategoryBtn;

week1/project/ecommerce/components/product.jsx

@@ -0,0 +1,43 @@
+import React from "react";
+
+export default function Product(props) {
+  const { allProducts = [] } = props;
+
+  return (
+    <div className="pt-40 pb-10 px-4 grid gap-6 grid-cols-1 sm:grid-cols-2 md:grid-cols-2 lg:grid-cols-3 xl:grid-cols-4 max-w-7xl mx-auto">
+      {allProducts.map((product) => {
+        return (
+          <div
+            id={product.category}
+            key={product.id}
+            className="product-item flex flex-col h-full bg-white border border-slate-200 rounded-lg shadow-sm transition duration-300 hover:shadow-lg hover:-translate-y-1"
+          >
+            <div className="relative h-48 m-2.5 overflow-hidden rounded-md flex justify-center items-center bg-gray-50">
+              <img
+                src={product.image}
+                alt="card-image"
+                class="max-h-full object-contain"
+              />
+            </div>
+            <div className="p-4 flex-grow">
+              <h6 className="mb-2 text-slate-800 text-lg font-semibold line-clamp-2">
+                {product.title.replace("Fake: ", "")}
+              </h6>
+              <p className="text-slate-600 text-sm font-light line-clamp-3">
+                {product.description}
+              </p>
+            </div>
+            <div className="p-4 pt-0">
+              <button
+                className="w-full rounded-md bg-green-500 py-2 text-sm text-white hover:bg-slate-700 transition-all"
+                type="button"
+              >
+                Buy Now
+              </button>
+            </div>
+          </div>
+        );
+      })}
+    </div>
+  );
+}

week1/project/ecommerce/eslint.config.js

@@ -0,0 +1,29 @@
+import js from '@eslint/js'
+import globals from 'globals'
+import reactHooks from 'eslint-plugin-react-hooks'
+import reactRefresh from 'eslint-plugin-react-refresh'
+import { defineConfig, globalIgnores } from 'eslint/config'
+
+export default defineConfig([
+  globalIgnores(['dist']),
+  {
+    files: ['**/*.{js,jsx}'],
+    extends: [
+      js.configs.recommended,
+      reactHooks.configs.flat.recommended,
+      reactRefresh.configs.vite,
+    ],
+    languageOptions: {
+      ecmaVersion: 2020,
+      globals: globals.browser,
+      parserOptions: {
+        ecmaVersion: 'latest',
+        ecmaFeatures: { jsx: true },
+        sourceType: 'module',
+      },
+    },
+    rules: {
+      'no-unused-vars': ['error', { varsIgnorePattern: '^[A-Z_]' }],
+    },
+  },
+])

week1/project/ecommerce/index.html

@@ -0,0 +1,13 @@
+<!doctype html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <link rel="icon" type="image/svg+xml" href="/vite.svg" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <title>ecommerce</title>
+  </head>
+  <body>
+    <div id="root"></div>
+    <script type="module" src="/src/main.jsx"></script>
+  </body>
+</html>