fsad 1.0.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (11) hide show
  1. package/1 +52 -0
  2. package/10 +25 -0
  3. package/2 +81 -0
  4. package/3 +122 -0
  5. package/4 +75 -0
  6. package/5 +109 -0
  7. package/6 +134 -0
  8. package/7 +36 -0
  9. package/8 +56 -0
  10. package/9 +153 -0
  11. package/package.json +18 -0
package/1 ADDED
@@ -0,0 +1,52 @@
1
+ const express = require('express');
2
+ const app = express();
3
+ const port = 3000;
4
+ app.use(express.json());
5
+ let books = [
6
+ { id: 1, title: 'The Lord of the Rings', author: 'J.R.R.
7
+ Tolkien', price: 25.00, quantity: 10 },
8
+ { id: 2, title: 'Pride and Prejudice', author: 'Jane
9
+ Austen', price: 15.50, quantity: 5 },
10
+ { id: 3, title: 'To Kill a Mockingbird', author: 'Harper
11
+ Lee', price: 10.00, quantity: 7 }
12
+ ];
13
+ app.get('/books', (req, res) => {
14
+ res.status(200).json(books);
15
+ });
16
+ app.get('/books/:id', (req, res) => {
17
+ const book = books.find((b) => b.id === parseInt(req.params.id));
18
+ console.log(typeof(req.params.id)," ",book);
19
+ if(book){
20
+ res.status(200).json(book);
21
+ }else{
22
+ res.status(201).send(" book not found");
23
+ }
24
+ });
25
+ app.post('/books', (req, res) => {
26
+ const newBook = {
27
+ id : books.length + 1,
28
+ title:req.body.title,
29
+ author:req.body.author,
30
+ price:req.body.price,
31
+ quantity:req.body.quantity
32
+ };
33
+ books.push(newBook);
34
+ res.status(201).json(newBook);
35
+ });
36
+ app.patch('/books',(req,res,err)=>{
37
+ res.send("in the patch method");
38
+ });
39
+ app.put('/books',(req,res,err)=>{
40
+ res.send("in the put method");
41
+ });
42
+ app.delete('/books/:id', (req, res) => {
43
+ const initialLength = books.length;
44
+ books = books.filter(book => book.id !== parseInt(req.params.id));
45
+ if (books.length === initialLength) {
46
+ return res.status(404).json({ message: 'Book not found' });
47
+ }
48
+ res.status(200).json({ message: 'Book deleted successfully' });
49
+ });
50
+ app.listen(port, () => {
51
+ console.log(`Server is running on http://localhost:${port}`);
52
+ });
package/10 ADDED
@@ -0,0 +1,25 @@
1
+ import React from "react";
2
+ import { BrowserRouter as Router, Routes, Route } from "react-router-dom";
3
+ import Navbar from "./components/Navbar";
4
+ import Home from "./pages/Home";
5
+ import About from "./pages/About";
6
+ import Contact from "./pages/Contact";
7
+
8
+ function App() {
9
+ return (
10
+ <Router>
11
+ <div>
12
+ <Navbar />
13
+ <div style={{ padding: "20px" }}>
14
+ <Routes>
15
+ <Route path="/" element={<Home />} />
16
+ <Route path="/about" element={<About />} />
17
+ <Route path="/contact" element={<Contact />} />
18
+ </Routes>
19
+ </div>
20
+ </div>
21
+ </Router>
22
+ );
23
+ }
24
+
25
+ export default App;
package/2 ADDED
@@ -0,0 +1,81 @@
1
+ <!DOCTYPE html>
2
+ <html lang="en">
3
+ <head>
4
+ <meta charset="UTF-8">
5
+ <meta name="viewport" content="width=device-width, initial-scale=1.0">
6
+ <title>Student Information</title>
7
+ <style>
8
+ body { font-family: Arial, sans-serif; padding: 20px; }
9
+ .container { max-width: 500px; margin: auto; }
10
+ h2 { text-align: center; }
11
+ form { margin-bottom: 20px; border: 1px solid #ccc; padding: 20px;
12
+ border-radius: 8px; }
13
+ label { display: block; margin-bottom: 5px; }
14
+ input[type="text"] { width: 100%; padding: 8px; margin-bottom: 10px;
15
+ box-sizing: border-box; }
16
+ button { padding: 10px 15px; cursor: pointer; }
17
+ .output { margin-top: 20px; padding: 15px; border: 1px solid #007BFF;
18
+ background-color: #e6f2ff; border-radius: 8px; }
19
+ </style>
20
+ </head>
21
+ <body>
22
+ <div class="container">
23
+ <h2>Student Information Form</h2>
24
+ <form action="/submit-get" method="get">
25
+ <h3>Using GET Method</h3>
26
+ <label for="name-get">Name:</label>
27
+ <input type="text" id="name-get" name="name" required>
28
+ <label for="branch-get">Branch:</label>
29
+ <input type="text" id="branch-get" name="branch" required>
30
+ <label for="semester-get">Semester:</label>
31
+ <input type="text" id="semester-get" name="semester" required>
32
+ <button type="submit">Submit (GET)</button>
33
+ </form>
34
+ <form action="/submit-post" method="post">
35
+ <h3>Using POST Method</h3>
36
+ <label for="name-post">Name:</label>
37
+ <input type="text" id="name-post" name="name" required>
38
+ <label for="branch-post">Branch:</label>
39
+ <input type="text" id="branch-post" name="branch" required>
40
+ <label for="semester-post">Semester:</label>
41
+ <input type="text" id="semester-post" name="semester" required>
42
+ <button type="submit">Submit (POST)</button>
43
+ </form>
44
+ </div>
45
+ </body>
46
+ </html>
47
+
48
+ const express = require('express');
49
+ const path = require('path');
50
+ const app = express();
51
+ const port = 3000;
52
+ app.use(express.static(path.join(__dirname)));
53
+ app.use(express.urlencoded({ extended: true }));
54
+ app.get('/submit-get', (req, res) => {
55
+ const name = req.query.name;
56
+ const branch = req.query.branch;
57
+ const semester = req.query.semester;
58
+ const htmlResponse = ` <h2>Student Information (GET)</h2>
59
+ <p>Name: <b>${name}</b></p>
60
+ <p>Branch: <u>${branch}</u></p>
61
+ <p>Semester: ${semester}</p>
62
+ <br> <a href="/">Go Back</a>`;
63
+ res.send(htmlResponse);
64
+ });
65
+ app.post('/submit-post', (req, res) => {
66
+ const name = req.body.name;
67
+ const branch = req.body.branch;
68
+ const semester = req.body.semester;
69
+ const htmlResponse = `
70
+ <h2>Student Information (POST)</h2>
71
+ <p>Name: <b>${name}</b></p>
72
+ <p>Branch: <u>${branch}</u></p>
73
+ <p>Semester: ${semester}</p>
74
+ <br>
75
+ <a href="/">Go Back</a>
76
+ `;
77
+ res.send(htmlResponse);
78
+ });
79
+ app.listen(port, () => {
80
+ console.log(`Server is listening at http://localhost:${port}`);
81
+ });
package/3 ADDED
@@ -0,0 +1,122 @@
1
+ import React from "react";
2
+
3
+ class EdTable extends React.Component {
4
+ render() {
5
+ const education = [
6
+ {
7
+ id: 1,
8
+ name: "National Public School",
9
+ place: "Bengaluru",
10
+ stddeg: "10th",
11
+ grade: "A+",
12
+ },
13
+ {
14
+ id: 2,
15
+ name: "Indian Institute of Science",
16
+ place: "Bengaluru",
17
+ stddeg: "Under Graduate",
18
+ grade: "9.8",
19
+ },
20
+ ];
21
+
22
+ const edudetails = education.map((educ) => (
23
+ <EdRow
24
+ key={educ.id}
25
+ id={educ.id}
26
+ name={educ.name}
27
+ place={educ.place}
28
+ stddeg={educ.stddeg}
29
+ grade={educ.grade}
30
+ />
31
+ ));
32
+
33
+ return (
34
+ <table border="1">
35
+ <thead>
36
+ <tr>
37
+ <th>ID</th>
38
+ <th>Name</th>
39
+ <th>Place</th>
40
+ <th>Education</th>
41
+ <th>Grade</th>
42
+ </tr>
43
+ </thead>
44
+ <tbody>{edudetails}</tbody>
45
+ </table>
46
+ );
47
+ }
48
+ }
49
+
50
+ class EdRow extends React.Component {
51
+ render() {
52
+ return (
53
+ <tr>
54
+ <td>{this.props.id}</td>
55
+ <td>{this.props.name}</td>
56
+ <td>{this.props.place}</td>
57
+ <td>{this.props.stddeg}</td>
58
+ <td>{this.props.grade}</td>
59
+ </tr>
60
+ );
61
+ }
62
+ }
63
+
64
+ class Education extends React.Component {
65
+ render() {
66
+ return (
67
+ <section>
68
+ <h2>Educational Details</h2>
69
+ <EdTable />
70
+ </section>
71
+ );
72
+ }
73
+ }
74
+
75
+ export default Education;
76
+
77
+
78
+ import React from "react";
79
+
80
+ class Resume_Header extends React.Component {
81
+ render() {
82
+ return <h1>Resume Details</h1>;
83
+ }
84
+ }
85
+
86
+ export default Resume_Header;
87
+
88
+
89
+ import React from "react";
90
+
91
+ class Resume_Person_Info extends React.Component {
92
+ render() {
93
+ return (
94
+ <div>
95
+ <p>Name : Prashanth K</p>
96
+ <p>Address : Kengeri</p>
97
+ <p>Phone No : 1234567890</p>
98
+ <p>Email : prashanthk@rvce.edu.in</p>
99
+ </div>
100
+ );
101
+ }
102
+ }
103
+
104
+ export default Resume_Person_Info;
105
+
106
+
107
+ import React from "react";
108
+ import ReactDOM from "react-dom/client";
109
+ import "./index.css";
110
+ import Resume_Header from "./ResumeCreate/Resume_Header";
111
+ import Resume_Person_Info from "./ResumeCreate/Resume_Person_Info";
112
+ import Education from "./ResumeCreate/Educational";
113
+
114
+ const root = ReactDOM.createRoot(document.getElementById("root"));
115
+
116
+ root.render(
117
+ <React.StrictMode>
118
+ <Resume_Header />
119
+ <Resume_Person_Info />
120
+ <Education />
121
+ </React.StrictMode>
122
+ );
package/4 ADDED
@@ -0,0 +1,75 @@
1
+ import React, { useState } from "react";
2
+
3
+ // Student Component
4
+ function Student({ name, email }) {
5
+ return (
6
+ <div>
7
+ <h3>{name}</h3>
8
+ <p>{email}</p>
9
+ </div>
10
+ );
11
+ }
12
+
13
+ // Student List Component
14
+ function StudentList({ students }) {
15
+ return (
16
+ <div>
17
+ <h2>Registered Students</h2>
18
+ {students.map((student, index) => (
19
+ <Student key={index} name={student.name} email={student.email} />
20
+ ))}
21
+ </div>
22
+ );
23
+ }
24
+
25
+ // Registration Form Component
26
+ function RegistrationForm({ addStudent }) {
27
+ const [name, setName] = useState("");
28
+ const [email, setEmail] = useState("");
29
+
30
+ const handleSubmit = (e) => {
31
+ e.preventDefault();
32
+ addStudent({ name, email });
33
+ setName("");
34
+ setEmail("");
35
+ };
36
+
37
+ return (
38
+ <form onSubmit={handleSubmit}>
39
+ <input
40
+ type="text"
41
+ placeholder="Name"
42
+ value={name}
43
+ onChange={(e) => setName(e.target.value)}
44
+ required
45
+ />
46
+ <input
47
+ type="email"
48
+ placeholder="Email"
49
+ value={email}
50
+ onChange={(e) => setEmail(e.target.value)}
51
+ required
52
+ />
53
+ <button type="submit">Register</button>
54
+ </form>
55
+ );
56
+ }
57
+
58
+ // Main App Component
59
+ function App() {
60
+ const [students, setStudents] = useState([]);
61
+
62
+ const addStudent = (student) => {
63
+ setStudents([...students, student]);
64
+ };
65
+
66
+ return (
67
+ <div>
68
+ <h1>Student Registration Portal</h1>
69
+ <RegistrationForm addStudent={addStudent} />
70
+ <StudentList students={students} />
71
+ </div>
72
+ );
73
+ }
74
+
75
+ export default App;
package/5 ADDED
@@ -0,0 +1,109 @@
1
+ import React, { useState } from "react";
2
+
3
+ function RegistrationForm() {
4
+ const [formData, setFormData] = useState({
5
+ name: "",
6
+ email: "",
7
+ password: "",
8
+ });
9
+
10
+ const [errors, setErrors] = useState({});
11
+
12
+ // Regular Expressions
13
+ const nameRegex = /^[A-Za-z ]{2,}$/;
14
+ const emailRegex = /^[^\s@]+@[^\s@]+\.[^\s@]+$/;
15
+ const passwordRegex = /^(?=.*[a-z])(?=.*[A-Z])(?=.*\d)(?=.*[@$!%*?&]).{8,}$/;
16
+
17
+ const handleChange = (e) => {
18
+ const { name, value } = e.target;
19
+ setFormData({ ...formData, [name]: value });
20
+ };
21
+
22
+ const validate = () => {
23
+ const newErrors = {};
24
+
25
+ if (!nameRegex.test(formData.name)) {
26
+ newErrors.name = "Name should contain only letters and spaces (min 2 characters).";
27
+ }
28
+
29
+ if (!emailRegex.test(formData.email)) {
30
+ newErrors.email = "Invalid email address.";
31
+ }
32
+
33
+ if (!passwordRegex.test(formData.password)) {
34
+ newErrors.password =
35
+ "Password must be at least 8 characters, include uppercase, lowercase, number, and special character.";
36
+ }
37
+
38
+ setErrors(newErrors);
39
+
40
+ return Object.keys(newErrors).length === 0;
41
+ };
42
+
43
+ const handleSubmit = (e) => {
44
+ e.preventDefault();
45
+ if (validate()) {
46
+ alert("Form submitted successfully!");
47
+ console.log("User Data:", formData);
48
+ // Clear form
49
+ setFormData({ name: "", email: "", password: "" });
50
+ setErrors({});
51
+ }
52
+ };
53
+
54
+ return (
55
+ <div style={{ maxWidth: "400px", margin: "auto" }}>
56
+ <h2>User Registration</h2>
57
+ <form onSubmit={handleSubmit} noValidate>
58
+ {/* Name */}
59
+ <div>
60
+ <label>Name:</label>
61
+ <input
62
+ type="text"
63
+ name="name"
64
+ value={formData.name}
65
+ onChange={handleChange}
66
+ />
67
+ {errors.name && <p style={{ color: "red" }}>{errors.name}</p>}
68
+ </div>
69
+
70
+ {/* Email */}
71
+ <div>
72
+ <label>Email:</label>
73
+ <input
74
+ type="email"
75
+ name="email"
76
+ value={formData.email}
77
+ onChange={handleChange}
78
+ />
79
+ {errors.email && <p style={{ color: "red" }}>{errors.email}</p>}
80
+ </div>
81
+
82
+ {/* Password */}
83
+ <div>
84
+ <label>Password:</label>
85
+ <input
86
+ type="password"
87
+ name="password"
88
+ value={formData.password}
89
+ onChange={handleChange}
90
+ />
91
+ {errors.password && <p style={{ color: "red" }}>{errors.password}</p>}
92
+ </div>
93
+
94
+ <button type="submit">Register</button>
95
+ </form>
96
+ </div>
97
+ );
98
+ }
99
+
100
+ function App() {
101
+ return (
102
+ <div>
103
+ <RegistrationForm />
104
+ </div>
105
+ );
106
+ }
107
+
108
+ export default App;
109
+
package/6 ADDED
@@ -0,0 +1,134 @@
1
+ import React, { useEffect, useState } from "react";
2
+ import axios from "axios";
3
+
4
+ function InventoryList({ inventory }) {
5
+ return (
6
+ <div>
7
+ <h2>Inventory</h2>
8
+ <table border="1" cellPadding="5" cellSpacing="0">
9
+ <thead>
10
+ <tr>
11
+ <th>ID</th>
12
+ <th>Product Name</th>
13
+ <th>Quantity</th>
14
+ <th>Price</th>
15
+ </tr>
16
+ </thead>
17
+ <tbody>
18
+ {inventory.map((item) => (
19
+ <tr key={item.id}>
20
+ <td>{item.id}</td>
21
+ <td>{item.prodname}</td>
22
+ <td>{item.qty}</td>
23
+ <td>{item.price}</td>
24
+ </tr>
25
+ ))}
26
+ </tbody>
27
+ </table>
28
+ </div>
29
+ );
30
+ }
31
+
32
+ function AddProductForm({ addProduct }) {
33
+ const [formData, setFormData] = useState({
34
+ id: "",
35
+ prodname: "",
36
+ qty: "",
37
+ price: "",
38
+ });
39
+
40
+ const handleChange = (e) => {
41
+ const { name, value } = e.target;
42
+ setFormData({ ...formData, [name]: value });
43
+ };
44
+
45
+ const handleSubmit = async (e) => {
46
+ e.preventDefault();
47
+ // Convert numeric fields
48
+ const dataToSend = {
49
+ id: Number(formData.id),
50
+ prodname: formData.prodname,
51
+ qty: Number(formData.qty),
52
+ price: Number(formData.price),
53
+ };
54
+ await addProduct(dataToSend);
55
+ setFormData({ id: "", prodname: "", qty: "", price: "" });
56
+ };
57
+
58
+ return (
59
+ <form onSubmit={handleSubmit} style={{ marginTop: "20px" }}>
60
+ <h2>Add New Product</h2>
61
+ <input
62
+ type="number"
63
+ name="id"
64
+ placeholder="ID"
65
+ value={formData.id}
66
+ onChange={handleChange}
67
+ required
68
+ />
69
+ <input
70
+ type="text"
71
+ name="prodname"
72
+ placeholder="Product Name"
73
+ value={formData.prodname}
74
+ onChange={handleChange}
75
+ required
76
+ />
77
+ <input
78
+ type="number"
79
+ name="qty"
80
+ placeholder="Quantity"
81
+ value={formData.qty}
82
+ onChange={handleChange}
83
+ required
84
+ />
85
+ <input
86
+ type="number"
87
+ name="price"
88
+ placeholder="Price"
89
+ value={formData.price}
90
+ onChange={handleChange}
91
+ required
92
+ />
93
+ <button type="submit">Add Product</button>
94
+ </form>
95
+ );
96
+ }
97
+
98
+ function App() {
99
+ const [inventory, setInventory] = useState([]);
100
+
101
+ // Fetch inventory from backend
102
+ const fetchInventory = async () => {
103
+ try {
104
+ const res = await axios.get("http://localhost:8000/");
105
+ setInventory(res.data);
106
+ } catch (err) {
107
+ console.error(err);
108
+ }
109
+ };
110
+
111
+ // Add product
112
+ const addProduct = async (product) => {
113
+ try {
114
+ const res = await axios.post("http://localhost:8000/add", product);
115
+ setInventory(res.data);
116
+ } catch (err) {
117
+ console.error(err);
118
+ }
119
+ };
120
+
121
+ useEffect(() => {
122
+ fetchInventory();
123
+ }, []);
124
+
125
+ return (
126
+ <div style={{ padding: "20px" }}>
127
+ <h1>Inventory Management</h1>
128
+ <InventoryList inventory={inventory} />
129
+ <AddProductForm addProduct={addProduct} />
130
+ </div>
131
+ );
132
+ }
133
+
134
+ export default App;
package/7 ADDED
@@ -0,0 +1,36 @@
1
+ db.employees.insertMany([
2
+ {
3
+ employee_id: 101,
4
+ name: "Sonia Rao",
5
+ department: "Engineering",
6
+ salary: 95000,
7
+ hire_date: new Date("2023-01-15"),
8
+ performance_score: 4.5,
9
+ status: "Active"
10
+ },
11
+
12
+ db.employees.find({
13
+ salary: { $gt: 90000, $lte: 120000 }
14
+ })
15
+
16
+ db.employees.find({
17
+ department: { $in: ["HR", "Sales"] }
18
+ })
19
+
20
+ db.employees.find({
21
+ department: "Engineering",
22
+ performance_score: { $gte: 4.5 }
23
+ })
24
+
25
+ db.employees.find({
26
+ $or: [
27
+ { department: "HR" },
28
+ { salary: { $gt: 100000 } }
29
+ ]
30
+ })
31
+
32
+ db.employees.find({
33
+ status: "Active",
34
+ department: { $in: ["Engineering", "Sales"] },
35
+ hire_date: { $lt: new Date("2024-01-01") }
36
+ })
package/8 ADDED
@@ -0,0 +1,56 @@
1
+ db.catalog.insertMany([
2
+ {
3
+ item_id: "A001",
4
+ name: "Classic Leather Backpack",
5
+ description: "Durable leather backpack with multiple compartments,
6
+ perfect for daily commute or light travel.",
7
+ tags: ["leather", "backpack", "travel", "work"],
8
+ price: 120.00,
9
+ in_stock: true
10
+ },
11
+ {
12
+ item_id: "A002",
13
+ name: "Ergonomic Office Chair",
14
+ description: "Adjustable office chair with lumbar support and breathable
15
+ mesh, ideal for long working hours.",
16
+ tags: ["office", "chair", "ergonomic", "comfort"],
17
+ price: 280.00,
18
+ in_stock: false
19
+ },
20
+ {
21
+ item_id: "A003",
22
+ name: "Durable Cotton T-Shirt",
23
+ description: "A soft and durable t-shirt made from 100% organic cotton.
24
+ Eco-friendly and comfortable.",
25
+ tags: ["cotton", "tshirt", "organic", "eco-friendly"],
26
+ price: 25.00,
27
+ in_stock: true
28
+ }
29
+ ]);
30
+
31
+
32
+
33
+
34
+ db.catalog.createIndex({
35
+ name: "text", description: "text", tags: "text"
36
+ })
37
+
38
+ db.catalog.aggregate([
39
+ // Stage 1: Filter documents using the text index
40
+ {
41
+ $match: {
42
+ $text: {
43
+ $search: "durable backpack"
44
+ }
45
+ }
46
+ },
47
+ // Stage 2: Reshape output and include the relevance score
48
+ {
49
+ $project: {
50
+ _id: 0,
51
+ name: 1,
52
+ price: 1,
53
+ score: { $meta: "textScore" }
54
+ }
55
+ }
56
+ ])
package/9 ADDED
@@ -0,0 +1,153 @@
1
+ db.json
2
+ "employees": [
3
+ { "id": 1, "firstName": "John", "lastName": "Doe", "email":
4
+ "john.doe@example.com" },
5
+ { "id": 2, "firstName": "Jane", "lastName": "Smith", "email":
6
+ "jane.smith@example.com" }
7
+ ]
8
+ }
9
+ $npx json-server --watch db.json --port 5000
10
+
11
+ import React, { useEffect, useState } from "react";
12
+ import axios from "axios";
13
+
14
+ const API_URL = "http://localhost:5000/employees";
15
+
16
+ function EmployeeList({ employees, onEdit, onDelete }) {
17
+ return (
18
+ <div>
19
+ <h2>Employee List</h2>
20
+ <table border="1" cellPadding="5" style={{ borderCollapse: "collapse" }}>
21
+ <thead>
22
+ <tr>
23
+ <th>ID</th>
24
+ <th>First Name</th>
25
+ <th>Last Name</th>
26
+ <th>Email</th>
27
+ <th>Actions</th>
28
+ </tr>
29
+ </thead>
30
+ <tbody>
31
+ {employees.map(emp => (
32
+ <tr key={emp.id}>
33
+ <td>{emp.id}</td>
34
+ <td>{emp.firstName}</td>
35
+ <td>{emp.lastName}</td>
36
+ <td>{emp.email}</td>
37
+ <td>
38
+ <button onClick={() => onEdit(emp)}>Edit</button>
39
+ <button onClick={() => onDelete(emp.id)}>Delete</button>
40
+ </td>
41
+ </tr>
42
+ ))}
43
+ </tbody>
44
+ </table>
45
+ </div>
46
+ );
47
+ }
48
+
49
+ function EmployeeForm({ addEmployee, updateEmployee, employeeToEdit, clearEdit }) {
50
+ const [formData, setFormData] = useState({
51
+ firstName: "",
52
+ lastName: "",
53
+ email: ""
54
+ });
55
+
56
+ useEffect(() => {
57
+ if (employeeToEdit) setFormData(employeeToEdit);
58
+ }, [employeeToEdit]);
59
+
60
+ const handleChange = e => {
61
+ const { name, value } = e.target;
62
+ setFormData(prev => ({ ...prev, [name]: value }));
63
+ };
64
+
65
+ const handleSubmit = e => {
66
+ e.preventDefault();
67
+ if (employeeToEdit) {
68
+ updateEmployee(employeeToEdit.id, formData);
69
+ clearEdit();
70
+ } else {
71
+ addEmployee(formData);
72
+ }
73
+ setFormData({ firstName: "", lastName: "", email: "" });
74
+ };
75
+
76
+ return (
77
+ <form onSubmit={handleSubmit} style={{ marginTop: "20px" }}>
78
+ <h2>{employeeToEdit ? "Edit Employee" : "Add Employee"}</h2>
79
+ <input
80
+ name="firstName"
81
+ placeholder="First Name"
82
+ value={formData.firstName}
83
+ onChange={handleChange}
84
+ required
85
+ />
86
+ <input
87
+ name="lastName"
88
+ placeholder="Last Name"
89
+ value={formData.lastName}
90
+ onChange={handleChange}
91
+ required
92
+ />
93
+ <input
94
+ name="email"
95
+ type="email"
96
+ placeholder="Email"
97
+ value={formData.email}
98
+ onChange={handleChange}
99
+ required
100
+ />
101
+ <button type="submit">{employeeToEdit ? "Update" : "Add"}</button>
102
+ {employeeToEdit && <button onClick={clearEdit}>Cancel</button>}
103
+ </form>
104
+ );
105
+ }
106
+
107
+ function App() {
108
+ const [employees, setEmployees] = useState([]);
109
+ const [employeeToEdit, setEmployeeToEdit] = useState(null);
110
+
111
+ // Fetch employees
112
+ const fetchEmployees = async () => {
113
+ const res = await axios.get(API_URL);
114
+ setEmployees(res.data);
115
+ };
116
+
117
+ // Add employee
118
+ const addEmployee = async (emp) => {
119
+ const res = await axios.post(API_URL, emp);
120
+ setEmployees([...employees, res.data]);
121
+ };
122
+
123
+ // Update employee
124
+ const updateEmployee = async (id, updatedEmp) => {
125
+ const res = await axios.put(`${API_URL}/${id}`, updatedEmp);
126
+ setEmployees(employees.map(emp => (emp.id === id ? res.data : emp)));
127
+ };
128
+
129
+ // Delete employee
130
+ const handleDelete = async (id) => {
131
+ await axios.delete(`${API_URL}/${id}`);
132
+ setEmployees(employees.filter(emp => emp.id !== id));
133
+ };
134
+
135
+ useEffect(() => {
136
+ fetchEmployees();
137
+ }, []);
138
+
139
+ return (
140
+ <div style={{ padding: "20px" }}>
141
+ <h1>Employee Management System</h1>
142
+ <EmployeeList employees={employees} onEdit={setEmployeeToEdit} onDelete={handleDelete} />
143
+ <EmployeeForm
144
+ addEmployee={addEmployee}
145
+ updateEmployee={updateEmployee}
146
+ employeeToEdit={employeeToEdit}
147
+ clearEdit={() => setEmployeeToEdit(null)}
148
+ />
149
+ </div>
150
+ );
151
+ }
152
+
153
+ export default App;
package/package.json ADDED
@@ -0,0 +1,18 @@
1
+ {
2
+ "name": "fsad",
3
+ "version": "1.0.0",
4
+ "description": "My 10 files",
5
+ "license": "MIT",
6
+ "files": [
7
+ "1",
8
+ "2",
9
+ "3",
10
+ "4",
11
+ "5",
12
+ "6",
13
+ "7",
14
+ "8",
15
+ "9",
16
+ "10"
17
+ ]
18
+ }