256 lines
7.5 KiB
JavaScript
256 lines
7.5 KiB
JavaScript
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 data = await fetch(`https://home.danielcortes.xyz/currency?base=${base}`)
|
|
const response = await data.json()
|
|
|
|
localStorage.setItem('currency', JSON.stringify(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.msnry = null;
|
|
this.imgs = [];
|
|
this.current_photos = null;
|
|
this.current_page = 1;
|
|
|
|
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})`
|
|
localStorage.setItem('background', url)
|
|
}
|
|
|
|
this.clear_photos = async () => {
|
|
this.imgs.forEach(img => {
|
|
this.msnry.remove(img)
|
|
})
|
|
this.msnry.layout()
|
|
this.imgs = []
|
|
}
|
|
|
|
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.fill_photos = async () => {
|
|
const photos = await this.query_photos(this.current_page)
|
|
const photos_div = document.getElementById('photos-div')
|
|
const photos_page = document.getElementById('photos-page')
|
|
const fragment = document.createDocumentFragment()
|
|
|
|
photos.results.forEach((photo) => {
|
|
const img = document.createElement('img')
|
|
img.src = photo.urls.small
|
|
img.alt = photo.alt
|
|
img.addEventListener('click', () => this.set_as_background(photo.urls.full))
|
|
|
|
fragment.appendChild(img)
|
|
this.imgs.push(img)
|
|
})
|
|
|
|
photos_page.innerHTML = this.current_page;
|
|
|
|
photos_div.appendChild(fragment)
|
|
await this.wait_for_load()
|
|
|
|
this.msnry.appended(this.imgs)
|
|
this.msnry.layout()
|
|
}
|
|
|
|
this.next_page = async () => {
|
|
this.current_page++
|
|
await this.clear_photos()
|
|
await this.fill_photos()
|
|
}
|
|
|
|
this.previous_page = async () => {
|
|
if(this.current_page - 1 >= 1) {
|
|
this.current_page--
|
|
await this.clear_photos()
|
|
await this.fill_photos()
|
|
}
|
|
}
|
|
|
|
this.on_load = async () => {
|
|
const previous_background = localStorage.getItem('background')
|
|
if(previous_background !== null) this.set_as_background(previous_background)
|
|
|
|
this.msnry = new Masonry( '.photos', {
|
|
itemSelector: 'img',
|
|
percentPosition: true,
|
|
gutter: 10,
|
|
});
|
|
|
|
await this.fill_photos()
|
|
|
|
document.getElementById('photos-next').addEventListener('click', this.next_page);
|
|
document.getElementById('photos-prev').addEventListener('click', this.previous_page);
|
|
}
|
|
}
|
|
|
|
const search = new function () {
|
|
this.search_bar = document.getElementById('search-input')
|
|
|
|
this.submit_search = (query) => {
|
|
const encoded = encodeURIComponent(query)
|
|
window.location.href = `https://www.duckduckgo.com/?q=${encoded}`
|
|
}
|
|
|
|
this.on_load = () => {
|
|
this.search_bar.addEventListener('keydown', (e) => {
|
|
if(e.key === 'Enter' && this.search_bar.value.length !== 0)
|
|
this.submit_search(this.search_bar.value)
|
|
})
|
|
}
|
|
}
|
|
|
|
const weather = new function () {
|
|
this.query_weather = async (city) => {
|
|
const data = await fetch(`https://home.danielcortes.xyz/weather?city=${city}`)
|
|
return await data.json()
|
|
}
|
|
|
|
this.show_weather = async () => {
|
|
const degrees_span = document.getElementsByClassName('weather-degrees')[0]
|
|
const where_span = document.getElementsByClassName('weather-where')[0]
|
|
const icon_img = document.getElementsByClassName('weather-icon')[0]
|
|
|
|
const weather = await this.query_weather('temuco')
|
|
|
|
degrees_span.innerHTML = `${weather.temp}º`;
|
|
where_span.innerHTML = weather.name;
|
|
icon_img.src = weather.icon;
|
|
}
|
|
|
|
this.on_load = () => {
|
|
this.show_weather()
|
|
}
|
|
}
|
|
|
|
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()
|
|
});
|