Pagination

Author: Narahari-Sundaragopalan

FE-JS-Questions/Accordion.md

@@ -53,7 +53,26 @@
 </div>
 ```
 
+> Basic CSS for Accordion to function
+
 ```css
+.AccordionPanel {
+  border-top: 2px solid grey;
+}
+
+.panelBody {
+  visibility: hidden;
+  overflow: hidden;
+  opacity: 0;
+  height: 0;
+  transition: opacity .25s visibility .25s;
+}
+
+.AccordionPanel.accordion-open .panelBody {
+  height: auto;
+  visibility: visible;
+  opacity: 1;
+}
 ```
 
 ```js

FE-JS-Questions/Pagination.md

@@ -0,0 +1,86 @@
+## Pagination
+
+```html
+<div class="list"></div>
+<div class="buttons">
+    <button class="first">First</button>
+    <button class="previous">Previous</button>
+    <button class="next">Next</button>
+    <button class="last">Last</button>
+</div>
+```
+
+```js
+const list = [];
+const currentPageList = [];
+let currentPage = 1;
+let numOfPages = 0;
+let itemsPerPage = 10;
+
+const makeList = (listLength) => {
+    for (let i = 1; i <= listLength; i++) {
+        list.push(i);
+    }
+
+    numOfPages = Math.ceil(listLength / itemsPerPage);
+}
+
+const drawList = () => {
+    const list = document.querySelector(".list");
+    let items = '';
+
+    for (let i = 0; i < currentPageList.length; i++) {
+        items += 'Item-' + currentPageList[i] + '<br/>';
+    }
+
+    list.innerHTML = items;
+}
+
+const updateButtons = () => {
+    document.querySelector(".next").disabled = currentPage === numOfPages ? true : false;
+    document.querySelector(".previous").disabled = currentPage === 1 ? true : false;
+}
+
+const loadList = (currentPage) => {
+    let start = (currentPage - 1) * itemsPerPage;
+    let end = start + itemsPerPage;
+
+    currentPageList = list.slice(start, end);
+    drawList();
+    updateButtons();
+};
+
+const goToPage = pageNum => {
+    currentPage = pageNum;
+    loadList(currentPage);
+};
+
+const nextPage = () => {
+    goToPage(currentPage + 1);
+};
+
+const prevPage = () => {
+    goToPage(currentPage - 1);
+};
+
+const firstPage = () => {
+    goToPage(1);
+};
+
+const lastPage = () => {
+    goToPage(numOfPages);
+};
+
+makeList(50);
+loadList(1);
+
+const nextButton = document.querySelector(".next");
+const prevButton = document.querySelector(".previous");
+const firstButton = document.querySelector(".first");
+const lastButton = document.querySelector(".last");
+
+nextButton.addEventListener('click', nextPage);
+prevButton.addEventListener('click', prevPage);
+firstButton.addEventListener('click', firstPage);
+lastButton.addEventListener('click', lastPage);
+```