jsAJAXUsersGetter

<!DOCTYPE html>
<html lang="en" id="html">
<head>
    <meta charset="UTF-8">
    <title>XHR</title>
    <style>
        html,
        body {
            display: flex;
            align-items: center;
            justify-content: center;
        }

        .container {
            display: flex;
            flex-direction: column;
            justify-content: center;
            align-content: center;
            align-items: center;
            margin-top: 30px;
            position: relative;
        }

        .mainDiv {
            display: flex;
            flex-direction: row;
        }

        table, tr, td {
            border: 1px solid black;
            border-collapse: collapse;
            padding: 5px;
        }

        table {
            width: 70%;
            margin: 10px;
        }
    </style>
</head>
<body>
    <div id="container" class="container">
        <input type="number" id="userId">
    </div>
    <script>
        'use strict'

        function getUser(userId) {
            let url = `https://jsonplaceholder.typicode.com/users?id=${userId}`;
            let method = 'GET';


            let xhr = new XMLHttpRequest();

            xhr.open(method, url);
            xhr.addEventListener('load', function () {
                if (this.status >= 400) {
                    console.log(`HTTP ERROR CODE: ${this.status}!`);
                }
                else {
                    let _users = JSON.parse(this.responseText);
                    console.log(_users);

                    if (_users.length == 0) {
                        alert('No such user!')
                    }
                    else {
                        renderUser(_users[0], 'container')
                    }
                }
            });

            xhr.send();
        }

        function renderUser(user, container) {
            let _container = document.getElementById(container);

            let table = document.createElement('table');
            let elems = ['id', 'name', 'username', 'email'];

            for (let el of elems) {
                let row = document.createElement('tr');
                let cell = document.createElement('td');
                cell.innerText = el;
                row.append(cell);
                cell = document.createElement('td');
                cell.innerText = user[el];
                row.append(cell);
                table.append(row);
            }

            _container.append(table);
        }

        const userId = document.getElementById('userId');

        userId.addEventListener('change', (event) => {
            getUser(userId.value);
        });
    </script>
</body>
</html>