User Management
Edit this looking more elegant way <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF 8"> <meta name="viewport" content="width=device width, initial scale=1.0"> <title>User Management</title> <style> body { margin: 0; padding: 0; font family: Arial, sans serif; background color: #EAE7FA; display: flex; flex direction: column; align items: center; } .container { width: 80%; max width: 800px; background: white; border radius: 8px; box shadow: 0 4px 8px rgba(0, 0, 0, 0.1); padding: 20px; margin top: 20px; } table { width: 100%; border collapse: collapse; margin: 20px 0; } th, td { border: 1px solid #ccc; padding: 10px; text align: left; } th { background color: #6E5BFF; color: white; } button { background color: #FF4D4D; color: white; border: none; padding: 5px 10px; cursor: pointer; border radius: 4px; } button:hover { background color: #FF1A1A; } .form container { display: flex; flex direction: column; margin bottom: 20px; } </style> </head> <body> <div class="container"> <h2>User Management</h2> <div class="form container"> <input type="text" id="username" placeholder="New Username" required> <input type="password" id="password" placeholder="New Password" required> <button id="addUser">Add User</button> </div> <table> <thead> <tr> <th>Username</th> <th>Actions</th> </tr> </thead> <tbody id="userTableBody"></tbody> </table> <button id="signOut">Sign Out</button> </div> <script> const userTableBody = document.getElementById('userTableBody'); const addUserButton = document.getElementById('addUser'); const signOutButton = document.getElementById('signOut'); let users = []; function renderUsers() { userTableBody.innerHTML = ''; users.forEach((user, index) => { const row = document.createElement('tr'); row.innerHTML = ` <td>${user.username}</td> <td> <button onclick="deleteUser(${index})">Delete</button> </td> `; userTableBody.appendChild(row); }); } function deleteUser(index) { users.splice(index, 1); renderUsers(); } addUserButton.addEventListener('click', () => { const username = document.getElementById('username').value; const password = document.getElementById('password').value; if (username && password) { users.push({ username, password }); document.getElementById('username').value = ''; document.getElementById('password').value = ''; renderUsers(); } }); signOutButton.addEventListener('click', () => { window.location.href = 'index.html'; }); </script> </body> </html>
