├── src ├── App.css ├── assets │ ├── avatar.png │ ├── StudentInfo.json │ └── lws-logo-en.svg ├── App.jsx ├── main.jsx ├── Components │ ├── Header │ │ ├── Header.jsx │ │ ├── Navbar │ │ │ └── Navbar.jsx │ │ └── Banner │ │ │ └── Banner.jsx │ ├── Body │ │ └── Body.jsx │ ├── Footer │ │ └── Footer.jsx │ └── Main │ │ ├── Main.jsx │ │ ├── StudentsTable │ │ ├── ClassTwo │ │ │ └── ClassTwo.jsx │ │ ├── ClassOne │ │ │ └── ClassOne.jsx │ │ └── StudentsTable.jsx │ │ └── SearchBox │ │ └── SearchBox.jsx └── index.css ├── README.md ├── postcss.config.js ├── vite.config.js ├── tailwind.config.js ├── .gitignore ├── index.html ├── .eslintrc.cjs ├── package.json └── public └── vite.svg /src/App.css: -------------------------------------------------------------------------------- 1 | 2 | -------------------------------------------------------------------------------- /README.md: -------------------------------------------------------------------------------- 1 | # Hazrat Ali 2 | -------------------------------------------------------------------------------- /src/assets/avatar.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Hazrat-Ali9/Student-Management-Frontend/HEAD/src/assets/avatar.png -------------------------------------------------------------------------------- /postcss.config.js: -------------------------------------------------------------------------------- 1 | export default { 2 | plugins: { 3 | tailwindcss: {}, 4 | autoprefixer: {}, 5 | }, 6 | } 7 | // postcss config -------------------------------------------------------------------------------- /vite.config.js: -------------------------------------------------------------------------------- 1 | import { defineConfig } from 'vite' 2 | import react from '@vitejs/plugin-react' 3 | 4 | // https://vitejs.dev/config/ 5 | export default defineConfig({ 6 | plugins: [react()], 7 | }) 8 | // Vite Config -------------------------------------------------------------------------------- /src/App.jsx: -------------------------------------------------------------------------------- 1 | // apps js 2 | import './App.css' 3 | import Body from './Components/Body/Body' 4 | 5 | 6 | function App() { 7 | 8 | 9 | return ( 10 | <> 11 | 12 | 13 | ) 14 | } 15 | 16 | export default App 17 | -------------------------------------------------------------------------------- /tailwind.config.js: -------------------------------------------------------------------------------- 1 | /** @type {import('tailwindcss').Config} */ 2 | export default { 3 | content: [ 4 | "./index.html", 5 | "./src/**/*.{js,ts,jsx,tsx}", 6 | ], 7 | theme: { 8 | extend: {}, 9 | }, 10 | plugins: [], 11 | } 12 | 13 | // Tailwind Css -------------------------------------------------------------------------------- /src/main.jsx: -------------------------------------------------------------------------------- 1 | // main js 2 | import React from 'react' 3 | import ReactDOM from 'react-dom/client' 4 | import App from './App.jsx' 5 | import './index.css' 6 | 7 | ReactDOM.createRoot(document.getElementById('root')).render( 8 | 9 | 10 | , 11 | ) 12 | 13 | 14 | -------------------------------------------------------------------------------- /src/Components/Header/Header.jsx: -------------------------------------------------------------------------------- 1 | import Banner from "./Banner/Banner"; 2 | import Navbar from "./Navbar/Navbar"; 3 | 4 | // Header Js 5 | const Header = () => { 6 | return ( 7 |
8 | 9 | 10 |
11 | ); 12 | }; 13 | 14 | export default Header; -------------------------------------------------------------------------------- /.gitignore: -------------------------------------------------------------------------------- 1 | # Logs 2 | logs 3 | *.log 4 | npm-debug.log* 5 | yarn-debug.log* 6 | yarn-error.log* 7 | pnpm-debug.log* 8 | lerna-debug.log* 9 | # gitignore 10 | node_modules 11 | dist 12 | dist-ssr 13 | *.local 14 | 15 | # Editor directories and files 16 | .vscode/* 17 | !.vscode/extensions.json 18 | .idea 19 | .DS_Store 20 | *.suo 21 | *.ntvs* 22 | *.njsproj 23 | *.sln 24 | *.sw? 25 | -------------------------------------------------------------------------------- /src/Components/Body/Body.jsx: -------------------------------------------------------------------------------- 1 | import Footer from "../Footer/Footer"; 2 | import Header from "../Header/Header"; 3 | import Main from "../Main/Main"; 4 | 5 | // Body Js 6 | const Body = () => { 7 | return ( 8 |
9 |
10 |
11 | 12 |
13 | ); 14 | }; 15 | 16 | export default Body; -------------------------------------------------------------------------------- /src/Components/Footer/Footer.jsx: -------------------------------------------------------------------------------- 1 | 2 | // Footer js 3 | const Footer = () => { 4 | return ( 5 | 12 | ); 13 | }; 14 | 15 | export default Footer; -------------------------------------------------------------------------------- /index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | Student management 8 | 9 | 10 | 11 |
12 | 13 | 14 | 15 | 16 | -------------------------------------------------------------------------------- /src/Components/Main/Main.jsx: -------------------------------------------------------------------------------- 1 | // Main js 2 | import SearchBox from './SearchBox/SearchBox'; 3 | import StudentsTable from './StudentsTable/StudentsTable'; 4 | 5 | const Main = () => { 6 | return ( 7 |
8 | 9 |
10 | 11 | 12 |
13 | 14 |
15 | ); 16 | }; 17 | 18 | export default Main; -------------------------------------------------------------------------------- /src/index.css: -------------------------------------------------------------------------------- 1 | @tailwind base; 2 | @tailwind components; 3 | @tailwind utilities; 4 | 5 | 6 | 7 | @layer components { 8 | .animate-updown { 9 | animation-name: animate-updownAnim; 10 | animation-duration: 2s; 11 | animation-iteration-count: infinite; 12 | animation-direction: alternate-reverse; 13 | } 14 | 15 | @keyframes animate-updownAnim { 16 | from { 17 | transform: translateY(-20px); 18 | } 19 | to { 20 | transform: translateY(20px); 21 | } 22 | } 23 | } -------------------------------------------------------------------------------- /.eslintrc.cjs: -------------------------------------------------------------------------------- 1 | module.exports = { 2 | root: true, 3 | env: { browser: true, es2020: true }, 4 | extends: [ 5 | 'eslint:recommended', 6 | 'plugin:react/recommended', 7 | 'plugin:react/jsx-runtime', 8 | 'plugin:react-hooks/recommended', 9 | ], 10 | ignorePatterns: ['dist', '.eslintrc.cjs'], 11 | parserOptions: { ecmaVersion: 'latest', sourceType: 'module' }, 12 | settings: { react: { version: '18.2' } }, 13 | plugins: ['react-refresh'], 14 | rules: { 15 | 'react-refresh/only-export-components': [ 16 | 'warn', 17 | { allowConstantExport: true }, 18 | ], 19 | }, 20 | } 21 | 22 | // Eslintrc 23 | -------------------------------------------------------------------------------- /src/Components/Main/StudentsTable/ClassTwo/ClassTwo.jsx: -------------------------------------------------------------------------------- 1 | /* eslint-disable react/prop-types */ 2 | const ClassTwo = ({informationForTwo,index}) => { 3 | // Class two 4 | const {name,grade,percentage} = informationForTwo; 5 | 6 | return ( 7 | 8 | 9 | {index +1} 10 | 11 |
12 | {name} 13 |
14 | 15 | {grade} 16 | {percentage}% 17 | 18 | 19 | ); 20 | }; 21 | 22 | export default ClassTwo; 23 | -------------------------------------------------------------------------------- /src/Components/Main/StudentsTable/ClassOne/ClassOne.jsx: -------------------------------------------------------------------------------- 1 | /* eslint-disable react/prop-types */ 2 | 3 | // Class One Js 4 | const ClassOne = ({informationForOne,index}) => { 5 | 6 | const {name,grade,percentage} = informationForOne; 7 | 8 | return ( 9 | 10 | 11 | {index +1} 12 | 13 |
14 |

