Learn how to Implement a “Load Extra” Button With Vanilla JavaScript

A “Load Extra” button provides extra content material to a web page when clicked by a consumer. It is a widespread strategy for blogs because it permits the consumer to resolve how and when data is displayed. 

Right here’s a take a look at the ultimate product we’ll work on right this moment—scroll to the underside of the pen and click on the button so as to add extra content material to the web page:

1. Card Container and Button HTML

We’ll begin by inserting the container for our playing cards on the web page. We’ll be including the playing cards to the container utilizing JavaScript so the div can be empty.

<div id="card-container"></div>

Our implementation features a “load extra” button and in addition shows the present variety of playing cards being proven and the whole variety of playing cards accessible. We’ll embody these options in a card-actions div. The content material in card-count and card-total can be added with JavaScript.

<div class="card-actions">
  <button id="load-more">Load extra</button>
  <span>Displaying 
    <span id="card-count"></span> of 
    <span id="card-total"></span> playing cards      
  </span>
</div>

2. Styling the Playing cards and Button

The playing cards we’ll be including to the card-container div can have a classname of “card”. 

#card-container {
  show: flex;
  flex-wrap: wrap;
}

.card {
  top: 55vh;
  width: calc((100% / 3) - 16px);
  margin: 8px;
  border-radius: 3px;
  transition: all 200ms ease-in-out;
  show: flex;
  align-items: heart;
  justify-content: heart;
}

.card:hover {
  box-shadow: 0 4px 10px rgba(0, 0, 0, 0.2);
}

We’ll type our load-more button in the same method to the playing cards and add a disabled pseudo-selector to indicate when the top of the playing cards have been reached.

.card-actions {
  margin: 8px;
  padding: 16px 0;
  show: flex;
  justify-content: space-between;
  align-items: heart;
}

#load-more {
  width: calc((100% / 3) - 8px);
  padding: 16px;
  background-color: white;
  border: none;
  cursor: pointer;
  transition: all 200ms ease-in-out;
  border-radius: 3px;
  font-size: 0.75rem;
  text-transform: uppercase;
  letter-spacing: 0.15rem;
}

#load-more:not([disabled]):hover {
  box-shadow: 0 1px 9px rgba(0, 0, 0, 0.2);
}

#load-more[disabled] {
  background-color: #eaeaea !necessary;
}

3. Including Performance With JavaScript

That is what the useful implementation for the load extra button will appear to be:

1. Outline quite a lot of playing cards to be added to the web page every time the consumer clicks the button.
2. Detect when the whole variety of playing cards have been added and disable the button.

Defining Constants

First, get all the weather we’ll want from our DOM:

const cardContainer = doc.getElementById("card-container");
const loadMoreButton = doc.getElementById("load-more");
const cardCountElem = doc.getElementById("card-count");
const cardTotalElem = doc.getElementById("card-total");

Now we have to outline our world variables.

We’ll want a worth for the max variety of playing cards to be added to the web page. Should you’re getting your knowledge from a server, this worth is the size of the response from the server. Let’s initialise a card restrict of 99. 

const cardLimit = 99;

The cardTotalElem is the component for displaying the max variety of playing cards on the web page so we are able to set the innerHTML to the cardLimit worth;

cardTotalElem.innerHTML = cardLimit;

Then we’ll outline a variable for what number of playing cards we wish to improve the web page by:

const cardIncrease = 9;

Very like with our infinite scrolling tutorial, we’ll wish to know what number of “pages” we’ll have i.e. what number of occasions can we improve the content material until we attain the max restrict. For instance, with our outlined cardLimit and cardIncrease variables, we are able to improve the content material 10 occasions (assuming we’ve already loaded the primary 9 components) till we attain the restrict. We’ll do that by dividing the cardLimit by the cardIncrease.

const pageCount = Math.ceil(cardLimit / cardIncrease);

Then we’ll outline a worth to find out which web page we’re on:

let currentPage = 1;

Making a New Card

Now we have now all our constants, let’s make a perform so as to add a brand new card to the cardboard container. We’ll set the innerHTML of our playing cards to the index worth so we are able to hold observe of the variety of playing cards we’re including.

A enjoyable function on this demo is that every card has a randomly generated background coloration.

const getRandomColor = () => {
  const h = Math.flooring(Math.random() * 360);

  return `hsl(${h}deg, 90%, 85%)`;
};

