skrd/pagina-de-incio-universidad
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

Mejoras, muchas, me da paja hacer muchos commits en estas cosas

Browse Source
This commit is contained in:
Daniel Cortés
2020-11-20 20:45:16 -03:00
parent eb07a6d0c7
commit 0eb8390986
3 changed files with 215 additions and 103 deletions
Download Patch File Download Diff File Expand all files Collapse all files

26
index.html
View File

@@ -9,21 +9,27 @@
<body>
<div class="container">
<div class="currency">
<h2 class="title">Conversion de Divisa</h2>
<input class="input" id="currency-money" type="number" value="1"/>
<div id="photos-box" class="box">
<div class="photos" id="photos-div"></div>
</div>
<div class="select-group">
<select class="select" id="currency-from"></select>
<span class="arrow">&rarr;</span>
<select class="select" id="currency-to"/></select>
<div id="currency-box" class="box">
<div class="currency">
<input class="input" id="currency-money" type="number" value="1"/>
<div class="select-group">
<select class="select" id="currency-from"></select>
<span class="arrow">&rarr;</span>
<select class="select" id="currency-to"/></select>
</div>
<input class="result" id="currency-result" readonly="readonly">
<button class="button" id="update-currency">Actualizar</button>
</div>
<p class="result" id="currency-result">0</p>
<button class="button" id="update-currency">Actualizar</button>
</div>
</div>
<script defer src="script.js"></script>
<script src="https://unpkg.com/masonry-layout@4/dist/masonry.pkgd.min.js"></script>
</body>
</html>

229
script.js
View File

@@ -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()
});

63
styles.css
View File

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