Конвертер валют на JS

Question

Мне нужно реализовать конвертер валют с использованием JS. Сумма берется из инпута и с помощью выбора в селектах должны происходить вычисления и результат подставляться с div convert_result. Желательно чтобы результат появлялся мгновенно, то есть во время набора суммы в инпуте без какого-либо доп. действия (клика на кнопку и тп) Курсы я интегрирую в любое место и сделаю их невидимыми. Сейчас пока не вводил их

<div class="convert_block_item">
                <input type="text" placeholder="введите сумму..."/>
                <select>
                  <option>USD</option>
                  <option>TSJ</option>
                  <option>RUB</option>
                </select>
              </div>
              <div class="convert_block_item">
                <div class="convert_result">= 00,000</div>
                <select>
                  <option>USD</option>
                  <option>TSJ</option>
                  <option>RUB</option>
                </select>
              </div>

Answer 1

    window.onload = function () {
        let c = {'USD':'78', 'EUR':'85.60', 'RUB':'1'}; // Устанавливаем курс валют

        let val = document.getElementById('val'); // Получаем элемент ввода данных
        let currency1 = document.getElementById('cur1'); // Получаем первый селект
        let currency2 = document.getElementById('cur2'); // Получаем второй селект
        let result = document.getElementsByClassName('convert_result')[0]; // Получаем поле куда будем писать результат
        function summ() { // Делаем функцию
            let z = 0;
            if(currency1.value === currency2.value){ // Если оба значения в селектах равны
                result.innerText = val.value; // То просто вписываем данные из поля ввода
            } else {
                if(currency1.value != 'RUB'){ // Если не равны рублю, то
                    z = val.value*c[currency1.value]; // Переводим сумму в рубли
                    result.innerHTML = Math.ceil((z/c[currency2.value])*100)/100; // Делим на курс и округляем до сотых
                } else { // Если не равны
                    result.innerHTML = Math.ceil((val.value*c[currency2.value])*100)/100; // Умножаем на курс и округляем до сотых
                }
            }
        }
        val.oninput = function () { // При вводе данных в поле вызываем функцию.
            summ();
        };
        currency1.onchange = function () { // При смене первого селекта вызываем функцию.
            summ();
        };
        currency2.onchange = function () { // При смене второго селекта вызываем функцию.
            summ();
        }
    }

<div class="convert_block_item">
    <input type="number" id="val" placeholder="введите сумму..."/>
    <select id="cur1">
        <option>USD</option>
        <option>EUR</option>
        <option>RUB</option>
    </select>
</div>
<div class="convert_block_item">
    <div class="convert_result">= 00,000</div>
    <select id="cur2">
        <option>USD</option>
        <option>EUR</option>
        <option>RUB</option>
    </select>
</div>

Answer 2

С запросом по курсу валют по API:

    window.onload = function () {
        $.getJSON("https://www.cbr-xml-daily.ru/daily_json.js", function(data) { // Получаем курс валют
            let s1 = data.Valute.USD.Value; // Получаем Доллар
            let s2 = data.Valute.EUR.Value; // Получаем Евро
            let c = {'USD':s1, 'EUR':s2, 'RUB':'1'}; // Устанавливаем курс валют

        let val = document.getElementById('val'); // Получаем элемент ввода данных
        let currency1 = document.getElementById('cur1'); // Получаем первый селект
        let currency2 = document.getElementById('cur2'); // Получаем второй селект
        let result = document.getElementsByClassName('convert_result')[0]; // Получаем поле куда будем писать результат
        function summ() { // Делаем функцию
            let z = 0;
            if(currency1.value === currency2.value){ // Если оба значения в селектах равны
                result.innerText = val.value; // То просто вписываем данные из поля ввода
            } else {
                if(currency1.value != 'RUB'){ // Если не равны рублю, то
                    z = val.value*c[currency1.value]; // Переводим сумму в рубли
                    result.innerHTML = Math.ceil((z/c[currency2.value])*100)/100; // Делим на курс и округляем до сотых
                } else { // Если не равны
                    result.innerHTML = Math.ceil((val.value*c[currency2.value])*100)/100; // Умножаем на курс и округляем до сотых
                }
            }
        }
        val.oninput = function () { // При вводе данных в поле вызываем функцию.
            summ();
        };
        currency1.onchange = function () { // При смене первого селекта вызываем функцию.
            summ();
        };
        currency2.onchange = function () { // При смене второго селекта вызываем функцию.
            summ();
        }

        });
    }

<script
    src="https://code.jquery.com/jquery-3.4.1.js"
    integrity="sha256-WpOohJOqMqqyKL9FccASB9O0KwACQJpFTUBLTYOVvVU="
    crossorigin="anonymous"></script>
