Scribd
Upload
2 views

Code Snippets

The document contains code snippets for a login form in HTML, an Express API for fetching user data, and React components for editing, deleting, and listing users. The HTML snippet includes styling for a centered login form, while the Node.js snippet sets up an API endpoint for paginated user data. The React snippets demonstrate how to manage user state and handle updates and deletions in a user interface.

Uploaded by

Karthik Nayak
Copyright
© © All Rights Reserved
Available Formats
Download as PDF, TXT or read online on Scribd
2 views

Code Snippets

The document contains code snippets for a login form in HTML, an Express API for fetching user data, and React components for editing, deleting, and listing users. The HTML snippet includes styling for a centered login form, while the Node.js snippet sets up an API endpoint for paginated user data. The React snippets demonstrate how to manage user state and handle updates and deletions in a user interface.

Uploaded by

Karthik Nayak
Copyright
© © All Rights Reserved
Available Formats
Download as PDF, TXT or read online on Scribd
You are on page 1/ 3

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>
);
};

You might also like