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


Мне нужно реализовать конвертер валют с использованием 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>


0

покажите js код который вы пытались использовать, мы поможем дополнить или направить в правильное русло)

0

js пока нету, наоборот я хотел узнать по какому пути пойти, чтоб с самого начала пойти по верному пути

2

я могу задержаться с ответом, но вам стоило бы дождаться его, ожидайте.

Ответов: 2


Denis xyz

    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>


0

А я как-то пару лет назад для одного проекта делал такую штуку, но только еще и парсил курс с центробанка, очень удобно. Там есть у них специальная страница xml формата

1

@Sevastopol' как раз этим занимаюсь :^

0

Отлично, большое спасибо!

0

@Sevastopol' Добавил )))

0

@MoloF, очень интересно будет посмотреть на ваше решение. Я конечно тогда запарился с этим :)) Но насколько я помню, у них там вроде бы обновление не каждый день, или не по всем валютам, точно не помню. Но я тогда делал не только для доллара и евро, ещё нужны были и юани и чухани))

0

@Denis640Kb, ого, что-то у вас очень просто :)) у меня то там как-то совсем заумно получилось)) Надо вспомнить, почему. А кстати, выведите ещё курс отдельной строкой над формой, будет очень удобно. Ну от меня конечно жирные плюсы (+)

0

@Sevastopol' я запутался в конвертации, не укажите на ошибку? jsfiddle.net/nf51oqce/2 в математических вычислениях проблемы явно, не пойму как туда и обратно сделать все

0

@Sevastopol' я запутался в конвертации, не укажите на ошибку? jsfiddle.net/nf51oqce/2 в математических вычислениях проблемы явно, не пойму как туда и обратно сделать все. Я думаю что API мало, нужно к каждой валюте свой курс, если будет такое API в бесплатном доступе то сделаю сразу, а с текущим вариантом я даже не знаю куда двигаться, здесь только курс для рубля, не думаю что это решение задачи, ведь это не полноценный конвертер валют

0

@MoloF, что касается полноценного конвертера, здесь нужно хорошо подумать. Так сразу сложно сказать, я пока что не готов, нужно как-то понять логику, может быть и возможно. Ну я вам скажу, сделать полноценный конвертер валют с API ЦБ :)) это довольно сложная штука. Может быть нам привлечь еще и Дениса или Игоря?

0

@Sevastopol' можно сделать ответ общим и допилить силами SO

0

@MoloF, ну а почему бы и нет, конечно

0

@MoloF У Вас почти всё корректно, только надо подобрать немного другой подход. Сейчас стоит только умножение, что сбивает расчёты калькулятора. Если позволите - я могу немного изменить Ваш код на fiddle, создадим новый вопрос с полноценный калькулятор и разместите Ваш ответ. Можно Sevastopol`, AlexandrTT и StrangerInTheQ попросить анимацию сделать смены суммы )))

0

@Denis640Kb анимация не проблема, я уже делал с помощью Gsap это, а вот создать отдельный вопрос было бы хорошо, сейчас это сделаю спасибо!

0

@MoloF Добрый вечер. Добавил изменения для расчёта. Хорошо бы ещё добавить 2 вещи. 1 - Как-то продумать при изменении первого селекта - определять как поле вводилось последним (чтобы, например, вводишь в нижнем поле, а потом меняешь первый селект) 2 - Хорошо бы добавить анимацию изменения цифр, чтобы перелистывались ну по типу как на табло ))) Размещайте ответ - поставлю заслуженный Вами плюс ) И хорошо бы добавить российский рубль по идее. jsfiddle.net/bdr5ko7w/3

0

@Sevastopol' Может Вы сможете по анимации посоветовать ешё? )

0

@Denis640Kb, вот за рубль вы правильно говорите. Об этом то я и подумал первоначально, что здесь нужно понять какую-то логику, чтобы с помощью существующего айпи как-то еще привязать и его. А по анимации конечно, так с кондачка не скажу, должна какая-то интересная идея прийти. Обязательно поучаствую, конечно :)

Denis xyz

С запросом по курсу валют по 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>


0

Спасибо! Может пригодится в будущем. Дело в том, что данный сайт делаю для Таджикистана, и курс от центробанка не подходит, а с их банка (nbt.tj) не могу выгрузить курсы, так что придется или им писать вручную каждый день или думать что-то другое

0

Ну что Денис, берем банк Таджикистана? :))

1

nbt.tj/tj/kurs/export_xml.php?date=2020-03-27 отсюда nbt.tj/tj/kurs/kurs.php

1

Во, как это я не нашел) Огромнейшее спасибо!!!

задан
1 неделю 3 дня назад
просмотрен
48