am a new web developer and am working on a quote website. The main purpose of the website is to provide quotes for visitors. The website is so dynamic that the quotes get copied by a single button.
So now let's talk about my query.
So now think that the below ten sentences are ten quotes for my website
The cat is better than a dog.
Google is an open-source library.
Cats are better than ferrets.
Love books.
Life is short make it possible.
The cat is better than a dog.
Google is an open-source library.
Cats are better than ferrets.
Love books.
Life is short make it possible.
I needed a javascript where I can simply write these quotes and it should be displayed in HTML in this format. In simple words, each quote should be placed as given below. FORMAT
<div>
<p>The quote should come here</p>
</div>
That each quote should contain all the above elements.
I am a beginner at javascript so I am not so familiar with it. Although my friend gave me a javascript, it was out of my idea.
For reference My friends Javascript and Html respectively.
const resultEl = document.querySelector('.allquotes');
const pageSize = document.querySelector('select[name="page-size"]');
const pageCurr = document.querySelector('input[name="page-curr"]')
const resultCount = document.querySelector('.result-count')
const pageNoCurr = document.querySelector('.page-no-curr');
const pageNoCount = document.querySelector('.page-no-count')
const btnFirst = document.querySelector('.page-btn-first');
const btnPrev = document.querySelector('.page-btn-prev');
const btnNext = document.querySelector('.page-btn-next');
const btnLast = document.querySelector('.page-btn-last');
let results = [];
const getResultCount = () => results.length;
const getPageSize = () => +pageSize.value;
const getCurrPage = () => +pageCurr.value;
const getPageCount = () => Math.ceil(getResultCount() / getPageSize());
const pageResponse = (records, pageSize, page) =>
(start => records.slice(start, Math.min(records.length, start + pageSize)))
(pageSize * (page - 1));
const main = async () => {
btnFirst.addEventListener('click', navFirst);
btnPrev.addEventListener('click', navPrev);
btnNext.addEventListener('click', navNext);
btnLast.addEventListener('click', navLast);
pageSize.addEventListener('change', changeCount);
results = retrieveAllStatuses();
updatePager(results);
redraw();
};
const redraw = () => {
resultEl.innerHTML = '';
const paged = pageResponse(results, getPageSize(), getCurrPage());
const ul = document.createElement('ul');
paged.forEach(record => {
const li = document.createElement('p');
li.textContent = JSON.stringify(record.quotes);
ul.append(li);
});
resultEl.append(ul);
};
const navFirst = (e) => {
pageNoCurr.textContent = 1;
pageCurr.value = 1;
redraw();
}
const navPrev = (e) => {
const pages = getPageCount();
const curr = getCurrPage();
const prevPage = curr > 1 ? curr - 1 : curr;
pageCurr.value = prevPage;
pageNoCurr.textContent = prevPage;
redraw();
}
const navNext = (e) => {
const pages = getPageCount();
const curr = getCurrPage();
const nextPage = curr < pages ? curr + 1 : curr;
pageCurr.value = nextPage;
pageNoCurr.textContent = nextPage;
redraw();
}
const navLast = (e) => {
pageNoCurr.textContent = getPageCount();
pageCurr.value = getPageCount();
redraw();
}
const changeCount = () => {
updatePager();
redraw();
};
const updatePager = () => {
const count = getPageCount();
const curr = getCurrPage();
pageCurr.value = curr > count ? 1 : curr;
pageNoCurr.textContent = curr > count ? 1 : curr;
pageNoCount.textContent = count;
resultCount.textContent = getResultCount();
};
const retrieveAllQuotes = () => [
{ quotes: "The cat is better than dog." },
{ quotes: "Google is a open source library."},
{ quotes: "Cats are better than ferrets." },
{ quotes: "Love books." },
{ quotes: "Life is short make it possible." },
{ quotes: "The cat is better than dog" },
{ quotes: "Google is a open source library."},
{ quotes: "Cats are better than ferrets." },
{ quotes: "Love books." },
{ quotes: "Life is short make it possible." },
];
main();
<div class="allsquotes"></div> <div class="pagable-status">
<label>Page <span class="page-no-curr">1</span> of <span class="page-no-count">1</span></label>
<div class="pagable-actions">
<button class="page-btn-first">≪</button>
<button class="page-btn-prev"><</button>
<input type="number" name="page-curr" min="1" value="1" />
<button class="page-btn-next">></button>
<button class="page-btn-last">≫</button>
<select name="page-size">
<option>5</option>
<option>10</option>
<option>20</option>
</select>
</div>
<label>(<span class="result-count"></span> items)</label>
</div>
</div>
retrieveAllQuotes() should be retrieveAllQuotes(). Also you can use the following inside redraw to use the format you specified.
const contents = document.createElement('div');
contents.innerHTML = paged.map(record => `<div><p>${record.quotes}</p></div>`).join('');
resultEl.append(contents);
Here is an example:
const resultEl = document.querySelector('.allquotes');
const pageSize = document.querySelector('select[name="page-size"]');
const pageCurr = document.querySelector('input[name="page-curr"]')
const resultCount = document.querySelector('.result-count')
const pageNoCurr = document.querySelector('.page-no-curr');
const pageNoCount = document.querySelector('.page-no-count')
const btnFirst = document.querySelector('.page-btn-first');
const btnPrev = document.querySelector('.page-btn-prev');
const btnNext = document.querySelector('.page-btn-next');
const btnLast = document.querySelector('.page-btn-last');
let results = [];
const getResultCount = () => results.length;
const getPageSize = () => +pageSize.value;
const getCurrPage = () => +pageCurr.value;
const getPageCount = () => Math.ceil(getResultCount() / getPageSize());
const pageResponse = (records, pageSize, page) =>
(start => records.slice(start, Math.min(records.length, start + pageSize)))
(pageSize * (page - 1));
const main = async() => {
btnFirst.addEventListener('click', navFirst);
btnPrev.addEventListener('click', navPrev);
btnNext.addEventListener('click', navNext);
btnLast.addEventListener('click', navLast);
pageSize.addEventListener('change', changeCount);
results = await retrieveAllQuotes();
updatePager(results);
redraw();
};
const redraw = () => {
resultEl.innerHTML = '';
const paged = pageResponse(results, getPageSize(), getCurrPage());
const contents = document.createElement('div');
contents.innerHTML = paged.map(record => `<div><p>${record.quotes}</p></div>`).join('');
resultEl.append(contents);
};
const navFirst = (e) => {
pageNoCurr.textContent = 1;
pageCurr.value = 1;
redraw();
}
const navPrev = (e) => {
const pages = getPageCount();
const curr = getCurrPage();
const prevPage = curr > 1 ? curr - 1 : curr;
pageCurr.value = prevPage;
pageNoCurr.textContent = prevPage;
redraw();
}
const navNext = (e) => {
const pages = getPageCount();
const curr = getCurrPage();
const nextPage = curr < pages ? curr + 1 : curr;
pageCurr.value = nextPage;
pageNoCurr.textContent = nextPage;
redraw();
}
const navLast = (e) => {
pageNoCurr.textContent = getPageCount();
pageCurr.value = getPageCount();
redraw();
}
const changeCount = () => {
updatePager();
redraw();
};
const updatePager = () => {
const count = getPageCount();
const curr = getCurrPage();
pageCurr.value = curr > count ? 1 : curr;
pageNoCurr.textContent = curr > count ? 1 : curr;
pageNoCount.textContent = count;
resultCount.textContent = getResultCount();
};
const retrieveAllQuotes = async function() {
// write your asynchronous fetching here
return [{
quotes: "1The cat is better than dog."
},
{
quotes: "2Google is a open source library."
},
{
quotes: "3Cats are better than ferrets."
},
{
quotes: "4Love books."
},
{
quotes: "5Life is short make it possible."
},
{
quotes: "6The cat is better than dog"
},
{
quotes: "7Google is a open source library."
},
{
quotes: "8Cats are better than ferrets."
},
{
quotes: "9Love books."
},
{
quotes: "10Life is short make it possible."
},
];
}
main();<div class="allquotes"></div>
<div class="pagable-status">
<label>Page <span class="page-no-curr">1</span> of <span class="page-no-count">1</span></label>
<div class="pagable-actions">
<button class="page-btn-first">≪</button>
<button class="page-btn-prev"><</button>
<input type="number" name="page-curr" min="1" value="1" />
<button class="page-btn-next">></button>
<button class="page-btn-last">≫</button>
<select name="page-size">
<option>5</option>
<option>10</option>
<option>20</option>
</select>
</div>
<label>(<span class="result-count"></span> items)</label>
</div>