Add all projects

src/components/sumiya/grade-calculator/GradeCalculator.jsx

@@ -0,0 +1,70 @@
+import { useTheme } from '../Hooks';
+import { useGrade } from './useGrade';
+
+export function GradeCalculator() {
+  const { resetGrade, calculateGrade, errorText, grade, marks, setMarks } =
+    useGrade();
+
+  const inputMarks = (event) => {
+    setMarks(event.target.value);
+  };
+
+  const { theme, toggleTheme } = useTheme(false);
+
+  return (
+    <div className={`p-3 bg-[#121212] text-[#EAEAEA]`}>
+      <div
+        className={`w-[70%] h-[85vh] m-[auto] flex flex-col items-center py-6 rounded-md shadow-2xl inset-shadow-sm',
+         ${theme ? 'bg-[#222222] text-[#EAEAEA]' : 'bg-gray-300 text-black'}`}
+      >
+        <h1 className="font-bold text-5xl text-center mb-16 ">
+          Grade Calculator
+        </h1>
+        <button
+          onClick={toggleTheme}
+          className={`
+            absolute top-[120px] right-[80px] rounded p-2 shadow-sm shadow-gray-300 text-white
+            ${theme ? ' bg-[#222222]' : ' '}`}
+        >
+          {theme ? 'Light Mode' : 'Dark Mode'}
+        </button>
+        <input
+          className={`border-2 py-2 px-4 w-[60%] rounded-md bg-zinc-700 text-center text-gray-300 text-[2vw],
+            ${errorText ? 'border-red-500' : 'border-zinc-700'} `}
+          type="number"
+          value={marks}
+          placeholder="Input your marks"
+          onChange={inputMarks}
+        />
+        {errorText && (
+          <p className="text-red-400 font-bold mt-2">{errorText}</p>
+        )}
+        <button
+          className="mt-4 text-[2vw] bg-slate-800 text-white py-1 px-2 rounded hover:bg-slate-900 transition"
+          onClick={() => calculateGrade()}
+        >
+          Calculate
+        </button>
+
+        {grade && (
+          <h2
+            className={`
+              text-4xl font-semibold text-center mt-6 py-6 px-8 rounded-md shadow-lg,
+              grade === 'F' && 'text-red-600'
+            `}
+          >
+            {grade}
+          </h2>
+        )}
+        <button
+          className="mt-4 text-[2vw] hover:bg-[#121212] text-white py-1 px-4 rounded-lg bg-[#171717] transition"
+          onClick={resetGrade}
+        >
+          <span className="material-symbols-outlined text-4xl hover:text-gray-500">
+            &#x21bb;
+          </span>
+        </button>
+      </div>
+    </div>
+  );
+}

src/components/sumiya/grade-calculator/index.js

@@ -0,0 +1,2 @@
+export * from './GradeCalculator';
+export * from './useGrade';

src/components/sumiya/grade-calculator/useGrade.jsx

@@ -0,0 +1,48 @@
+import { useState } from 'react';
+
+export const useGrade = () => {
+  const [grade, setGrade] = useState();
+  const [errorText, setErrorText] = useState();
+  const [marks, setMarks] = useState('');
+
+  const calculateGrade = () => {
+    const score = parseFloat(marks);
+
+    if (isNaN(score) || score > 100 || score < 0) {
+      setGrade('');
+      setErrorText('Please enter a valid input (0-100).');
+      return;
+    } else {
+      setErrorText('');
+    }
+    if (score >= 80) {
+      setGrade('A+');
+    } else if (score >= 70) {
+      setGrade('A');
+    } else if (score >= 60) {
+      setGrade('A-');
+    } else if (score >= 55) {
+      setGrade('B');
+    } else if (score >= 50) {
+      setGrade('B-');
+    } else if (score >= 40) {
+      setGrade('C');
+    } else {
+      setGrade('F');
+    }
+  };
+  const resetGrade = () => {
+    setErrorText('');
+    setGrade('');
+    setMarks('');
+  };
+
+  return {
+    resetGrade,
+    calculateGrade,
+    errorText,
+    grade,
+    marks,
+    setMarks,
+  };
+};

