Помогите сделать кнопки активными

Ребзя, нужна помощь.

Есть задание реализовать чат на основе эхо-сервера wss://echo-ws-service.herokuapp.com. Интерфейс состоит из input, куда вводится текст сообщения, и кнопки «Отправить». При клике на кнопку «Отправить» сообщение должно появляться в окне переписки. Эхо-сервер будет отвечать вам тем же сообщением, его также необходимо выводить в чат.

Добавить в чат механизм отправки гео-локации. При клике на кнопку «Гео-локация» необходимо отправить данные серверу и в чат вывести ссылку на https://www.openstreetmap.org/ с вашей гео-локацией. Сообщение, которое отправит обратно эхо-сервер, не выводить.

Все бы ничего, но потерялся чуток. Может кто подсказать, где или с чего начинать, как вообще открывать этот сервер? Понаписал сам ерунды такой, что ничего не робит

`

    <div class="inputButton">
        <div>
            <p class="input"><input class="input2"  placeholder="Введите сообщение" size="75"></p>
        </div>

        <div>
            <button class="btn j-btn">Отправить</button>
        </div>

        <div>
            <button class="btn j-btn">Гео-локация</button>
        </div>

    </div>
    
    <div class="oknoText">
        <div class="output"></div>
    </div>

</div>

`

const wsUrl = "wss://echo.websocket.org/";

const output = document.getElementById("output");
const btnSent = document.querySelector('.j-btn-sent');
const btnGeoLoc = document.querySelector('.j-btn-geoloc');
const input = document.querySelector('.input');

let websocket;

function writeToScreen(message) {
  let pre = document.createElement("p");
  pre.style.wordWrap = "break-word";
  pre.innerHTML = message;
  output.appendChild(pre);
}

btnSent.addEventListener('click', () => {
  const message = 'Test message';
  writeToScreen("SENT: " + message);
  websocket.send(message);
});

И если посоветуете сайты для изучения JS (доступные для понимания, для тупиц), буду только рад :3