Initial Commit

MatheusCampagnolo · May 17, 2024 · b854648 · b854648
1 parent 5b35a86
commit b854648
Show file tree

Hide file tree

Showing 3 changed files with 102 additions and 0 deletions.
diff --git a/index.html b/index.html
@@ -0,0 +1,29 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <link rel="stylesheet" href="styles/style.css">
+    <title>Currency Converter</title>
+</head>
+<body>
+    <h1>Currency Converter</h1>
+    <label for="source-currency">Choose the source currency:</label>
+    <select id="source-currency">
+        <!-- Currency options will be added here by JavaScript -->
+    </select>
+
+    <label for="destination-currency">Choose the destination currency:</label>
+    <select id="destination-currency">
+        <!-- Currency options will be added here by JavaScript -->
+    </select>
+
+    <label for="value">Value to convert:</label>
+    <input type="number" id="value" placeholder="Enter the value">
+
+    <button id="convert">Convert</button>
+
+    <p id="result"></p>
+
+    <script src="scripts/converter.js"></script>
+</body>
diff --git a/scripts/converter.js b/scripts/converter.js
@@ -0,0 +1,42 @@
+// Function to update currency options
+function updateCurrencyOptions() {
+    const currencies = ['USD', 'EUR', 'BRL', 'JPY']; // Add more currencies as needed
+    const selectSource = document.getElementById('source-currency');
+    const selectDestination = document.getElementById('destination-currency');
+
+    currencies.forEach(currency => {
+        selectSource.add(new Option(currency, currency));
+        selectDestination.add(new Option(currency, currency));
+    });
+}
+
+// Function to get the exchange rate from the AwesomeAPI
+function getExchangeRate(sourceCurrency, destinationCurrency, callback) {
+    const url = `https://economia.awesomeapi.com.br/last/${sourceCurrency}-${destinationCurrency}`;
+
+    fetch(url)
+        .then(response => response.json())
+        .then(data => {
+            const rate = data[`${sourceCurrency}${destinationCurrency}`].bid;
+            callback(rate);
+        })
+        .catch(error => console.error('Error fetching exchange rate:', error));
+}
+
+// Function to convert the value
+function convertCurrency() {
+    const sourceCurrency = document.getElementById('source-currency').value;
+    const destinationCurrency = document.getElementById('destination-currency').value;
+    const value = document.getElementById('value').value;
+
+    getExchangeRate(sourceCurrency, destinationCurrency, exchangeRate => {
+        const convertedValue = value * exchangeRate;
+        document.getElementById('result').textContent = `${value} ${sourceCurrency} is equal to ${convertedValue.toFixed(2)} ${destinationCurrency}`;
+    });
+}
+
+// Add click event to the convert button
+document.getElementById('convert').addEventListener('click', convertCurrency);
+
+// Update currency options on page load
+document.addEventListener('DOMContentLoaded', updateCurrencyOptions);
diff --git a/styles/style.css b/styles/style.css
@@ -0,0 +1,31 @@
+body {
+    font-family: Arial, sans-serif;
+    margin: 0;
+    padding: 0;
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    height: 100vh;
+    flex-direction: column;
+    background-color: #121212; 
+    color: #ffffff;
+}
+
+h1 {
+    margin-bottom: 20px;
+}
+
+label, select, input, button {
+    margin: 5px;
+    padding: 10px;
+    border-radius: 5px;
+    color: #ffffff;
+}
+
+select, input, button {
+    background-color: #2c2c2c; 
+}
+
+button {
+    cursor: pointer;
+}