diff --git a/index.html b/index.html
index fdba1e5..bc9a23b 100644
--- a/index.html
+++ b/index.html
@@ -30,9 +30,9 @@
-
-
-
+
diff --git a/script.js b/script.js
index f872239..eb5e65c 100644
--- a/script.js
+++ b/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()
});
diff --git a/styles.css b/styles.css
index c87af11..b7a4f7c 100644
--- a/styles.css
+++ b/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;
+}