The following article is encourages me to try and see what can be gone when you using only plain js:
For example - to display a list of GitHub users from previous post it is anough to use the native javascript "map" :
document.querySelector('#container')
.innerHTML = users.map(({login, count}) => `<li>${login} - <span>${count}</span></li>`).join('');
As result - the list with usernames and repos number will created on the page.
For completion of the picture we can add the "next" button that will display the next page:
<button onClick="go()">next</button>
<span>page:
<i id='currPage'></i>
</span>
<ul id='container'>
</ul>
The code for all this UI logic will be no more than 20 lines:
// getting data for page & displaying
function getPage(currentPage = -1) {
currentPage++;
// display loadign animation
showLoader();
getData(currentPage * 10).then((users) => {
// display the number of page
updatePage(currentPage + 1);
document.querySelector('#container')
.innerHTML = users.map(({login, count}) => `<li>${login} - <span>${count}</span></li>`).join('');
});
return currentPage;
}
// display loading animation
function showLoader() {
const img = '';
document.querySelector('#container').innerHTML = img;
}
// displayes page number
function updatePage(page) {
document.querySelector('#currPage').innerText = page;
}
// goes to nex page
function go() {
page = getPage(page);
}
// getting page first time
page = getPage();
This is very minimalistic, but yet - kind of SPA!
No comments:
Post a Comment