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; +}