<div class="convert_block_item">
    <input type="number" id="val" placeholder="введите сумму..."/>
    <select id="cur1">
        <option>USD</option>
        <option>EUR</option>
        <option>RUB</option>
    </select>
</div>
<div class="convert_block_item">
    <div class="convert_result">= 00,000</div>
    <select id="cur2">
        <option>USD</option>
        <option>EUR</option>
        <option>RUB</option>
    </select>
</div>

Answer 3


const PRECISION = 10_000;

const exRate = {
  'USD':78, 
  'EUR':85.6, 
  'RUB':1, 
};                                                                      

const amountInput = document.getElementById('amount');                   
const amountOutput = document.getElementById('convertedAmount');        
const currencyFromSelect = document.getElementById('currencyFrom');      
const currencyToSelect = document.getElementById('currencyTo');           

  
function convertAmount() {          
  const amount = amountInput.value;                                
  const currencyFrom = currencyFromSelect.value;
  const currencyTo = currencyToSelect.value;

  if (currencyFrom === currencyTo){                                    
    amountOutput.value = amount;
    return;                                                    
  }
  
  if (currencyFrom != 'RUB') {                                          
    const conversion = amount * exRate[currencyFrom];                             
    amountOutput.value = Math.round((conversion / exRate[currencyTo]) * PRECISION) / PRECISION;           
    } else if (currencyTo != 'RUB') {                                         
    const conversion = amount / exRate[currencyTo];                            
    amountOutput.value = Math.round((conversion / exRate[currencyFrom]) * PRECISION) / PRECISION;      
  }
}

    <span>
        <input oninput="convertAmount()" type="number" id="amount" placeholder="введите сумму..." value=""/>
        <select onchange="convertAmount()"  id="currencyFrom">
            <option value="USD">Dollar</option>
            <option value="EUR">Euro</option>
            <option value="RUB">Rouble</option>
            <option value="TJS">Somoni</option>
        </select>
    </span>
    <br />
    <br />
    <br />
    <span>
        <footer>
            <input  type="number" id="convertedAmount" placeholder="вывод конвертации" value=""/>
            <select onchange="convertAmount()" id="currencyTo">
                <option value="USD">Dollar</option>
                <option value="EUR">Euro</option>
                <option value="RUB">Rouble</option>
                <option value="TJS">Somoni</option>
            </select>
        </footer>
    </span>

Answer 4

window.addEventListener('load', () => { // Вешаем прослушку на событие load

   const currency = { USD: 78, EUR: 85.60, RUB: 1 }; // Устанавливаем курс валют

   const state = [ 0, 'USD', 'USD' ]; // Начальное состояние

   const result = document.getElementsByClassName('convert_result')[0] // Получаем поле куда будем писать результат

   document.getElementById('val')
      .addEventListener('input', ({ target }) => listener(target.value, 0)) // Получаем элемент ввода данных и вешаем на него слушатель
   document.getElementById('cur1')
      .addEventListener('change', ({ target }) => listener(target.value, 1)) // Получаем первый селект и вешаем на него слушатель
   document.getElementById('cur2')
      .addEventListener('change', ({ target }) => listener(target.value, 2)) // Получаем второй селект и вешаем на него слушатель

   const listener = (value, key) => { // Обработчик событий
      state[key] = value; // Обновляем состояние
      result.innerHTML = summ(...state) // Пишем результат
   }
   
   function summ(val, cur1, cur2) { // Делаем функцию
      let z = 0;
      if(cur1 === cur2){ // Если оба значения в селектах равны
         return val; // То просто вписываем данные из поля ввода
      } else {
         if(cur1 != 'RUB'){ // Если не равны рублю, то
               z = val*currency[cur1]; // Переводим сумму в рубли
               return Math.ceil((z/currency[cur2])*100)/100; // Делим на курс и округляем до сотых
         } else { // Если не равны
               return Math.ceil((val*currency[cur2])*100)/100; // Умножаем на курс и округляем до сотых
         }
      }
   }
   
})

<div class="convert_block_item">
    <input type="number" id="val" placeholder="введите сумму..."/>
    <select id="cur1">
        <option>USD</option>
        <option>EUR</option>
        <option>RUB</option>
    </select>
</div>
<div class="convert_block_item">
    <div class="convert_result">= 00,000</div>
    <select id="cur2">
        <option>USD</option>
        <option>EUR</option>
        <option>RUB</option>
    </select>
</div>

БЛОГ НА HUSL

Конвертер валют на JS

Ответы (4 шт):