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>
Node.js - Express API
const express = require('express');
const cors = require('cors');
const app = express();
app.use(cors());
const users = Array.from({ length: 50 }, (_, i) => ({
id: i + 1,
first_name: `User${i + 1}`,
last_name: `Test`,
email: `user${i + 1}@example.com`,
avatar: `https://randomuser.me/api/portraits/thumb/men/${i % 10}.jpg`,
}));
app.get('/api/users', (req, res) => {
const page = parseInt(req.query.page) || 1;
const limit = parseInt(req.query.limit) || 10;
const startIndex = (page - 1) * limit;
const endIndex = page * limit;
const paginatedUsers = users.slice(startIndex, endIndex);
res.json({
page,
total_pages: Math.ceil(users.length / limit),
total_users: users.length,
users: paginatedUsers,
});
});
app.listen(5000, () => {
console.log('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: user.email,
});
const handleChange = (e) => {
setFormData({ ...formData, [e.target.name]: e.target.value });
};
const handleSubmit = async (e) => {
e.preventDefault();
const response = await fetch(`https://reqres.in/api/users/${user.id}`, {
method: 'PUT',
headers: { 'Content-Type': 'application/json' },
body: JSON.stringify(formData),
});
if (response.ok) {
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={formData.email} onChange={handleChange} />
<button type="submit">Update</button>
</form>
);
};
React - Delete User
const deleteUser = async (id, onDelete) => {
const response = await fetch(`https://reqres.in/api/users/${id}`, {
method: 'DELETE',
});
if (response.ok) {
onDelete(id);
}
};
React - User List
const UserList = () => {
const [users, setUsers] = useState([]);
useEffect(() => {
fetch('https://reqres.in/api/users?page=1')
.then(res => res.json())
.then(data => setUsers(data.data));
}, []);
const handleUpdate = (updatedUser) => {
setUsers(users.map(user => (user.id === updatedUser.id ? updatedUser : user)));
};
const handleDelete = (id) => {
setUsers(users.filter(user => user.id !== id));
};
return (
<div>
{users.map(user => (
<div key={user.id}>
<p>{user.first_name} {user.last_name}</p>
<button onClick={() => handleUpdate(user)}>Edit</button>
<button onClick={() => deleteUser(user.id, handleDelete)}>Delete</button>
</div>
))}
</div>
);
};
