From 0eb8390986f58dc323311415e70048c75ba56fe2 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Daniel=20Cort=C3=A9s?= Date: Fri, 20 Nov 2020 20:45:16 -0300 Subject: [PATCH] Mejoras, muchas, me da paja hacer muchos commits en estas cosas --- index.html | 26 +++--- script.js | 229 ++++++++++++++++++++++++++++++++++------------------- styles.css | 63 ++++++++++++--- 3 files changed, 215 insertions(+), 103 deletions(-) diff --git a/index.html b/index.html index 7bf6e8b..e2eb0d7 100644 --- a/index.html +++ b/index.html @@ -9,21 +9,27 @@
-
-

Conversion de Divisa

- +
+
+
-
- - → - +
+
+ + +
+ + → + +
+ + +
- -

0

-
+ diff --git a/script.js b/script.js index b4461e2..6848b2d 100644 --- a/script.js +++ b/script.js @@ -1,89 +1,156 @@ -const query_currency = async (base) => { - // Llama a la api para obtener los datos de conversion de divisa - // guardando los datos en localstorage - // - // En caso que se vuelva a llamar esta funcion pidiendo la misma base - // se va a evitar llamar a la api y se obtendran los datos desde localstorage +const currency = new function() { + this.query_currency = async (base) => { + // Llama a la api para obtener los datos de conversion de divisa + // guardando los datos en localstorage + // + // En caso que se vuelva a llamar esta funcion pidiendo la misma base + // se va a evitar llamar a la api y se obtendran los datos desde localstorage - const old = JSON.parse(localStorage.getItem('currency')) - if (old != null && old.base === base) return old + const old = JSON.parse(localStorage.getItem('currency')) + if (old != null && old.base === base) return old - const data = await fetch(`https://home.danielcortes.xyz/currency?base=${base}`) - const response = await data.json() + const data = await fetch(`https://home.danielcortes.xyz/currency?base=${base}`) + const response = await data.json() - localStorage.setItem('currency', JSON.stringify(response)) + localStorage.setItem('currency', JSON.stringify(response)) - return response + return response + } + + this.convert = async (money, from, to) => { + // Hace la transformacion de una divisa a otra + // Adicionalmente lo formatea segun el locale del navegador + const data = await this.query_currency(from) + return (data.rates[to] * money).toLocaleString(undefined, {miminumFractionDigits: 2}) + } + + this.fill_currencies = async () => { + // Rellena los datos de los input select con las monedas + // disponibles en la api + // + // Por default deja seleccionados para from el USD y para + // to el CLP + + const data = await this.query_currency('USD') + const from_select = document.getElementById('currency-from') + const to_select = document.getElementById('currency-to') + + Object.keys(data.symbols).forEach(key => { + const option = document.createElement('option'); + + option.value = key + option.innerHTML = `${key}` + + const from_option = option.cloneNode(true) + const to_option = option.cloneNode(true) + + if(key === 'USD') { + from_option.selected = 'selected' + } + + if(key === 'CLP') { + to_option.selected = 'selected' + } + + from_select.appendChild(from_option) + to_select.appendChild(to_option) + }) + } + + this.show_currency = async () => { + // Muestra los datos del cambio de divisa con los datos + // que ingreso el usuario en los campos correspondientes + // + // eso de la validacion no existe aqui :3, es para nenas + + const money = document.getElementById('currency-money').value + + const from_select = document.getElementById('currency-from') + const to_select = document.getElementById('currency-to') + + const from = from_select.options[from_select.selectedIndex].value + const to = to_select.options[to_select.selectedIndex].value + + const result = await this.convert(money, from, to) + + document.getElementById('currency-result').value = `${result}` + } + + this.on_load = async () => { + document.getElementById('update-currency').addEventListener('click', this.show_currency) + this.fill_currencies().then(() => this.show_currency()) + } +} + +const photos = new function() { + this.current_photos = null; + + this.query_photos = async (page) => { + // Llama a la api para obtener una lista de imagenes + // guardando los datos en localstorage para cache + // + // En caso que se vuelva a llamar esta funcion pidiendo la misma pagina + // se va a evitar llamar a la api y se obtendran los datos desde la variable + // que la tiene almacenada o localstorage + + if (this.current_photos !== null && this.current_photos.page === page) + return this.currrent_photos + + const old = JSON.parse(localStorage.getItem('photos')) + if (old != null && old.page=== page) return old + + const data = await fetch(`https://home.danielcortes.xyz/photos?page=${page}`) + const response = await data.json() + + this.current_photos = response + localStorage.setItem('page', JSON.stringify(response)) + + return this.current_photos; + } + + this.set_as_background = async (url) => { + document.querySelector('.container').style.backgroundImage= `url(${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.wait_for_load = () => { + return Promise.all(Array.from(document.images) + .filter(img => !img.complete) + .map(img => new Promise(resolve => { + img.onload = img.onerror = resolve; + }))) + } + + + this.on_load = async () => { + await this.fill_photos(1) + await this.wait_for_load() + + var msnry = new Masonry( '.photos', { + itemSelector: 'img', + percentPosition: true, + gutter: 10, + }); + } } -const currency = async (money, from, to) => { - // Hace la transformacion de una divisa a otra - // Adicionalmente lo formatea segun el locale del navegador - const data = await query_currency(from) - return (data.rates[to] * money).toLocaleString(undefined, {miminumFractionDigits: 2}) -} -const fill_currencies = async () => { - // Rellena los datos de los input select con las monedas - // disponibles en la api - // - // Por default deja seleccionados para from el USD y para - // to el CLP - - const data = await query_currency('USD') - const from_select = document.getElementById('currency-from') - const to_select = document.getElementById('currency-to') - - Object.keys(data.symbols).forEach(key => { - const option = document.createElement('option'); - - option.value = key - option.innerHTML = `${key}` - - const from_option = option.cloneNode(true) - const to_option = option.cloneNode(true) - - if(key === 'USD') { - from_option.selected = 'selected' - } - - if(key === 'CLP') { - to_option.selected = 'selected' - } - - from_select.appendChild(from_option) - to_select.appendChild(to_option) - }) -} - -const show_currency = async () => { - // Muestra los datos del cambio de divisa con los datos - // que ingreso el usuario en los campos correspondientes - // - // eso de la validacion no existe aqui :3, es para nenas - - const money = document.getElementById('currency-money').value - - const from_select = document.getElementById('currency-from') - const to_select = document.getElementById('currency-to') - - const from = from_select.options[from_select.selectedIndex].value - const to = to_select.options[to_select.selectedIndex].value - - const result = await currency(money, from, to) - - document.getElementById('currency-result').innerHTML = `${result}` -} - - -const on_load = async () => { - // Cuando se carge la pagina se asignaran los event listeners - // necesarios para su funcionamiento y se ejecutaran funciones - // que rellenen datos - - document.getElementById('update-currency').addEventListener('click', show_currency) - fill_currencies().then(() => show_currency()) -} - -window.addEventListener('load', on_load) +window.addEventListener('load', () => { + currency.on_load() + photos.on_load() +}); diff --git a/styles.css b/styles.css index bf62c02..ab87512 100644 --- a/styles.css +++ b/styles.css @@ -1,18 +1,44 @@ -html { +* { + font-family: sans; +} + +.container { background-image: linear-gradient(to top, #4481eb 0%, #04befe 100%); background-repeat: no-repeat; + background-size: cover; + + display: grid; + padding: 10px; + height: 100vh; + + grid-template-columns: repeat(4, 1fr); + grid-template-rows: repeat(4, 1fr); + gap: 10px; } - -.container{ - display:flex; - flex-direction:column; - align-items:center; - justify-content:center; - height:100%; +#photos-box { + grid-row: 1 / 4; + grid-col: 1; } -.currency { +#currency-box { + grid-row: 4; + grid-col: 1; +} + +.box { + display: flex; + flex-direction: column; + justify-content: center; + + background-color: white; + padding: 1em; + border-radius: 4px; + + box-shadow: rgba(0, 0, 0, 0.4) 0px 30px 90px; +} + +.box .currency { display: flex; flex-direction: column; } @@ -35,25 +61,38 @@ html { .currency .title { font-size: 1.6em; + margin-bottom: .3em; + margin-top: 0; } -.currency .input{ +.currency input { width: 100%; padding: .6em 0; margin-bottom: .5em; + margin-top: .5em; } .currency .select { padding: .6em 0; - width: 5em; + width: 7ch; } .currency .result { font-weight: 600; - font-size: 1.5em; } .currency .button { padding: .6em 0; font-size: 1.1em; } + +.box .photos { + overflow-y: scroll; + overflow-x: hidden; +} + +.photos img { + width: 50%; + margin-bottom: 5px; +} +