Terminada funcionalidad de fondos

index.html

@@ -11,6 +11,23 @@
 
       <div id="photos-box" class="box">
         <div class="photos" id="photos-div"></div>
+        <div class="photos-controls">
+          <button id="photos-prev">Anterior</button>
+          <span id="photos-page">1</span>
+          <button id="photos-next">Siguiente</button>
+        </div>
+      </div>
+
+      <div id="search-box" class="box">
+        <input class="search-box" name="search" placeholder="Busqueda"/>
+      </div>
+
+      <div id="weather-box" class="box">
+        <p>Weather</p>
+      </div>
+
+      <div id="custom-box" class="box">
+        <p>Custom</p>
       </div>
 
       <div id="currency-box" class="box">

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()

styles.css

@@ -1,3 +1,7 @@
+/*
+ * BASE
+ */
+
 * {
   font-family: sans;
 }
@@ -6,24 +10,44 @@
   background-image: linear-gradient(to top, #4481eb 0%, #04befe 100%);
   background-repeat: no-repeat;
   background-size: cover;
+  background-position: center;
 
   display: grid;
   padding: 10px;
-  height: 100vh;
+  height: 100%;
+  width: 100%;
+  overflow: scroll;
 
-  grid-template-columns: repeat(4, 1fr);
-  grid-template-rows: repeat(4, 1fr);
-  gap: 10px;
+  grid-template-columns: repeat(10, minmax(130px, 1fr));
+  grid-template-rows: repeat(13, 1fr);
+  gap: 20px;
 }
 
 #photos-box {
+  grid-row: 1 / 14;
+  grid-column: 1 / 3;
+
+  justify-content: space-between;
+}
+
+#search-box {
+  grid-row: 2 / 4;
+  grid-column: 4 / 8;
+}
+
+#weather-box {
   grid-row: 1 / 4;
-  grid-col: 1;
+  grid-column: 9 / 11;
+}
+
+#custom-box {
+  grid-row: 4 / 10;
+  grid-column: 9 / 11;
 }
 
 #currency-box {
-  grid-row: 4;
-  grid-col: 1;
+  grid-row: 10 / 14;
+  grid-column: 9 / 11;
 }
 
 .box {
@@ -35,9 +59,13 @@
   padding: 1em;
   border-radius: 4px;
 
-  box-shadow: rgba(0, 0, 0, 0.4) 0px 30px 90px;
+  box-shadow: rgba(255, 255, 255, 0.1) 0px 1px 1px 0px inset, rgba(50, 50, 93, 0.25) 0px 50px 100px -20px, rgba(0, 0, 0, 0.3) 0px 30px 60px -30px;
 }
 
+/*
+ * Currency
+ */
+
 .box .currency {
   display: flex;
   flex-direction: column;
@@ -86,9 +114,14 @@
   font-size: 1.1em;
 }
 
+/*
+ * Photos
+ */
+
 .box .photos {
   overflow-y: scroll;
   overflow-x: hidden;
+  height: 100%;
 }
 
 .photos img {
@@ -96,3 +129,16 @@
   margin-bottom: 5px;
 }
 
+#photos-page {
+  display: inline-flex;
+  align-items: center;
+}
+
+.box .photos-controls {
+  display: flex;
+  flex-direction: row;
+  justify-content: space-between;
+
+  margin-top: 10px;
+}
+