Consumiendo frases de chuck norris porque la vida no tiene sentido

index.html

@@ -30,9 +30,9 @@
         <img class="weather-icon" src="http://openweathermap.org/img/wn/04n@4x.png"/> 
       </div>
 
-      <div id="custom-box" class="box">
+      <div id="quote-box" class="box">
-        <pre>
+        <p id="quote"></p>
-        </pre>
+        <button id="new-quote">Otra Frase</button>
       </div>
 
       <div id="currency-box" class="box">

script.js

@@ -227,9 +227,29 @@ const weather = new function () {
   }
 }
 
+const quotes = new function () {
+  this.query_quotes = async () => {
+    const data = await fetch(`https://home.danielcortes.xyz/quotes`)
+    return await data.json()
+  }
+
+  this.show_quote = async () => {
+    const quote_p = document.getElementById('quote')
+    const quote = await this.query_quotes()
+
+    quote_p.innerHTML = quote.quote
+  }
+
+  this.on_load = async () => {
+    this.show_quote()
+    document.getElementById('new-quote').addEventListener('click', this.show_quote)
+  }
+}
+
 window.addEventListener('load', () => {
   currency.on_load()
   photos.on_load()
   search.on_load()
   weather.on_load()
+  quotes.on_load()
 });

styles.css

@@ -16,7 +16,7 @@
   height: 100%;
   width: 100%;
   padding: 20px;
-  overflow: scroll;
+  overflow: auto;
 
   grid-template-columns: 300px 1fr 600px 1fr 300px;
   grid-template-rows: repeat(6, 1fr);
@@ -39,7 +39,7 @@
   grid-column: 5;
 }
 
-#custom-box {
+#quote-box {
   grid-row: 3 / 5;
   grid-column: 5;
 }
@@ -143,9 +143,8 @@
   margin-top: 10px;
 }
 
-.box .photos-controls button {
+button {
   padding: .6em 0;
-  font-weight: 500;
 }
 
 /*
@@ -191,3 +190,16 @@
   object-fit: contain;
   height: 130px;
 }
+
+/* Quote */
+
+#quote-box {
+  justify-content: space-between;
+}
+
+#quote {
+  display: flex;
+  height: 100%;
+  align-items: center;
+  overflow: auto;
+}