add button for each scenario

Author: iDevBrandon

forkify/src/js/controller.js

@@ -42,7 +42,7 @@ const controlSearchResults = async function () {
 
     // 3) Render results
     // resultsView.render(model.state.search.results); // its calling ALL
-    resultsView.render(model.getSearchResultsPage(1));
+    resultsView.render(model.getSearchResultsPage(6));
 
     // 4) Render initial pagination button
     paginationView.render(model.state.search);

forkify/src/js/views/paginationView.js

@@ -6,27 +6,56 @@ class PaginationView extends View {
   _parentElement = document.querySelector('.pagination');
 
   _generateMarkup() {
+    const curPage = this._data.page;
     // calculate how many pages we need
     const numPages = Math.ceil(
       this._data.results.length / this._data.resultsPerPage
     );
     console.log(numPages);
 
     // Page 1 and there are other pages
-    if (this._data.page === 1 && numPages > 1) {
-      return 'page 1';
+    if (curPage === 1 && numPages > 1) {
+      return `
+        <button class="btn--inline pagination__btn--next">
+            <span>Page ${curPage + 1}</span>
+            <svg class="search__icon">
+                <use href="${icons}#icon-arrow-right"></use>
+            </svg>
+        </button>
+      `;
     }
+
     // Last page
-    if (this._data.page === numPages && numPages > 1) {
-      return 'Last Page';
+    if (curPage === numPages && numPages > 1) {
+      return `
+        <button class="btn--inline pagination__btn--prev">
+            <svg class="search__icon">
+                <use href="${icons}#icon-arrow-left"></use>
+            </svg>
+            <span>Page ${curPage - 1}</span>
+        </button>
+      `;
     }
     // Other page
-    if (this._data.page < numPages) {
-      return 'other page';
+    if (curPage < numPages) {
+      return `
+        <button class="btn--inline pagination__btn--prev">
+            <svg class="search__icon">
+                <use href="${icons}#icon-arrow-left"></use>
+            </svg>
+            <span>Page ${curPage - 1}</span>
+        </button>
+        <button class="btn--inline pagination__btn--next">
+            <span>Page ${curPage + 1}</span>
+            <svg class="search__icon">
+                <use href="${icons}#icon-arrow-right"></use>
+            </svg>
+        </button>
+      `;
     }
 
     // page 1, and there are NO other pages
-    return 'only 1 page';
+    return '';
   }
 }