final fix

src/index.html

@@ -22,10 +22,10 @@
 
     <!-- <include src="./partials/example.html"></include> -->
     <include src="./partials/header-film.html"></include>
-    <main>
+    <main class="default-height">
       <include src="./partials/main-movie.html"></include>
       <include src="./partials/modal-window.html"></include>
-      <div id="pagination" class="tui-pagination"></div>
+      <div id="pagination" class="tui-pagination" style="display: none"></div>
       <include src="./partials/button-to-top.html"></include>
     </main>
     <include src="./partials/footer.html"></include>

src/index.js

@@ -1,6 +1,6 @@
-import './js/generateTrandingCard';
-import './js/buttonToTop';
-import './js/local-storage-api/local-storage-api';
+import './js/home-page/homePage';
+import './js/widget/buttonToTop';
+import './js/all-api/local-storage-api';
 import './js/footer-modal';
-import './js/modalWindow';
+import './js/modal-film/modalWindow';
 // import './js/dark-theme';

src/js/dark-theme.js

@@ -1,4 +1,4 @@
-import { refs } from './refs';
+import { refs } from './helpers/refs';
 
 const THEME_KEY = 'siteCurrentTheme';
 const SWITCHER_POSITION = 'switcherPosition';

src/js/footer-modal.js

@@ -1,4 +1,4 @@
-import { refs } from './refs';
+import { refs } from './helpers/refs';
 
 refs.openModalBtn.addEventListener('click', toggleModal);
 refs.closeModalBtn.addEventListener('click', toggleModal);
