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

10
index.html
View File

@@ -9,8 +9,12 @@
<body> <body>
<div class="container"> <div class="container">
<div id="photos-box" class="box">
<div class="photos" id="photos-div"></div>
</div>
<div id="currency-box" class="box">
<div class="currency"> <div class="currency">
<h2 class="title">Conversion de Divisa</h2>
<input class="input" id="currency-money" type="number" value="1"/> <input class="input" id="currency-money" type="number" value="1"/>
<div class="select-group"> <div class="select-group">
@@ -19,11 +23,13 @@
<select class="select" id="currency-to"/></select> <select class="select" id="currency-to"/></select>
</div> </div>
<p class="result" id="currency-result">0</p> <input class="result" id="currency-result" readonly="readonly">
<button class="button" id="update-currency">Actualizar</button> <button class="button" id="update-currency">Actualizar</button>
</div> </div>
</div>
</div> </div>
<script defer src="script.js"></script> <script defer src="script.js"></script>
<script src="https://unpkg.com/masonry-layout@4/dist/masonry.pkgd.min.js"></script>
</body> </body>
</html> </html>

109
script.js
View File

@@ -1,4 +1,5 @@
const query_currency = async (base) => { const currency = new function() {
this.query_currency = async (base) => {
// Llama a la api para obtener los datos de conversion de divisa // Llama a la api para obtener los datos de conversion de divisa
// guardando los datos en localstorage // guardando los datos en localstorage
// //
@@ -14,24 +15,23 @@ const query_currency = async (base) => {
localStorage.setItem('currency', JSON.stringify(response)) localStorage.setItem('currency', JSON.stringify(response))
return response return response
} }
this.convert = async (money, from, to) => {
const currency = async (money, from, to) => {
// Hace la transformacion de una divisa a otra // Hace la transformacion de una divisa a otra
// Adicionalmente lo formatea segun el locale del navegador // Adicionalmente lo formatea segun el locale del navegador
const data = await query_currency(from) const data = await this.query_currency(from)
return (data.rates[to] * money).toLocaleString(undefined, {miminumFractionDigits: 2}) return (data.rates[to] * money).toLocaleString(undefined, {miminumFractionDigits: 2})
} }
const fill_currencies = async () => { this.fill_currencies = async () => {
// Rellena los datos de los input select con las monedas // Rellena los datos de los input select con las monedas
// disponibles en la api // disponibles en la api
// //
// Por default deja seleccionados para from el USD y para // Por default deja seleccionados para from el USD y para
// to el CLP // to el CLP
const data = await query_currency('USD') const data = await this.query_currency('USD')
const from_select = document.getElementById('currency-from') const from_select = document.getElementById('currency-from')
const to_select = document.getElementById('currency-to') const to_select = document.getElementById('currency-to')
@@ -55,9 +55,9 @@ const fill_currencies = async () => {
from_select.appendChild(from_option) from_select.appendChild(from_option)
to_select.appendChild(to_option) to_select.appendChild(to_option)
}) })
} }
const show_currency = async () => { this.show_currency = async () => {
// Muestra los datos del cambio de divisa con los datos // Muestra los datos del cambio de divisa con los datos
// que ingreso el usuario en los campos correspondientes // que ingreso el usuario en los campos correspondientes
// //
@@ -71,19 +71,86 @@ const show_currency = async () => {
const from = from_select.options[from_select.selectedIndex].value const from = from_select.options[from_select.selectedIndex].value
const to = to_select.options[to_select.selectedIndex].value const to = to_select.options[to_select.selectedIndex].value
const result = await currency(money, from, to) const result = await this.convert(money, from, to)
document.getElementById('currency-result').innerHTML = `${result}` 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 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) window.addEventListener('load', () => {
fill_currencies().then(() => show_currency()) currency.on_load()
} photos.on_load()
});
window.addEventListener('load', 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-image: linear-gradient(to top, #4481eb 0%, #04befe 100%);
background-repeat: no-repeat; 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;
} }
#photos-box {
.container{ grid-row: 1 / 4;
display:flex; grid-col: 1;
flex-direction:column;
align-items:center;
justify-content:center;
height:100%;
} }
.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; display: flex;
flex-direction: column; flex-direction: column;
} }
@@ -35,25 +61,38 @@ html {
.currency .title { .currency .title {
font-size: 1.6em; font-size: 1.6em;
margin-bottom: .3em;
margin-top: 0;
} }
.currency .input{ .currency input {
width: 100%; width: 100%;
padding: .6em 0; padding: .6em 0;
margin-bottom: .5em; margin-bottom: .5em;
margin-top: .5em;
} }
.currency .select { .currency .select {
padding: .6em 0; padding: .6em 0;
width: 5em; width: 7ch;
} }
.currency .result { .currency .result {
font-weight: 600; font-weight: 600;
font-size: 1.5em;
} }
.currency .button { .currency .button {
padding: .6em 0; padding: .6em 0;
font-size: 1.1em; font-size: 1.1em;
} }
.box .photos {
overflow-y: scroll;
overflow-x: hidden;
}
.photos img {
width: 50%;
margin-bottom: 5px;
}