{name}

15 |
16 | 17 | {grade} 18 | {percentage}% 19 | 20 | 21 | ); 22 | }; 23 | 24 | export default ClassOne; 25 | -------------------------------------------------------------------------------- /package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "assignment-1", 3 | "private": true, 4 | "version": "0.0.0", 5 | "type": "module", 6 | "scripts": { 7 | "dev": "vite", 8 | "build": "vite build", 9 | "lint": "eslint . --ext js,jsx --report-unused-disable-directives --max-warnings 0", 10 | "preview": "vite preview" 11 | }, 12 | "dependencies": { 13 | "react": "^18.2.0", 14 | "react-dom": "^18.2.0" 15 | }, 16 | "devDependencies": { 17 | "@types/react": "^18.2.43", 18 | "@types/react-dom": "^18.2.17", 19 | "@vitejs/plugin-react": "^4.2.1", 20 | "autoprefixer": "^10.4.17", 21 | "eslint": "^8.55.0", 22 | "eslint-plugin-react": "^7.33.2", 23 | "eslint-plugin-react-hooks": "^4.6.0", 24 | "eslint-plugin-react-refresh": "^0.4.5", 25 | "postcss": "^8.4.33", 26 | "tailwindcss": "^3.4.1", 27 | "vite": "^5.0.8" 28 | } 29 | } 30 | -------------------------------------------------------------------------------- /src/Components/Header/Navbar/Navbar.jsx: -------------------------------------------------------------------------------- 1 | 2 | // Nabbar js 3 | const Navbar = () => { 4 | return ( 5 | <> 6 | 24 | 25 | ); 26 | }; 27 | 28 | export default Navbar; -------------------------------------------------------------------------------- /src/Components/Header/Banner/Banner.jsx: -------------------------------------------------------------------------------- 1 | const Banner = () => { 2 | return ( 3 | 4 |
5 | 6 |
7 | 8 |
9 | 10 | Banner 17 | 18 |
19 |

