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:
- Outline quite a lot of playing cards to be added to the web page every time the consumer clicks the button.
- 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!