diff --git a/codigo/Cambio/cambio.html b/codigo/Cambio/cambio.html new file mode 100644 index 0000000..f66525f --- /dev/null +++ b/codigo/Cambio/cambio.html @@ -0,0 +1,344 @@ + + + + + + Sua Página Web + + + + + +
+ +
+ +
+
+

Conversão de Moeda

+
+ + + + + + + +
+

Valor convertido:

+
+ + +
+ + \ No newline at end of file diff --git a/codigo/Cambio/script.js b/codigo/Cambio/script.js new file mode 100644 index 0000000..a3c3c1d --- /dev/null +++ b/codigo/Cambio/script.js @@ -0,0 +1,18 @@ +async function convert() { + const amount = document.getElementById('amount').value; + const fromCurrency = document.getElementById('fromCurrency').value; + const toCurrency = document.getElementById('toCurrency').value; + + if (amount === "" || isNaN(amount)) { + alert("Por favor, insira um valor válido."); + return; + } + + const response = await fetch(`https://api.exchangerate-api.com/v4/latest/${fromCurrency}`); + const data = await response.json(); + + const rate = data.rates[toCurrency]; + const result = amount * rate; + + document.getElementById('result').innerText = `${amount} ${fromCurrency} = ${result.toFixed(2)} ${toCurrency}`; +} \ No newline at end of file diff --git a/codigo/Cambio/style.css b/codigo/Cambio/style.css new file mode 100644 index 0000000..dc5bb8a --- /dev/null +++ b/codigo/Cambio/style.css @@ -0,0 +1,66 @@ +/* Estilos gerais */ +body { + font-family: Arial, sans-serif; + margin: 0; + padding: 0; +} + +navbar { + border-bottom: 1px solid; +} + +nav-item { + padding-left: 30px; +} + +main { + max-width: 800px; + margin: 20px auto; + padding: 0 20px; +} + +section { + margin-bottom: 20px; +} + +h2 { + color: #333; +} + +label { + display: block; + margin-top: 10px; +} + +select, input { + width: 100%; + padding: 8px; + margin-top: 5px; + margin-bottom: 15px; + border: 1px solid #ccc; + border-radius: 5px; +} + +button { + padding: 8px 20px; + background-color: #333; + color: #fff; + border: none; + border-radius: 5px; + cursor: pointer; +} + +button:hover { + background-color: #555; +} + +table { + width: 100%; + border-collapse: collapse; +} + +table th, table td { + border: 1px solid #ccc; + padding: 8px; + text-align: left; +}