diff --git a/bg.jpg b/bg.jpg new file mode 100644 index 0000000..f8ec5d0 Binary files /dev/null and b/bg.jpg differ diff --git a/index.html b/index.html index 6c1ad65..b42ba86 100644 --- a/index.html +++ b/index.html @@ -4,12 +4,16 @@ + Currency Converter -

Conversion

-From: + - - - -To: - - -

-Conversion: -

-

Reversed conversion

-From: - - - -To: - - - -

-Conversion: -

+

+ + diff --git a/resize-svgrepo-com.svg b/resize-svgrepo-com.svg new file mode 100644 index 0000000..1fee145 --- /dev/null +++ b/resize-svgrepo-com.svg @@ -0,0 +1,11 @@ + + + + + + \ No newline at end of file diff --git a/script.js b/script.js index 886f341..2334437 100644 --- a/script.js +++ b/script.js @@ -1,7 +1,7 @@ async function api(base){ - const res = await fetch(`https://api.exchangeratesapi.io/latest?base=${base}`); + const res = await fetch(`https://v6.exchangerate-api.com/v6/aa74a76fa349403ebf36b1ff/latest/${base}`); const data = await res.json(); - return data.rates; + return data.conversion_rates; } async function convert(){ @@ -13,40 +13,15 @@ async function convert(){ coef = 1; } var val = document.getElementById('val').value; - document.getElementById('res').textContent = Number((val*coef).toFixed(2)).toLocaleString('en') + ' ' +document.getElementById('curr2').value; -} - -async function convert2(){ - const base = document.getElementById('rev').value; - const rates = await api(base); - const cur = document.getElementById('rev2').value; - var coef = rates[cur]; - if (base==cur){ - coef = 1; - } - var val = document.getElementById('val2').value; - document.getElementById('res2').textContent = Number((val*coef).toFixed(2)).toLocaleString('en') + ' ' +document.getElementById('rev2').value; + document.getElementById('res').value = Number((val*coef).toFixed(2)).toLocaleString('en'); } const from1 = document.getElementById('curr'); const to1 = document.getElementById('curr2'); -const from2 = document.getElementById('rev'); -const to2 = document.getElementById('rev2'); - -from1.onchange = function(a){ - to2.value = a.target.value; -}; - -to1.onchange = function(a){ - from2.value = a.target.value; -}; - -from2.onchange = function(a){ - to1.value = a.target.value; -}; - -to2.onchange = function(a){ - from1.value = a.target.value; -}; +function change(){ + tmp = from1.value; + from1.value = to1.value; + to1.value = tmp; +} diff --git a/style.css b/style.css new file mode 100644 index 0000000..4881a92 --- /dev/null +++ b/style.css @@ -0,0 +1,103 @@ +html { + height: 100%; + margin: 0; + padding: 0; + +} +body { + background-image: url("bg.jpg"); + height: 100%; + margin: 0; + padding: 0; +} + +.panel { + height: 60%; + margin-left: 15%; + margin-right: 15%; + margin-top: 15%; + font-size: 15px; + text-align: center; + text-decoration: none; + outline: none; + color: #000000; + background-color: #9e79c0; + border: none; + border-radius: 15px; + box-shadow: 0 9px 9px 9px #55335c; +} +.content { + margin-top: -10%; + position: relative; + top: 50%; + left: 50%; + transform: translate(-50%, -50%); +} +.input { + max-width: 15%; + min-width: 15%; + color: #000000; + background-color: #ffffff; + border: none; + border-radius: 15px; + padding: 3px; + text-align: center; +} + +.result { + max-width: 15%; + min-width: 15%; + color: #000000; + background-color: #ffffff; + border: none; + border-radius: 15px; + padding: 3px; + text-align: center; + margin-right: 3px; +} + +.change { + border: none; + background-color: #9e79c0; + cursor: pointer; +} +.change:active { + border: none; + background-color: #55335c; +} +.convert { + padding: 10px 20px; + text-align: center; + text-decoration: none; + outline: none; + color: #000000; + background-color: #a925c4; + border: none; + border-radius: 15px; + box-shadow: 0 9px #7e5683; + border: none; + cursor: pointer; +} +.convert:active { + border: none; + background-color: #7e5683; +} + +.myTitle { + padding-bottom: 10%; +} + +input[type=number]::-webkit-inner-spin-button, +input[type=number]::-webkit-outer-spin-button { + -webkit-appearance: none; + margin: 0; +} + +input[type=number] { + -moz-appearance: textfield; +} + +select { + max-width: 48px; + font-size: x-small; +} \ No newline at end of file