function attachEvents() {
    let $createOffer = $('#create-offers');
    let $loginBtn = $('#loginBtn');
    let $usernameElement = $('#username');

    $createOffer.hide();

    $loginBtn.on('click', function (e) {
        e.preventDefault();
        let username = $usernameElement.val();
        console.log($usernameElement);

        if ($loginBtn.text() === 'Login') {
            login(username);
        } else if ($loginBtn.text() === 'Logout') {
            logout();
        }

        $('#create-offer-Btn').on('click', () => {
            let $offerName = $('#offerName');
            let $companyName = $('#company');
            let $description = $('#description');

            if ($offerName.val() && $companyName.val() && $description.val()) {
                $('#offers-container').append(`
            <div class="col-3">
                <div class="card text-white bg-dark mb-3 pb-3" style="max-width: 18rem;">
                    <div class="card-header">${$offerName.val()}</div>
                    <div class="card-body">
                        <h5 class="card-title">${$companyName.val()}</h5>
                        <p class="card-text">${$description.val()}</p>
                    </div>
                </div>
            </div>`);
                $offerName.val('');
                $companyName.val('');
                $description.val('');
            }
        })
    });

    function login(username) {
        let $notification = $('#notification');
        if (username.length >= 4 && username.length <= 10) {
            $usernameElement.attr('class', 'form-control mr-sm-2 border-0 bg-light');
            $usernameElement.val(`Hello, ${username}!`);
            $usernameElement.prop('disabled', true);
            $loginBtn.text('Logout');
            $createOffer.show();
            $notification.text('')

        } else {
            $notification.text('The username length should be between 4 and 10 characters.');
            // $usernameElement.val('');
        }
    }

    function logout() {
        $usernameElement.attr('class', 'form-control mr-sm-2');
        $usernameElement.val('');
        $usernameElement.prop('disabled', false);
        $loginBtn.text('Login');
        $c