src/components/sumiya/index.js

@@ -1,4 +1,7 @@
 export * from './Hooks'
 export * from './themeContext'
 export * from './counter'
-export * from './number-comparator'
+export * from './number-comparator'
+export * from './grade-calculator'
+export * from './multiplication-table'
+export *from './render-products'

src/components/sumiya/multiplication-table/MultiplicationTable.jsx

@@ -0,0 +1,65 @@
+import useMultiplicationTable from './useMultiplicationTable';
+
+function MultiplicationTable() {
+ const { input, setInput, generateTable, resetTable, multiplicationTable, error} = useMultiplicationTable()
+   return (
+     <div className=" h-screen bg-gray-50 flex flex-col items-center justify-start py-4 ">
+       <div className="bg-gray-200 p-4 rounded-lg shadow-lg content-center">
+         <h1 className="text-2xl font-bold mb-4">Multiplication Table Generator</h1>
+         <input
+           type="number"
+           placeholder="Enter the Multiplicand Number"
+           className={`border p-2 text-center rounded w-full ${error && "border-red-500"}`}
+           value={input}
+           onChange={(e)=>{
+            setInput(e.target.value)}
+          }
+         />
+         <div className='flex justify-center gap-4'>
+         <button
+           className="mt-4 bg-blue-500 text-white py-2 px-4 rounded"
+           onClick={generateTable}
+         >
+           Generate Table
+         </button>
+         <button
+           className="mt-4 bg-slate-700 text-white py-2 px-4 rounded"
+           onClick={resetTable}
+         >
+           Reset Table
+         </button>
+         </div>
+        {error && <p className='text-red-400 text-center font-bold mt-2'>{error}</p>}
+         </div>
+    {multiplicationTable.length>0 && (
+       <table className="mt-4 bg-gray-200 w-[40vw] h-[60vh] rounded-lg shadow-2xl text-center">
+         <caption className="text-xl font-bold py-2 text-amber-800">Table of {multiplicationTable[0].multiplicand}</caption>
+         <thead>
+            <tr className="bg-gray-400">
+              <th>Multiplicand</th>
+              <th></th>
+              <th>Multiplier</th>
+              <th></th>
+              <th>Product</th>
+            </tr>
+            </thead>
+         <tbody>
+          {multiplicationTable.map((row, index)=>(
+        <tr key={index}>
+          <td>{row.multiplicand}</td>
+          <td>X</td>
+          <td>{row.multiplier}</td>
+          <td>=</td>
+          <td>{row.product}</td>
+          </tr> 
+    ))}
+    </tbody>
+      </table>
+    )}
+     </div>
+   );
+ }
+
+
+
+export default MultiplicationTable

src/components/sumiya/multiplication-table/index.js

@@ -0,0 +1,2 @@
+export * from './MultiplicationTable'
+export * from './useMultiplicationTable'

src/components/sumiya/multiplication-table/useMultiplicationTable.jsx

@@ -0,0 +1,44 @@
+import { useState } from 'react'
+
+function useMultiplicationTable() {
+
+    const [input, setInput] =useState();
+    const [multiplicationTable, setMultiplicationTable] = useState([]);
+    const [error, setError] = useState(null)
+
+    const generateTable = ()=>{
+    const num= Number(input);
+
+    if(!num || isNaN(num)){
+         setError("Enter a valid input")
+         setMultiplicationTable("")
+         return
+    }else{
+       setError("")
+    }
+    const Table = Array.from({length:10}, (_, i) => ({
+      multiplicand: num,
+      multiplier: i+1,
+      product: num*(i+1)
+    }))
+
+    setMultiplicationTable(Table)
+    }
+
+    const resetTable =() =>{
+      setError("");
+      setInput("");
+      setMultiplicationTable([]);
+    }
+
+  return {
+    input,
+    setInput,
+    generateTable,
+    resetTable,
+    multiplicationTable,
+    error,
+  }
+}
+
+export default useMultiplicationTable

src/components/sumiya/render-products/App.jsx