const createCard = (index) => {
  const card = doc.createElement("div");
  card.className = "card";
  card.innerHTML = index;
  card.type.backgroundColor = getRandomColor();
  cardContainer.appendChild(card);
};

We will additionally apply this perform to our load-more button on web page load to provide it a random background coloration as effectively:

window.onload = perform () {
  loadMoreButton.type.backgroundColor = getRandomColor();
};

Including Playing cards to the Container

We’ll add our playing cards to our container utilizing the same performance to what we used within the Infinite Scrolling tutorial.

First, decide the vary of playing cards to be added to the web page. The addCards perform will settle for a pageIndex parameter, which is able to replace the worldwide currentPage worth. If we’re on web page 1, we’ll add playing cards 1 to 9. If we’re on web page 2, we’ll add playing cards 10 to 18 and so forth.

We will outline that mathematically as:

const addCards = (pageIndex) => {
  currentPage = pageIndex;
  
  const startRange = (pageIndex - 1) * cardIncrease;
  const endRange = pageIndex * cardIncrease;
  
  for (let i = startRange + 1; i <= endRange; i++) {
    createCard(i);
  }
};

On this perform, our begin vary will at all times be one lower than the worth we’re attempting to get (i.e. on web page 1, the beginning vary is 0, on web page 2, the beginning vary is 9) so we’ll account for that by setting the worth of our for loop index to startRange + 1.

Detecting When Card Restrict is Reached

A restrict we’ll must look out for is the endRange quantity. If we’re on the final web page, we’ll need our finish vary to be the identical because the cardLimit. As an illustration, if we have now a cardLimit of 75 and a cardIncrease of 10 and we’re on web page 8, our startRange can be 70 and our endRange worth ought to be 75. 

We’ll modify our addCards perform to account for this:

const addCards = (pageIndex) => {
  currentPage = pageIndex;

  const startRange = (pageIndex - 1) * cardIncrease;
  const endRange = currentPage == pageCount ? cardLimit : pageIndex * cardIncrease;

  for (let i = startRange + 1; i <= endRange; i++) {
    createCard(i);
  }
};

Our demo additionally features a cardTotal component that shows the variety of playing cards at the moment being proven on the web page so we’ll set the innerHTML of this component as the top vary.

const addCards = (pageIndex) => {
  currentPage = pageIndex;

  const startRange = (pageIndex - 1) * cardIncrease;
  const endRange = currentPage == pageCount ? cardLimit : pageIndex * cardIncrease;
  
  cardCountElem.innerHTML = endRange;

  for (let i = startRange + 1; i <= endRange; i++) {
    createCard(i);
  }
};

One other factor to look out for is disabling the load extra button when the cardLimit is reached. We will outline a handleButtonStatus perform to find out whether or not to disable the button i.e. when the currentPage is the same as the cardLimit:

const handleButtonStatus = () => {
  if (pageCount === currentPage) {
    loadMoreButton.classList.add("disabled");
    loadMoreButton.setAttribute("disabled", true);
  }
};

We’ll then cross this new perform into our addCards perform:

const addCards = (pageIndex) => {
  currentPage = pageIndex;

  handleButtonStatus();

  const startRange = (pageIndex - 1) * cardIncrease;
  const endRange =
    pageIndex * cardIncrease > cardLimit ? cardLimit : pageIndex * cardIncrease;
  
  cardCountElem.innerHTML = endRange;

  for (let i = startRange + 1; i <= endRange; i++) {
    createCard(i);
  }
};

Loading Preliminary Playing cards

We’ve outlined a function for including playing cards to the container so we’ll replace our window.onload perform to set the preliminary playing cards to be added to the web page.

window.onload = perform () {
  addCards(currentPage);
  loadMoreButton.type.backgroundColor = getRandomColor();
};

Dealing with Load Extra

We’ll deal with including the content material by rising the currentPage quantity by 1 each time the load extra button is clicked. Since we’ve already added all of the restrict checks in our addCards perform, we gained’t have to do every other verify inside our click on occasion.

window.onload = perform () {
  addCards(currentPage);
  loadMoreButton.type.backgroundColor = getRandomColor();
  loadMoreButton.addEventListener("click on", () => {
    addCards(currentPage + 1);
  });
};

Conclusion

And we’re carried out! We’ve efficiently applied a “Load Extra” button function on our net web page!