@@ -7,27 +7,27 @@ refs.footerModal.addEventListener('click', onBackdropClick);
 function toggleModal() {
   refs.footerModal.classList.toggle('is-hidden');
 
-  if(!refs.footerModal.classList.contains('is-hidden')) {
-    window.addEventListener("keydown", onPressKeyESC);
+  if (!refs.footerModal.classList.contains('is-hidden')) {
+    window.addEventListener('keydown', onPressKeyESC);
     refs.body.classList.add('modal-scroll');
     refs.toTopBtn.classList.add('is-hidden');
     refs.body.style.overflow = 'hidden';
   } else {
-    window.removeEventListener("keydown", onPressKeyESC);
+    window.removeEventListener('keydown', onPressKeyESC);
     refs.body.classList.remove('modal-scroll');
     refs.toTopBtn.classList.remove('is-hidden');
     refs.body.style.overflow = 'visible';
   }
 }
 
 function onPressKeyESC(event) {
-  if (event.code === "Escape") {
+  if (event.code === 'Escape') {
     toggleModal();
   }
 }
 
 function onBackdropClick(event) {
-  if(event.target === event.currentTarget) {
+  if (event.target === event.currentTarget) {
     toggleModal();
   }
-}
+}

src/js/onMarkupCards.js → src/js/helpers/onMarkupCards.js

@@ -1,5 +1,5 @@
-import filmCards from '../templates/filmCards.hbs';
-import LocalStorageAPI from './local-storage-api/local-storage-api';
+import filmCards from '../../templates/filmCards.hbs';
+import LocalStorageAPI from '../all-api/local-storage-api';
 
 const localStorageAPI = new LocalStorageAPI();
 

src/js/helpers/pagination/options-of-pagination.js

@@ -0,0 +1,34 @@
+import sprite from '../../../images/icons/arrowssprite.svg';
+
+const arrowIcon = `${sprite}#icon-arrow`;
+const dotsIcon = `${sprite}#icon-dots`;
+
+export const options = {
+  totalItems: 20000,
+  itemsPerPage: 20,
+  visiblePages: 5,
+  page: 1,
+  centerAlign: true,
+  usageStatistics: false,
+  firstItemClassName: 'tui-first-child',
+  lastItemClassName: 'tui-next',
+  template: {
+    page: '<a href="#" class="tui-page-btn">{{page}}</a>',
+    currentPage:
+      '<strong class="tui-page-btn tui-is-selected">{{page}}p</strong>',
+    currentPage:
+      '<a href="#" class="tui-page-btn tui-is-selected">{{page}}</a>',
+    moveButton:
+      '<a href="#" class="tui-page-btn tui-{{type}} hide-{{type}}">' +
+      `<svg class="tui-ico-{{type}}" width="16" height="16"><use href="${arrowIcon}-{{type}}"></use></svg>` +
+      '</a>',
+    disabledMoveButton:
+      '<span class="tui-page-btn tui-is-disabled tui-{{type}}" onclick="return false">' +
+      '<span class="tui-ico-{{type}}" onclick="return false">{{type}}</span>' +
+      '</span>',
+    moreButton:
+      '<a href="#" class="tui-page-btn tui-{{type}}-is-ellip change-{{type}}">' +
+      `<svg class="tui-ico-ellip" width="14" height="14"><use href="${dotsIcon}"></use></svg>` +
+      '</a>',
+  },
+};

src/js/pagination-lib-options.js → src/js/helpers/pagination/pagination-lib-options.js

@@ -1,4 +1,4 @@
-import sprite from '../images/icons/arrowssprite.svg';
+import sprite from '../../../images/icons/arrowssprite.svg';
 
 const arrowIcon = `${sprite}#icon-arrow`;
 const dotsIcon = `${sprite}#icon-dots`;

src/js/generateTrandingCard.js → src/js/home-page/homePage.js

@@ -1,10 +1,10 @@
-import { refs } from './refs';
-import MovieApiService from './fetchModule';
-import localStorageAPI from './local-storage-api/local-storage-api';
-import { onMarkupCards } from './onMarkupCards';
+import { refs } from '../helpers/refs';
+import MovieApiService from '../all-api/fetchModule';
+import localStorageAPI from '../all-api/local-storage-api';
+import { onMarkupCards } from '../helpers/onMarkupCards';
 import Pagination from 'tui-pagination';
-import { options } from './options-of-pagination';
-import { initChangeOfThemeOnMain } from './dark-theme';
+import { options } from '../helpers/pagination/options-of-pagination';
+import { initChangeOfThemeOnMain } from '../dark-theme';
 // import openModal from'./modalWindow';
 
 const API = new MovieApiService();
@@ -34,6 +34,9 @@ function generateTrendingFilms() {
   API.fetchTrending().then(({ results, total_results }) => {
     pagination.setTotalItems(total_results);
     onMarkupCards(results, refs.trandingContainer);
+    if (refs.paginationContainer.style.display === 'none') {
+      refs.paginationContainer.removeAttribute('style');
+    }
     LS_API.saveTrendingCurentPage(results);
 
     refs.loader.classList.add('is-hidden');

src/js/libraryCard.js → src/js/library/libraryCard.js

@@ -1,6 +1,6 @@
 // import localStorageAPI from './local-storage-api/local-storage-api';
-import { onMarkupCards } from './onMarkupCards';
-import { refs } from './refs';
+import { onMarkupCards } from '../helpers/onMarkupCards';
+import { refs } from '../helpers/refs';
 
 // const LS_API = new localStorageAPI();
 

src/js/watchedQueue.js → src/js/library/watchedQueue.js

@@ -1,9 +1,9 @@
-import localStorageApi from './local-storage-api/local-storage-api';
+import localStorageApi from '../all-api/local-storage-api';
 import { generateLibraryContainer, logicLib } from './libraryCard';
-import { refs } from './refs';
+import { refs } from '../helpers/refs';
 import Pagination from 'tui-pagination';
-import { options } from './pagination-lib-options';
-import { initChangeOfThemeOnLib } from './dark-theme';
+import { options } from '../helpers/pagination/pagination-lib-options';
+import { initChangeOfThemeOnLib } from '../dark-theme';
 
 const LS_API = new localStorageApi();
 

src/js/modalWindow.js → src/js/modal-film/modalWindow.js

@@ -1,9 +1,9 @@
-import modalFilmCard from '../templates/movie-card.hbs';
-import { currentLibraryPageEL, currentPage } from './watchedQueue';
+import modalFilmCard from '../../templates/movie-card.hbs';
+import { currentLibraryPageEL, currentPage } from '../library/watchedQueue';
 // import generateLibraryContainer from './libraryCard';
-import localStorageAPI from './local-storage-api/local-storage-api';
-import { refs } from './refs';
-import MovieApiService from './fetchModule';
+import localStorageAPI from '../all-api/local-storage-api';
+import { refs } from '../helpers/refs';
+import MovieApiService from '../all-api/fetchModule';
 
 const API = new localStorageAPI();
 const FetchAPI = new MovieApiService();

src/js/refs-for-lib.js

@@ -1,5 +1,4 @@
 export const refsLib = {
-    watched: document.querySelector('.library--btn__watched'),
-    queue: document.querySelector('.library--btn__queue'),
+  watched: document.querySelector('.library--btn__watched'),
+  queue: document.querySelector('.library--btn__queue'),
 };
-

src/js/buttonToTop.js → src/js/widget/buttonToTop.js

@@ -1,7 +1,7 @@
 // const toTopBtn = document.querySelector('.button-to-top');
 // const svgIcon = document.querySelector('.to-top-icon');
 
-import { refs } from './refs';
+import { refs } from '../helpers/refs';
 
 refs.toTopBtn.addEventListener('click', onButtonClick);
 

src/library.js

@@ -1,4 +1,4 @@
-import './js/watchedQueue';
-import './js/modalWindow';
+import './js/library/watchedQueue';
+import './js/modal-film/modalWindow';
 // import './js/dark-theme';
 import './js/footer-modal';

src/partials/footer.html

@@ -1,5 +1,5 @@
-<footer>
-  <div class="footer__container">
+<footer class="footer">
+  <div class="container footer__container">
     <h2 class="footer__title">© 2022 | All Rights Reserved |</h2>
     <div class="footer__team">
       <p class="footer__paragraph">Developed with</p>