@@ -0,0 +1,36 @@
+import { useState } from 'react';
+import useData from './useData';
+
+
+export function App() {
+  const {loading, error, products} = useData()
+
+  const columns = products.length > 0 ? Object.keys(products[0]).filter((key) => key !== 'image') : [];
+
+
+   return (
+    <>
+     <div className=" flex items-center p-6 text-xl ">
+      {products && 
+        <table className='min-w-full bg-white shadow-lg rounded-lg'>
+        <thead className='bg-gray-200 px-6 py-3 text-left text-xl font-bold capitalize'>
+          {columns.map((column)=><th className='px-4 py-2'>{column}</th>)}
+        </thead>
+        <tbody>
+          {products.map((product)=>(
+           <tr key={product.name} className='hover:bg-gray-100 transition-colors'>
+            {columns.map((column)=>(<td className='px-4 py-2 border border-gray-200 capitalize '>{product[column]}</td>))}
+           </tr>
+             ))
+            }
+        </tbody>
+    </table>
+    }
+     </div>
+     <div>
+     {  loading == true && <div className='flex items-center justify-center text-xl '>Loading....</div> }
+     {error && <p>Error Fetching Data</p>}
+     </div> 
+     </>
+   );
+ }

src/components/sumiya/render-products/index.js

@@ -0,0 +1,2 @@
+export * from './App'
+export * from './useData'

src/components/sumiya/render-products/useData.jsx

@@ -0,0 +1,37 @@
+import { useEffect } from 'react';
+import { useState } from 'react';
+
+function useData() {
+    const url = 'https://mdn.github.io/learning-area/javascript/apis/fetching-data/can-store/products.json';
+    const [products, setProducts] = useState([]);
+    const [loading, setLoading] = useState(true);
+    const [error, setError] = useState(null);
+    useEffect(()=>{
+        const fetchData = async ()=>{
+          setLoading(true);
+          try{
+            const response = await fetch(url)
+            const data = await response.json()
+            setProducts(data)
+          }catch(error){
+            setError(error)
+          }finally{
+            setLoading(false)
+          }
+        }
+        fetchData()
+    }, [])
+
+    return {loading, products, error}
+
+}
+
+
+
+
+
+
+
+
+
+export default useData

src/data/index.js

@@ -23,19 +23,19 @@ export const projects = [
     id: 'grade-calculator',
     name: 'Grade Calculator',
     description: 'A simple grade calculator app.',
-    contributors: ['thanwin', 'promi','talha'],
+    contributors: ['thanwin', 'promi','talha','sumiya'],
   },
   {
     id: 'multiplication-table',
     name: 'Multiplication Table',
     description: 'A simple multiplication table app.',
-    contributors: ['talha'],
+    contributors: ['talha','sumiya'],
   },
   {
     id: 'render-products',
     name: 'Render Products',
     description: 'A simple product rendering app using useEffect hook.',
-    contributors: ['bongoDev', 'thanwin', 'promi','talha'],
+    contributors: ['bongoDev', 'thanwin', 'promi','talha','sumiya'],
   },
   {
     id: 'simple-ecommerce',

src/pages/sumiya/SumiyaProjectPage.jsx

@@ -1,5 +1,10 @@
 import { useParams } from 'react-router';
 import { Counter, NumberComparator, ThemeProvider } from '../../components/sumiya';
+import { GradeCalculator } from '../../components/sumiya/grade-calculator';
+import MultiplicationTable from '../../components/sumiya/multiplication-table/MultiplicationTable';
+import { App } from '../../components/sumiya/render-products';
+
+
 
 
 export const SumiyaProjectPage = () => {
@@ -11,6 +16,12 @@ export const SumiyaProjectPage = () => {
      <Counter/>,
      </ThemeProvider>,
      'number-comparator': <NumberComparator />,
+     'grade-calculator' : 
+     <ThemeProvider>
+     <GradeCalculator />
+     </ThemeProvider>,
+     'multiplication-table': <MultiplicationTable />,
+     'render-products': <App />
   };
 
   const selectedProject = componentMap[projectId];