Showing posts with label Currency Converter Tool. Show all posts
Showing posts with label Currency Converter Tool. Show all posts

Tuesday, 11 July 2023

100%free Currency Converter Tool To Download

<!DOCTYPE html>

<html>

<head>

  <title>Currency Converter</title>

  <style>

    body {

      font-family: Arial, sans-serif;

      margin: 0;

      padding: 20px;

      background-color: #f2f2f2;

    }


    h1 {

      text-align: center;

      color: #333;

    }


    .converter {

      max-width: 500px;

      margin: 0 auto;

      background-color: #fff;

      padding: 20px;

      border-radius: 5px;

      box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);

    }


    .form-group {

      margin-bottom: 15px;

    }


    .form-group label {

      display: block;

      margin-bottom: 5px;

      color: #666;

    }


    .form-group select,

    .form-group input {

      width: 100%;

      padding: 10px;

      font-size: 16px;

      border-radius: 3px;

      border: 1px solid #ddd;

    }


    .form-group input {

      text-align: right;

    }


    .btn-convert {

      display: block;

      width: 100%;

      padding: 10px;

      background-color: #4caf50;

      color: #fff;

      text-align: center;

      text-decoration: none;

      border-radius: 3px;

      cursor: pointer;

      transition: background-color 0.3s;

    }


    .btn-convert:hover {

      background-color: #45a049;

    }


    .result {

      margin-top: 20px;

      background-color: #f9f9f9;

      padding: 15px;

      border-radius: 5px;

    }

  </style>

</head>

<body>

  <h1>Currency Converter</h1>

  <div class="converter">

    <div class="form-group">

      <label for="fromCurrency">From:</label>

      <select id="fromCurrency"></select>

    </div>

    <div class="form-group">

      <label for="toCurrency">To:</label>

      <select id="toCurrency"></select>

    </div>

    <div class="form-group">

      <label for="amount">Amount:</label>

      <input type="number" id="amount" placeholder="Enter amount" />

    </div>

    <a href="#" class="btn-convert" onclick="convertCurrency()">Convert</a>

    <div id="result" class="result"></div>

  </div>


  <script>

    // Fetch all currencies and populate the select dropdowns

    fetch('https://api.exchangerate-api.com/v4/latest/USD')

      .then(response => response.json())

      .then(data => {

        const currencies = Object.keys(data.rates);

        const fromCurrencySelect = document.getElementById('fromCurrency');

        const toCurrencySelect = document.getElementById('toCurrency');


        currencies.forEach(currency => {

          const option = document.createElement('option');

          option.value = currency;

          option.text = currency;

          fromCurrencySelect.appendChild(option);


          const option2 = document.createElement('option');

          option2.value = currency;

          option2.text = currency;

          toCurrencySelect.appendChild(option2);

        });

      });


    // Convert currency using ExchangeRate-API

    function convertCurrency() {

      const fromCurrency = document.getElementById('fromCurrency').value;

      const toCurrency = document.getElementById('toCurrency').value;

      const amount = document.getElementById('amount').value;


      const url = `https://api.exchangerate-api.com/v4/latest/${fromCurrency}`;


      fetch(url)

        .then(response => response.json())

        .then(data => {

          const rate = data.rates[toCurrency];

          const convertedAmount = (amount * rate).toFixed(2);

          const resultElement = document.getElementById('result');

          resultElement.innerHTML = `${amount} ${fromCurrency} = ${convertedAmount} ${toCurrency}`;

        })

        .catch(error => {

          console.log('Error:', error);

          const resultElement = document.getElementById('result');

          resultElement.innerHTML = 'An error occurred while fetching data.';

        });

    }

  </script>

</body>

</html>

Documentation

Step 1:- Open txt file from the folder for code


Step 2:- Copy all code 


Step 3:- Open your website dashboard or blog


Step 4:- Add HTML element 


Step 5:- Paste all code in your html element


Step 6:- Save file 


Done you are successfully Pasted code in your website.

            



PEJOYT Dog Paw Nail Scratch Pad -

  PEJOYT Dog Paw Nail Scratch Pad - Pet Nail File Board Trimming Scratcher Trimmer Box Emery Sandpaper Filing Scratchboard Polish Pads Anxie...