Show More function on a page that uses API data

Question

I'm trying to build a project for my portfolio that takes data from an API (coingecko one) and displays it on my website. What i want is basically to create a section like "Most popular cryptos", and then display there like 5 of them, or 10, and then the user must click on "See more" or "show more" in order for the section to expand. Same for another section that could be like "Top gainers" or "biggest downside" or similar.

The issue is that the API is giving me 100 coins, of which I've managed to extract 16 per request. So I'm getting 16 coins, but I only want to display maybe 10 of them, and with an additional 5 per user click on show more.

Is this doable from the API, like do I need to manually tell the API "Hey, get me only 10 of them, and then if the user clicks on this button - > get me 5 more"? I have tried to figure out a solution pure CSS-based, where I wanted to create a section of 70vh height, with hidden overflow, but some coins still display chunky. How should I approach this?

Here's how it looks now:

And here's the code I have so far(Trying to post just the relevant code): Javascript:

const hamburger = document.getElementById('hamburger');
const items = document.getElementById('items');

hamburger.addEventListener('click', (e) => {
    items.classList.toggle('active');

})


getCoins();

function getCoins() {
    const url = `https://api.coingecko.com/api/v3/coins/markets?vs_currency=usd&order=market_cap_desc&per_page=100&page=1&sparkline=false&price_change_percentage='1h%2C%2024h%2C%207d'`
    fetch(url)
        .then(res => res.json())
        .then(data => {
            let coins = data.map(el => el);

            for (let i = 0; i < coins.length / 0.2; i++) {
                coins.pop();
            }

            displayCoins(coins);


        })
}


function displayCoins(coins) {
    const list = document.querySelector('.section2');


    coins.forEach(coin => {
        let card = document.createElement('div');
        card.classList.add('coin');
        let sym = document.createElement('h1');
        sym.classList.add('coin-name');
        let picture = document.createElement('img');
        picture.classList.add('coin-image');
        let price = document.createElement('h1');
        price.classList.add('coin-price');
        let priceChange = document.createElement('h3');
        priceChange.classList.add('coin-change-24h');

        sym.innerHTML = coin.symbol;
        picture.src = coin.image;
        price.innerHTML = '$' + coin.current_price;
        priceChange.innerHTML = coin.price_change_percentage_24h;

        card.appendChild(sym);
        card.appendChild(picture);
        card.appendChild(price);
        card.appendChild(priceChange);
        list.appendChild(card);





    })


}

HTML:

<section class="section2">
        <div class="biggest-movers-title">
            <h1>Most Popular Coins</h1>
        </div>

    </section>

CSS:

.section2 {
    display: inline-flex;
    width: 100%;
    height: 150vh;
    background-image: url(./bg3.png);
    position: relative;
    padding-top: 15%;
    flex-wrap: wrap;
    justify-content: space-evenly;
    
        

}
.coin {
    width: 15em;
    height: 12em;
    background: rgba( 255, 255, 255, 0.15 );
box-shadow: 0 8px 16px 0 rgba( 31, 38, 135, 0.37 );
backdrop-filter: blur( 3.5px );
-webkit-backdrop-filter: blur( 3.5px );
border-radius: 10px;
display: flex;
flex-direction: column;
transition: 0.2s ease-in-out;
margin: 10px;
}

^ Where .coin is each container of information (symbol, image, current price, and 24h price change in %) - each card basically.

I would really appreciate the help. Thank you in advance!

Answer 1

You could fix it by just asking the API the page of coins that you want. Your api call contains

per_page=100&page=1

As in

const url = `https://api.coingecko.com/api/v3/coins/markets?vs_currency=usd&order=market_cap_desc&per_page=100&page=1&sparkline=false&price_change_percentage='1h%2C%2024h%2C%207d'`

So you could change that into

per_page=7&page=1

And when someone clicks a 'next' button, you fetch the next 7 coins using

per_page=7&page=2

etc.