Javascript page render

const SERVER_ADDRESS = "http://192.168.131.4:3000/api";

function renderShopItem(shop, index = 0) {
    return `
        <div class="shop-item">
            <header>
                <h3> ${shop.title} </h3>
            </header>

            <div class="shop-img">
                <img src="${shop.image}?${index}">
            </div>

            <footer>
                Address: ${shop.geographicArea}
            </footer>
        </div>
    `;
}

async function retrieveFromServer() {
    const result = await fetch(SERVER_ADDRESS);
    return await result.json();
}

function setShopList(rendered) {
    document.querySelector("#shops-list")
        .innerHTML = rendered.join("<hr>");
}

function filterShopsByGeolocation(shops, area) {
    return shops.filter(
        (shop) => shop.geographicArea.toLowerCase() ===
            area.toLowerCase()
    );
}

function renderHtmlPage(shops) {
    const rendered = shops.map(
        (shop, index) => renderShopItem(shop, index)
    );
    setShopList(rendered);
}

let result;
let shops;

function random(max) {
    return Math.round((Math.random() * 100) % (max-1));
}

async function onChangeCityButtonPressed() {
    result = await retrieveFromServer();
    const cityChoice = document.querySelector("#city-choice")?.value ?? "";
    shops = filterShopsByGeolocation(result, cityChoice);
    renderHtmlPage(shops);
}

async function main() {
    result = await retrieveFromServer();
    shops = filterShopsByGeolocation(result, "Lecce");

    renderHtmlPage(shops);
}

main();