diff --git a/README.md b/README.md index ad3dbb5..7d52ee5 100644 --- a/README.md +++ b/README.md @@ -408,6 +408,17 @@ In order to run this project you need: +
  • +
    +Currency Converter +

    This project is a Currency Converter application built using HTML, CSS, and JavaScript. It allows users to convert one currency into another by inputting an amount and selecting the currencies they want to convert from and to.

    + +
    +
    • +

    (back to top)

    diff --git a/Source-Code/CurrencyConverter/index.html b/Source-Code/CurrencyConverter/index.html new file mode 100644 index 0000000..52d77f6 --- /dev/null +++ b/Source-Code/CurrencyConverter/index.html @@ -0,0 +1,33 @@ + + + + + + Currency Converter + + + +
    +

    Currency Converter

    +
    + + + to + + +
    +
    +
    + + + \ No newline at end of file diff --git a/Source-Code/CurrencyConverter/script.js b/Source-Code/CurrencyConverter/script.js new file mode 100644 index 0000000..afb6869 --- /dev/null +++ b/Source-Code/CurrencyConverter/script.js @@ -0,0 +1,27 @@ +document.getElementById('convert').addEventListener('click', () => { + const amount = document.getElementById('amount').value; + const fromCurrency = document.getElementById('from-currency').value; + const toCurrency = document.getElementById('to-currency').value; + + if (amount === '' || Number.isNaN(Number(amount))) { + alert('Please enter a valid amount'); + return; + } + + const apiUrl = `https://api.exchangerate-api.com/v4/latest/${fromCurrency}`; + + fetch(apiUrl) + .then((response) => response.json()) + .then((data) => { + const exchangeRate = data.rates[toCurrency]; + const convertedAmount = (amount * exchangeRate).toFixed(2); + document.getElementById( + 'result', + ).innerText = `${amount} ${fromCurrency} = ${convertedAmount} ${toCurrency}`; + }) + .catch((error) => { + document.getElementById( + 'result', + ).innerText = `Error fetching exchange rates. ${error}Try again later.`; + }); +}); diff --git a/Source-Code/CurrencyConverter/style.css b/Source-Code/CurrencyConverter/style.css new file mode 100644 index 0000000..e318503 --- /dev/null +++ b/Source-Code/CurrencyConverter/style.css @@ -0,0 +1,48 @@ +body { + font-family: Arial, sans-serif; + background-color: #f4f4f4; + margin: 0; + padding: 0; + display: flex; + justify-content: center; + align-items: center; + height: 100vh; +} + +.container { + background-color: white; + padding: 20px; + border-radius: 10px; + box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1); + width: 400px; + text-align: center; +} + +h1 { + margin-bottom: 20px; +} + +input, +select, +button { + margin: 10px 0; + padding: 10px; + font-size: 16px; +} + +button { + background-color: #4caf50; + color: white; + border: none; + cursor: pointer; +} + +button:hover { + background-color: #45a049; +} + +#result { + margin-top: 20px; + font-size: 18px; + font-weight: bold; +}