20 | The Future of Learning starts with students at the center 21 |

22 | 23 | Learn More 24 | 25 | 26 |
27 | 28 |
29 |
30 |
31 | 32 | ); 33 | }; 34 | // Banner js 35 | export default Banner; 36 | -------------------------------------------------------------------------------- /public/vite.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /src/Components/Main/StudentsTable/StudentsTable.jsx: -------------------------------------------------------------------------------- 1 | import ClassOne from "./ClassOne/ClassOne"; 2 | import ClassTwo from "./ClassTwo/ClassTwo"; 3 | import studentINfo from "../../../assets/StudentInfo.json"; 4 | import { useState, useEffect } from "react"; 5 | // Student Table js 6 | const StudentsTable = () => { 7 | const [classOneInfo, setClassOneInfo] = useState(studentINfo[0]); 8 | const [classTwoInfo, setClassTwoInfo] = useState(studentINfo[1]); 9 | 10 | console.log(classTwoInfo); 11 | 12 | useEffect(() => { 13 | const newClassOneInfo = classOneInfo 14 | .slice() 15 | .sort((a, b) => b.percentage - a.percentage); 16 | setClassOneInfo(newClassOneInfo); 17 | }, []); 18 | 19 | useEffect(() => { 20 | const newClassTwoInfo = classTwoInfo 21 | .slice() 22 | .sort((a, b) => b.percentage - a.percentage); 23 | setClassTwoInfo(newClassTwoInfo); 24 | }, []); 25 | 26 | return ( 27 |
28 | 29 | 30 | 31 | 34 | 37 | 38 | 39 | 40 | 41 | 42 | 43 | 44 | 47 | 48 | 49 | 50 | { 51 | classOneInfo.map((informationForOne,index)=> ) 52 | } 53 | 54 | 55 | 58 | 59 | 60 | { 61 | classTwoInfo.map((informationForTwo,index)=> ) 62 | } 63 | 64 |
32 | ID 33 | 35 | Name 36 | ScoresPercentage
45 | Class One 46 |
56 | Class Two 57 |
65 |
66 | ); 67 | }; 68 | 69 | export default StudentsTable; 70 | -------------------------------------------------------------------------------- /src/Components/Main/SearchBox/SearchBox.jsx: -------------------------------------------------------------------------------- 1 | // SearchBox 2 | 3 | const SearchBox = () => { 4 | return ( 5 |
6 |

