GENERAL KNOWLEDGE SO TEST YOUR SELF - Posts

<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>User Management System</title>
<style>
    body {
        font-family: Arial, sans-serif;
        background-color: #f4f4f4;
        margin: 0;
        padding: 0;
    }
    header {
        background-color: #333;
        color: white;
        padding: 10px 0;
        text-align: center;
    }
    #main-content {
        padding: 20px;
    }
    .container {
        max-width: 1200px;
        margin: 0 auto;
        background: white;
        padding: 20px;
        border-radius: 10px;
        box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
    }
    h1 {
        color: #333;
    }
    form {
        margin-bottom: 20px;
    }
    label {
        display: block;
        margin-bottom: 5px;
        font-weight: bold;
    }
    input, select {
        width: 100%;
        padding: 10px;
        margin-bottom: 10px;
        border: 1px solid #ddd;
        border-radius: 5px;
    }
    button {
        background-color: #28a745;
        color: white;
        padding: 10px 20px;
        border: none;
        border-radius: 5px;
        cursor: pointer;
    }
    button:hover {
        background-color: #218838;
    }
    .user-list {
        margin-top: 20px;
    }
    .user {
        background-color: #f9f9f9;
        margin-bottom: 10px;
        padding: 10px;
        border-radius: 5px;
        box-shadow: 0 0 5px rgba(0, 0, 0, 0.1);
    }
    .user-details {
        display: flex;
        justify-content: space-between;
        align-items: center;
    }
    .edit-btn, .delete-btn {
        background-color: #ffc107;
        color: white;
        padding: 5px 10px;
        border: none;
        border-radius: 5px;
        cursor: pointer;
    }
    .delete-btn {
        background-color: #dc3545;
    }
    .edit-btn:hover {
        background-color: #e0a800;
    }
    .delete-btn:hover {
        background-color: #c82333;
    }
</style>

</head> <body> <header> <h1>User Management System</h1> </header> <div id="main-content"> <div class="container"> <h2>Add New User</h2> <form id="userForm"> <label for="name">Full Name</label> <input type="text" id="name" name="name" placeholder="Enter full name" required>

            <label for="email">Email Address</label>
            <input type="email" id="email" name="email" placeholder="Enter email address" required>

            <label for="role">Role</label>
            <select id="role" name="role" required>
                <option value="Admin">Admin</option>
                <option value="Editor">Editor</option>
                <option value="Viewer">Viewer</option>
            </select>

            <button type="submit">Add User</button>
        </form>

        <h2>User List</h2>
        <div class="user-list" id="userList">
            <!-- Dynamically generated user data will go here -->
        </div>
    </div>
</div>

<script>
    let users = [];

    // Handle form submission
    document.getElementById('userForm').addEventListener('submit', function (e) {
        e.preventDefault();
        const name = document.getElementById('name').value;
        const email = document.getElementById('email').value;
        const role = document.getElementById('role').value;

        const user = {
            id: users.length + 1,
            name,
            email,
            role
        };

        users.push(user);
        displayUsers();
        this.reset(); // Reset the form
    });

    // Function to display users
    function displayUsers() {
        const userList = document.getElementById('userList');
        userList.innerHTML = ''; // Clear current users

        users.forEach(user => {
            const userDiv = document.createElement('div');
            userDiv.classList.add('user');
            userDiv.innerHTML = `
                <div class="user-details">
                    <div>
                        <strong>Name:</strong> ${user.name} <br>
                        <strong>Email:</strong> ${user.email} <br>
                        <strong>Role:</strong> ${user.role}
                    </div>
                    <div>
                        <button class="edit-btn" onclick="editUser(${user.id})">Edit</button>
                        <button class="delete-btn" onclick="deleteUser(${user.id})">Delete</button>
                    </div>
                </div>
            `;
            userList.appendChild(userDiv);
        });
    }

    // Function to delete a user
    function deleteUser(id) {
        users = users.filter(user => user.id !== id);
        displayUsers();
    }

    // Function to edit a user
    function editUser(id) {
        const user = users.find(user => user.id === id);
        if (user) {
            document.getElementById('name').value = user.name;
            document.getElementById('email').value = user.email;
            document.getElementById('role').value = user.role;

            // Remove the user to update after editing
            users = users.filter(u => u.id !== id);
            displayUsers();
        }
    }
</script>

</body> </html>