Code Snippets
HTML - Login Form
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Login Form</title>
<style>
body { font-family: Arial, sans-serif; display: flex; justify-content: center; align-items: center;
height: 100vh; background-color: #f4f4f4; }
.login-container { background: white; padding: 20px; border-radius: 10px; box-shadow: 0 0 10px rgba(0,
0, 0, 0.1); width: 300px; }
.login-container h2 { text-align: center; }
.login-container input { width: 100%; padding: 10px; margin: 10px 0; border: 1px solid #ccc;
border-radius: 5px; }
.login-container button { width: 100%; padding: 10px; background: blue; color: white; border: none;
border-radius: 5px; cursor: pointer; }
.login-container button:hover { background: darkblue; }
</style>
</head>
<body>
<div class="login-container">
<h2>Login</h2>
<form>
<input type="email" placeholder="Email" required>
<input type="password" placeholder="Password" required>
<button type="submit">Login</button>
</form>
</div>
</body>
</html>
[Link] - Express API
const express = require('express');
const cors = require('cors');
const app = express();
[Link](cors());
const users = [Link]({ length: 50 }, (_, i) => ({
id: i + 1,
first_name: `User${i + 1}`,
last_name: `Test`,
email: `user${i + 1}@[Link]`,
avatar: `[Link] % 10}.jpg`,
}));
[Link]('/api/users', (req, res) => {
const page = parseInt([Link]) || 1;
const limit = parseInt([Link]) || 10;
const startIndex = (page - 1) * limit;
const endIndex = page * limit;
const paginatedUsers = [Link](startIndex, endIndex);
[Link]({
page,
total_pages: [Link]([Link] / limit),
total_users: [Link],
users: paginatedUsers,
});
});
[Link](5000, () => {
[Link]('Server running on port 5000');
});
React - Edit User Form
import { useState } from 'react';
const EditUserForm = ({ user, onUpdate }) => {
const [formData, setFormData] = useState({
first_name: user.first_name,
last_name: user.last_name,
email: [Link],
});
const handleChange = (e) => {
setFormData({ ...formData, [[Link]]: [Link] });
};
const handleSubmit = async (e) => {
[Link]();
const response = await fetch(`[Link] {
method: 'PUT',
headers: { 'Content-Type': 'application/json' },
body: [Link](formData),
});
if ([Link]) {
onUpdate(formData);
}
};
return (
<form onSubmit={handleSubmit}>
<input name="first_name" value={formData.first_name} onChange={handleChange} />
<input name="last_name" value={formData.last_name} onChange={handleChange} />
<input name="email" value={[Link]} onChange={handleChange} />
<button type="submit">Update</button>
</form>
);
};
React - Delete User
const deleteUser = async (id, onDelete) => {
const response = await fetch(`[Link] {
method: 'DELETE',
});
if ([Link]) {
onDelete(id);
}
};
React - User List
const UserList = () => {
const [users, setUsers] = useState([]);
useEffect(() => {
fetch('[Link]
.then(res => [Link]())
.then(data => setUsers([Link]));
}, []);
const handleUpdate = (updatedUser) => {
setUsers([Link](user => ([Link] === [Link] ? updatedUser : user)));
};
const handleDelete = (id) => {
setUsers([Link](user => [Link] !== id));
};
return (
<div>
{[Link](user => (
<div key={[Link]}>
<p>{user.first_name} {user.last_name}</p>
<button onClick={() => handleUpdate(user)}>Edit</button>
<button onClick={() => deleteUser([Link], handleDelete)}>Delete</button>
</div>
))}
</div>
);
};