7 | Students of the Year 8 |

9 | 10 |
11 |
12 |
15 | 22 | 43 |
44 |
45 |
46 | 47 |
48 | ); 49 | }; 50 | 51 | export default SearchBox; -------------------------------------------------------------------------------- /src/assets/StudentInfo.json: -------------------------------------------------------------------------------- 1 | [ 2 | [ 3 | { 4 | "student_id": 1, 5 | "name": "John Doe", 6 | "grade": "A", 7 | "percentage": 90.5 8 | }, 9 | { 10 | "student_id": 2, 11 | "name": "Jane Smith", 12 | "grade": "B", 13 | "percentage": 78.2 14 | }, 15 | { 16 | "student_id": 3, 17 | "name": "Bob Johnson", 18 | "grade": "C", 19 | "percentage": 65.8 20 | }, 21 | { 22 | "student_id": 4, 23 | "name": "Alice Williams", 24 | "grade": "A", 25 | "percentage": 92.7 26 | }, 27 | { 28 | "student_id": 5, 29 | "name": "Charlie Brown", 30 | "grade": "B", 31 | "percentage": 84.3 32 | }, 33 | { 34 | "student_id": 6, 35 | "name": "John cena", 36 | "grade": "A", 37 | "percentage": 90.5 38 | }, 39 | { 40 | "student_id": 7, 41 | "name": "Jane wick", 42 | "grade": "B", 43 | "percentage": 78.2 44 | }, 45 | { 46 | "student_id": 8, 47 | "name": "akram sakib", 48 | "grade": "C", 49 | "percentage": 65.8 50 | }, 51 | { 52 | "student_id": 9, 53 | "name": "Fahim Islam", 54 | "grade": "A", 55 | "percentage": 92.7 56 | }, 57 | { 58 | "student_id": 10, 59 | "name": "Hazrat Ali", 60 | "grade": "B", 61 | "percentage": 84.3 62 | } 63 | ], 64 | 65 | [ 66 | 67 | { 68 | "student_id": 101, 69 | "name": "Emily Davis", 70 | "grade": "B+", 71 | "percentage": 88.9 72 | }, 73 | { 74 | "student_id": 102, 75 | "name": "Michael Johnson", 76 | "grade": "A-", 77 | "percentage": 91.2 78 | }, 79 | { 80 | "student_id": 103, 81 | "name": "Sophia Martinez", 82 | "grade": "C+", 83 | "percentage": 76.5 84 | }, 85 | { 86 | "student_id": 104, 87 | "name": "Daniel White", 88 | "grade": "A+", 89 | "percentage": 95.8 90 | }, 91 | { 92 | "student_id": 105, 93 | "name": "Olivia Wilson", 94 | "grade": "B", 95 | "percentage": 82.4 96 | }, 97 | { 98 | "student_id": 101, 99 | "name": " Davis emily", 100 | "grade": "B+", 101 | "percentage": 88.9 102 | }, 103 | { 104 | "student_id": 102, 105 | "name": "Michael jackson", 106 | "grade": "A-", 107 | "percentage": 91.2 108 | }, 109 | { 110 | "student_id": 103, 111 | "name": "Sophia white", 112 | "grade": "C+", 113 | "percentage": 76.5 114 | }, 115 | { 116 | "student_id": 104, 117 | "name": "Daniel Martinez", 118 | "grade": "A+", 119 | "percentage": 95.8 120 | }, 121 | { 122 | "student_id": 105, 123 | "name": "Olive oil", 124 | "grade": "B", 125 | "percentage": 82.4 126 | } 127 | 128 | ] 129 | ] 130 | -------------------------------------------------------------------------------- /src/assets/lws-logo-en.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12 | 13 | 14 | 15 | 16 | 17 | 18 | 19 | 20 | 21 | 22 | 23 | 24 | 25 | 26 | 27 | 28 | 29 | 30 | 31 | 32 | --------------------------------------------------------------------------------