Terminada funcionalidad de fondos

script.js

@@ -83,7 +83,10 @@ const currency = new function() {
 }
 
 const photos = new function() {
+  this.msnry = null;
+  this.imgs = [];
   this.current_photos = null;
+  this.current_page = 1;
 
   this.query_photos = async (page) => {
     // Llama a la api para obtener una lista de imagenes
@@ -110,21 +113,15 @@ const photos = new function() {
 
   this.set_as_background = async (url) => {
     document.querySelector('.container').style.backgroundImage= `url(${url})`
+    localStorage.setItem('background', url)
   }
 
-  this.fill_photos = async (page) => {
-    const photos = await this.query_photos(page)
-    const photos_div = document.getElementById('photos-div')
-
-    photos.results.forEach((photo) => {
-      const img = document.createElement('img')
-      img.src = photo.urls.small
-      img.alt = photo.alt
-
-      photos_div.appendChild(img)
-      img.addEventListener('click', () => this.set_as_background(photo.urls.full))
+  this.clear_photos = async () => {
+    this.imgs.forEach(img => {
+      this.msnry.remove(img)
     })
-
+    this.msnry.layout()
+    this.imgs = []
   }
 
   this.wait_for_load = () => {
@@ -135,21 +132,62 @@ const photos = new function() {
       })))
   }
 
+  this.fill_photos = async () => {
+    const photos = await this.query_photos(this.current_page)
+    const photos_div = document.getElementById('photos-div')
+    const photos_page = document.getElementById('photos-page')
+    const fragment = document.createDocumentFragment()
 
-  this.on_load = async () => {
-    await this.fill_photos(1)
+    photos.results.forEach((photo) => {
+      const img = document.createElement('img')
+      img.src = photo.urls.small
+      img.alt = photo.alt
+      img.addEventListener('click', () => this.set_as_background(photo.urls.full))
+
+      fragment.appendChild(img)
+      this.imgs.push(img)
+    })
+
+    photos_page.innerHTML = this.current_page;
+
+    photos_div.appendChild(fragment)
     await this.wait_for_load()
 
-    var msnry = new Masonry( '.photos', {
+    this.msnry.appended(this.imgs)
+    this.msnry.layout()
+  }
+
+  this.next_page = async () => {
+      this.current_page++
+      await this.clear_photos()
+      await this.fill_photos()
+  }
+
+  this.previous_page = async () => {
+    if(this.current_page - 1 >= 1) {
+      this.current_page--
+      await this.clear_photos()
+      await this.fill_photos()
+    }
+  }
+
+  this.on_load = async () => {
+    const previous_background = localStorage.getItem('background')
+    if(previous_background !== null) this.set_as_background(previous_background)
+
+    this.msnry = new Masonry( '.photos', {
       itemSelector: 'img',
       percentPosition: true,
       gutter: 10,
     });
+
+    await this.fill_photos()
+
+    document.getElementById('photos-next').addEventListener('click', this.next_page);
+    document.getElementById('photos-prev').addEventListener('click', this.previous_page);
   }
 }
 
-
-
 window.addEventListener('load', () => {
   currency.on_load()
   photos.on_load()