Home

commit d646c259849fd50b173a1e581e3051e10b707cfa Author: Daniel Cortés Date: Fri Nov 20 15:58:00 2020 -0300 Initial Commit diff --git a/index.html b/index.html new file mode 100644 index 0000000..7bf6e8b --- /dev/null +++ b/index.html @@ -0,0 +1,29 @@ + + + + + + + Home + + +

+ +

Conversion de Divisa

+ + +

+ + → + +

+ +

+ + + diff --git a/normalize.css b/normalize.css new file mode 100644 index 0000000..37b3ecc --- /dev/null +++ b/normalize.css @@ -0,0 +1,299 @@ +/*! modern-normalize v1.0.0 | MIT License | https://github.com/sindresorhus/modern-normalize */ + +/* +Document +======== +*/ + +/** +Use a better box model (opinionated). +*/ + +*, +*::before, +*::after { + box-sizing: border-box; +} + +/** +Use a more readable tab size (opinionated). +*/ + +:root { + -moz-tab-size: 4; + tab-size: 4; +} + +/** +1. Correct the line height in all browsers. +2. Prevent adjustments of font size after orientation changes in iOS. +*/ + +html { + line-height: 1.15; /* 1 */ + -webkit-text-size-adjust: 100%; /* 2 */ +} + +/* +Sections +======== +*/ + +/** +Remove the margin in all browsers. +*/ + +body { + margin: 0; +} + +/** +Improve consistency of default fonts in all browsers. (https://github.com/sindresorhus/modern-normalize/issues/3) +*/ + +body { + font-family: + system-ui, + -apple-system, /* Firefox supports this but not yet `system-ui` */ + 'Segoe UI', + Roboto, + Helvetica, + Arial, + sans-serif, + 'Apple Color Emoji', + 'Segoe UI Emoji'; +} + +/* +Grouping content +================ +*/ + +/** +1. Add the correct height in Firefox. +2. Correct the inheritance of border color in Firefox. (https://bugzilla.mozilla.org/show_bug.cgi?id=190655) +*/ + +hr { + height: 0; /* 1 */ + color: inherit; /* 2 */ +} + +/* +Text-level semantics +==================== +*/ + +/** +Add the correct text decoration in Chrome, Edge, and Safari. +*/ + +abbr[title] { + text-decoration: underline dotted; +} + +/** +Add the correct font weight in Edge and Safari. +*/ + +b, +strong { + font-weight: bolder; +} + +/** +1. Improve consistency of default fonts in all browsers. (https://github.com/sindresorhus/modern-normalize/issues/3) +2. Correct the odd 'em' font sizing in all browsers. +*/ + +code, +kbd, +samp, +pre { + font-family: + ui-monospace, + SFMono-Regular, + Consolas, + 'Liberation Mono', + Menlo, + monospace; /* 1 */ + font-size: 1em; /* 2 */ +} + +/** +Add the correct font size in all browsers. +*/ + +small { + font-size: 80%; +} + +/** +Prevent 'sub' and 'sup' elements from affecting the line height in all browsers. +*/ + +sub, +sup { + font-size: 75%; + line-height: 0; + position: relative; + vertical-align: baseline; +} + +sub { + bottom: -0.25em; +} + +sup { + top: -0.5em; +} + +/* +Tabular data +============ +*/ + +/** +1. Remove text indentation from table contents in Chrome and Safari. (https://bugs.chromium.org/p/chromium/issues/detail?id=999088, https://bugs.webkit.org/show_bug.cgi?id=201297) +2. Correct table border color inheritance in all Chrome and Safari. (https://bugs.chromium.org/p/chromium/issues/detail?id=935729, https://bugs.webkit.org/show_bug.cgi?id=195016) +*/ + +table { + text-indent: 0; /* 1 */ + border-color: inherit; /* 2 */ +} + +/* +Forms +===== +*/ + +/** +1. Change the font styles in all browsers. +2. Remove the margin in Firefox and Safari. +*/ + +button, +input, +optgroup, +select, +textarea { + font-family: inherit; /* 1 */ + font-size: 100%; /* 1 */ + line-height: 1.15; /* 1 */ + margin: 0; /* 2 */ +} + +/** +Remove the inheritance of text transform in Edge and Firefox. +1. Remove the inheritance of text transform in Firefox. +*/ + +button, +select { /* 1 */ + text-transform: none; +} + +/** +Correct the inability to style clickable types in iOS and Safari. +*/ + +button, +[type='button'], +[type='reset'], +[type='submit'] { + -webkit-appearance: button; +} + +/** +Remove the inner border and padding in Firefox. +*/ + +::-moz-focus-inner { + border-style: none; + padding: 0; +} + +/** +Restore the focus styles unset by the previous rule. +*/ + +:-moz-focusring { + outline: 1px dotted ButtonText; +} + +/** +Remove the additional ':invalid' styles in Firefox. +See: https://github.com/mozilla/gecko-dev/blob/2f9eacd9d3d995c937b4251a5557d95d494c9be1/layout/style/res/forms.css#L728-L737 +*/ + +:-moz-ui-invalid { + box-shadow: none; +} + +/** +Remove the padding so developers are not caught out when they zero out 'fieldset' elements in all browsers. +*/ + +legend { + padding: 0; +} + +/** +Add the correct vertical alignment in Chrome and Firefox. +*/ + +progress { + vertical-align: baseline; +} + +/** +Correct the cursor style of increment and decrement buttons in Safari. +*/ + +::-webkit-inner-spin-button, +::-webkit-outer-spin-button { + height: auto; +} + +/** +1. Correct the odd appearance in Chrome and Safari. +2. Correct the outline style in Safari. +*/ + +[type='search'] { + -webkit-appearance: textfield; /* 1 */ + outline-offset: -2px; /* 2 */ +} + +/** +Remove the inner padding in Chrome and Safari on macOS. +*/ + +::-webkit-search-decoration { + -webkit-appearance: none; +} + +/** +1. Correct the inability to style clickable types in iOS and Safari. +2. Change font properties to 'inherit' in Safari. +*/ + +::-webkit-file-upload-button { + -webkit-appearance: button; /* 1 */ + font: inherit; /* 2 */ +} + +/* +Interactive +=========== +*/ + +/* +Add the correct display in Chrome and Safari. +*/ + +summary { + display: list-item; +} + diff --git a/script.js b/script.js new file mode 100644 index 0000000..67abbc0 --- /dev/null +++ b/script.js @@ -0,0 +1,89 @@ +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 old = JSON.parse(localStorage.getItem('currency')) + if (old != null && old.base === base) return old + + const data = await fetch(`http://localhost:8000/currency?base=${base}`) + const response = await data.json() + + localStorage.setItem('currency', JSON.stringify(response)) + + return response +} + + +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) diff --git a/styles.css b/styles.css new file mode 100644 index 0000000..bf62c02 --- /dev/null +++ b/styles.css @@ -0,0 +1,59 @@ +html { + background-image: linear-gradient(to top, #4481eb 0%, #04befe 100%); + background-repeat: no-repeat; +} + + +.container{ + display:flex; + flex-direction:column; + align-items:center; + justify-content:center; + height:100%; +} + +.currency { + display: flex; + flex-direction: column; +} + +.currency > * { + text-align: center; +} + +.currency .arrow { + display: inline-flex; + align-items: center; + font-size: 2em; +} + +.currency .select-group { + display: flex; + flex-direction: row; + justify-content: space-between; +} + +.currency .title { + font-size: 1.6em; +} + +.currency .input{ + width: 100%; + padding: .6em 0; + margin-bottom: .5em; +} + +.currency .select { + padding: .6em 0; + width: 5em; +} + +.currency .result { + font-weight: 600; + font-size: 1.5em; +} + +.currency .button { + padding: .6em 0; + font-size: 1.1em; +}