Untitled

<!DOCTYPE html>
<html>
<head>
    <title>User Cart</title>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
    <style>
        table {
            width: 100%;
            border-collapse: collapse;
            font-family: Arial, sans-serif;
        }
        
        th, td {
            padding: 12px;
            text-align: left;
            border-bottom: 1px solid #ddd;
        }
        
        th {
            background-color: #f2f2f2;
        }
        
        tr:nth-child(even) {
            background-color: #f9f9f9;
        }
        
        img {
            max-width: 50px;
            max-height: 50px;
        }
        
        .search-container {
            margin-top: 20px;
        }
        
        .search-input {
            padding: 8px;
            width: 200px;
            font-size: 16px;
            border-radius: 4px;
        }
        
        .search-button {
            padding: 8px;
            font-size: 16px;
            border-radius: 4px;
            background-color: #4CAF50;
            color: white;
            border: none;
            cursor: pointer;
        }
        
        .search-button:hover {
            background-color: #45a049;
        }
    </style>
</head>
<body>
    <div class="search-container">
        <input type="text" id="searchInput" class="search-input" placeholder="Enter search criteria...">
        <button id="searchButton" class="search-button">Search</button>
    </div>

    <table id="userTable">
        <thead>
            <tr>
                <th>ID</th>
                <th>First Name</th>
                <th>Last Name</th>
                <th>Email</th>
                <th>Phone</th>
                <th>Username</th>
                <th>Image</th>
            </tr>
        </thead>
        <tbody></tbody>
    </table>

    <script>
        $(document).ready(function() {
            var users = []; // Store all users
            
            $.ajax({
                url: 'https://dummyjson.com/users/',
                dataType: 'json',
                success: function(data) {
                    users = data.users;
                    populateTable(users);
                },
                error: function() {
                    console.log('Error fetching data');
                }
            });
            
            $('#searchButton').click(function() {
                var searchTerm = $('#searchInput').val().toLowerCase();
                var filteredUsers = users.filter(function(user) {
                    return (
                        user.id.toString().toLowerCase().includes(searchTerm) ||
                        user.firstname.toLowerCase().includes(searchTerm) ||
                        user.lastname.toLowerCase().includes(searchTerm) ||
                        user.email.toLowerCase().includes(searchTerm) ||
                        user.phone.toLowerCase().includes(searchTerm) ||
                        user.username.toLowerCase().includes(searchTerm)
                    );
                });
                populateTable(filteredUsers);
            });
            
            function populateTable(data) {
                var tableBody = $('#userTable tbody');
                tableBody.empty(); // Clear previous data
                
                $.each(data, function(index, user) {
                    var row = $('<tr>');
                    row.append($('<td>').text(user.id));
                    row.append($('<td>').text(user.firstname));
                    row.append($('<td>').text(user.lastname));
                    row.append($('<td>').text(user.email));
                    row.append($('<td>').text(user.phone));
                    row.append($('<td>').text(user.username));
                    row.append($('<td>').append($('<img>').attr('src', user.image))));
                    tableBody.append(row);
                });
            }
        });
    </script>
</body>
</html>
Editor is loading...