Как создать веб-приложение для обмена валюты с помощью JavaScript

В этой статье я покажу вам, как создать свое первое приложение для обмена валюты.

во-первых, давайте посмотрим на ожидаемый результат:

Предварительные требования: файлы index.html, style.css и script.js и связать их вместе.

Шаг 1. Создайте пользовательский интерфейс.

мы начинаем с добавления элемента h1 для заголовка:

<h1>Currency Exchange</h1>

затем мы добавляем элемент таблицы с четырьмя строками (tr), первая строка содержит три тега заголовка (th), а остальные строки содержат по три ячейки (td) в каждой строке.

<table>
  <tr>
    <th>US Dollar</th>
    <th>1.000</th>
    <th>USD</th>
 
  </tr>
  <tr>
    <td>Euro</td>
    <td id="eur">1.000</td>
 <td>EUR</td>
  </tr>
  <tr>
    <td>Canadian Dollar</td>
    <td id="cad">1.000</td>
   <td>CAD</td>
  </tr>
    <tr>
    <td>Swiss Franc</td>
    <td id="chf">1.000</td>
   <td>CHF</td>
  </tr>
  
</table>

после этого мы добавляем ‹div› с контейнером id, который позже будет содержать диаграмму, и элемент холста, который будет использоваться для рисования диаграммы:

<div  id="container" class="container">
  <canvas id="myChart"></canvas>
</div>

теперь, после того как мы подготовили содержимое HTML, нам нужно добавить некоторые стили на страницу, начиная с элемента h1, мы добавляем следующие правила:

h1{
  text-align:center;
  font-family: Arial, Helvetica, sans-serif;
}

затем мы центрируем таблицу и добавляем к ней границы:

table,  td {
  border:1px solid black;
  margin:auto;
}

наконец, добавьте правила для элемента контейнера:

.container{
  width:500px;
  height:500px;
  margin:auto;
  margin-top:30px;
}

после того, как мы закончили с пользовательским интерфейсом, мы можем безопасно перейти к шагу 2.

Шаг 2. Получите данные о валюте из API обмена валюты:

Есть несколько доступных вариантов currency API, я нашел Frankfurter

хороший и простой вариант с большим разнообразием поддерживаемой валюты

поэтому начните с открытия script.js и добавьте следующий код для получения данных API

async function fetchData(){

const host = 'api.frankfurter.app';
let resp=await fetch(`https://${host}/latest?amount=1&from=EUR&to=USD`)
const data=await resp.json()
console.log(data.rates.USD)

} 
fetchData()

В этом коде мы использовали асинхронную функцию, поскольку выборка API является асинхронным процессом, мы использовали встроенный метод выборки для получения URI API и использовали ключевое слово await для ожидания ответа API
после того, как получили нужный нам запрос. чтобы преобразовать его из формата json в объект javascript, используя метод .json()
наконец, мы выводим на консоль соотношение между валютой и долларом США
что-то важное для обратите внимание, что мы отправили денежную сумму и валюту «от» и «до» в URL-запросах API:

последняя?amount=1&from=EUR&to=USD

теперь ожидаемый результат будет около: 1.09

после того, как мы закончили этот процесс, мы можем сделать то же самое и с несколькими валютами, но на этот раз сохранить вывод в массиве данных

async function fetchData(){
let data=[1]
const host = 'api.frankfurter.app';
let resp=await fetch(`https://${host}/latest?amount=1&from=EUR&to=USD`)
const data1=await resp.json()
data.push(data1.rates.USD)
 resp=await fetch(`https://${host}/latest?amount=1&from=CAD&to=USD`)
const data2=await resp.json()
data.push(data2.rates.USD)
 resp=await fetch(`https://${host}/latest?amount=1&from=CHF&to=USD`)
const data3=await resp.json()
data.push(data3.rates.USD)
}
fetchData()

обратите внимание, что первым элементом является data=[1], так как доллар США всегда равен 1 доллару США

теперь мы готовы привязать значения данных к элементам таблицы

  document.getElementById("eur").innerHTML=data[1]
  document.getElementById("cad").innerHTML=data[2]
  document.getElementById("chf").innerHTML=data[3]

какой вывод:

наконец, мы готовы перейти к третьему шагу, визуализировать результат

Шаг 3. Рисование гистограммы с помощью chartjs:

есть несколько вариантов рисования диаграмм в javascript, один из моих любимых — Chartjs
первым шагом нам нужно будет добавить cdn библиотеки в код HTMLвыше тег скрипта

<script src="https://cdn.jsdelivr.net/npm/chart.js"></script>
  
  <script src="script.js"></script>

то мы можем просто добавить в библиотеку запущенный код и конечно же изменить метки и передать массив данных в свойство data

const ctx = document.getElementById('myChart');

  new Chart(ctx, {
    type: 'bar',
    data: {
      labels: ['USD', 'EUR', 'CAD', 'CHF'],
      datasets: [{
        label: 'Exchange ratio',
        data: data,
        borderWidth: 1
      }]
    },
    options: {
      scales: {
        y: {
          beginAtZero: true
        }
      }
    }
  });

поэтому полный script.js выглядит так

async function fetchData(){
let data=[1]
const host = 'api.frankfurter.app';
let resp=await fetch(`https://${host}/latest?amount=1&from=EUR&to=USD`)
const data1=await resp.json()
data.push(data1.rates.USD)
 resp=await fetch(`https://${host}/latest?amount=1&from=CAD&to=USD`)
const data2=await resp.json()
data.push(data2.rates.USD)
 resp=await fetch(`https://${host}/latest?amount=1&from=CHF&to=USD`)
const data3=await resp.json()
data.push(data3.rates.USD)
document.getElementById("eur").innerHTML=data[1]
document.getElementById("cad").innerHTML=data[2]
document.getElementById("chf").innerHTML=data[3] 
const ctx = document.getElementById('myChart');

  new Chart(ctx, {
    type: 'bar',
    data: {
      labels: ['USD', 'EUR', 'CAD', 'CHF'],
      datasets: [{
        label: 'Exchange ratio',
        data: data,
        borderWidth: 1
      }]
    },
    options: {
      scales: {
        y: {
          beginAtZero: true
        }
      }
    }
  });
}

fetchData();

и окончательный результат будет выглядеть так:

Надеюсь, вам понравилась статья, вам также может понравиться: Распространенные ошибки JavaScript

Как создать веб-приложение для обмена валюты с помощью JavaScript

Похожие вопросы