В мире современной финансовой технологии валютная конвертация становится все более важной. Будь то для интернет-магазина, финансового приложения или просто для удобства путешественников, создание собственного конвертера на JavaScript может быть очень полезным. В этой статье мы разберемся, как создать свой собственный конвертер валют на JavaScript, используя веб-технологии и внешние API.

Делаем код

Шаг 1: подготовка рабочего окружения

Перед тем как начать создание конвертера валют, необходимо подготовить рабочее окружение. Вам понадобятся знания по HTML, CSS и, конечно же, JavaScript. Также, убедитесь, что у вас есть доступ к интернету, так как мы будем использовать внешние данные через API.

Шаг 2: создание HTML-структуры

Для начала создадим базовую HTML-структуру для нашего приложения. Вот пример:

«`html

<!DOCTYPE html>

<html lang=»en»>

<head>

<meta charset=»UTF-8″>

<meta name=»viewport» content=»width=device-width, initial-scale=1.0″>

<title>Конвертер валют</title>

<link rel=»stylesheet» href=»styles.css»>

</head>

<body>

<h1>Конвертер валют</h1>

<div class=»converter»>

<input type=»number» id=»amount» placeholder=»Сумма»>

<select id=»fromCurrency»></select>

<span>в</span>

<select id=»toCurrency»></select>

<button id=»convert»>Конвертировать</button>

</div>

<div class=»result»>

<p>Результат: <span id=»convertedAmount»></span></p>

</div>

<script src=»script.js»></script>

</body>

</html>

«`

Шаг 3: стилизация с CSS

Следующим шагом создадим структуру стилей для нашего проекта. Создайте файл `styles.css` и добавьте следующий CSS код:

«`css

body {

font-family: Arial, sans-serif;

text-align: center;

}

h1 {

margin-top: 20px;

}

.converter {

margin: 20px;

}

select, input, button {

margin: 5px;

padding: 5px;

}

.result {

margin: 20px;

}

«`

ОБЗОРНЫЙ ПРАКТИКУМ ПО НАШУМЕВШИМ НЕЙРОСЕТЯМ
DEEPSEEK И QWEN За 2 часа сделаем полный обзор новых мощных AI-моделей, которые бросают вызов ChatGPT

ТОП-подарки всем участникам лекции:
  • Возможность получить Доступ в Нейроклуб на целый месяц
  • Как AI ускоряет работу и приносит деньги
  • За 2 часа вы получите четкий план, как начать работать с AI прямо сейчас!
Участвовать бесплатно

Шаг 4: получение данных о валютах через API

Для того чтобы конвертировать валюты, нам необходимы данные о текущих обменных курсах. Мы можем получить их с помощью внешних API. В этом примере мы будем использовать API Exchange Rates.

Создайте файл `script.js` и начнем получать данные:

«`javascript

// Получение данных через API

const currencyAPI = ‘https://api.exchangeratesapi.io/latest’;

async function fetchCurrencies() {

try {

const response = await fetch(currencyAPI);

const data = await response.json();

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

const fromCurrency = document.getElementById(‘fromCurrency’);

const toCurrency = document.getElementById(‘toCurrency’);

currencies.forEach(currency => {

const option1 = document.createElement(‘option’);

option1.value = currency;

option1.textContent = currency;

fromCurrency.appendChild(option1);

const option2 = document.createElement(‘option’);

option2.value = currency;

option2.textContent = currency;

toCurrency.appendChild(option2);

});

} catch (error) {

console.error(‘Ошибка при получении данных, error);

}

}

fetchCurrencies();

«`

Шаг 5: реализация конвертации

Теперь давайте добавим логику конвертации при нажатии кнопки «Конвертировать».

«`javascript

const convertButton = document.getElementById(‘convert’);

const amountInput = document.getElementById(‘amount’);

const fromCurrencySelect = document.getElementById(‘fromCurrency’);

const toCurrencySelect = document.getElementById(‘toCurrency’);

const convertedAmountSpan = document.getElementById(‘convertedAmount’);

convertButton.addEventListener(‘click’, () => {

const amount = amountInput.value;

const fromCurrency = fromCurrencySelect.value;

const toCurrency = toCurrencySelect.value;

// Здесь мы будем использовать данные с API для конвертации

// Пропущено для краткости

// Можно использовать API, подобное https://exchangeratesapi.io/

// Результат конвертации

const convertedAmount = amount * conversionRate;

convertedAmountSpan.textContent = convertedAmount.toFixed(2);

});

«`

Обратите внимание, что конверсионный коэффициент `conversionRate` необходимо получить с помощью выбранного API.

ОНЛАЙН-ПРАКТИКУМ
ЗАПУСК DEEPSEEK R1 ЛОКАЛЬНО НА СВОЕМ КОМПЬЮТЕРЕ
ЧТО БУДЕТ НА ОБУЧЕНИИ?
  • ПОКАЖЕМ, КАК РАЗВЕРНУТЬ МОДЕЛЬ DEEPSEEK R1 ПРЯМО НА СВОЁМ КОМПЬЮТЕРЕ
  • Где и как применять? Потестируем модель после установки на разных задачах
  • Как дообучить модель под себя?
Участвовать бесплатно

Заключение

Создание конвертера валют на JavaScript — это интересный и полезный проект, который может быть использован в различных веб-приложениях. Мы рассмотрели базовые шаги для создания такого конвертера, начиная с подготовки HTML и CSS, получения данных о валютах через API, и заканчивая реализацией конвертации валюты.

Вы можете доработать проект, добавив больше функциональности, такой как обновление курсов в реальном времени или сохранение предыдущих конверсий. А подробнее про код или даже low-code можно узнать на наших курсах.

РОССИЙСКИЕ НЕЙРОСЕТИ ДЛЯ ЖИЗНИ И КАРЬЕРЫ В 2025

Присоединяйся к онлайн-вебинару.

В прямом эфире разберем и потестируем лучшие на сегодняшний день отечественные ИИ!
Вы узнаете о том:
  • Выполним базовые задачи на российских нейросетях и посмотрим на результаты!
  • PDF-инструкцию «Как сделать нейрофотосессию из своего фото бесплатно, без иностранных карт и прочих сложностей»
  • Покажем 10+ способов улучшить свою жизнь с ИИ каждому — от ребенка и пенсионера до управленца и предпринимателя

Участвовать бесплатно

ОБЗОРНЫЙ ПРАКТИКУМ ПО НАШУМЕВШИМ НЕЙРОСЕТЯМ
DEEPSEEK И QWEN
За 2 часа сделаем полный обзор новых мощных AI-моделей, которые бросают вызов ChatGPT
Вы узнаете:
  • Возможность получить Доступ в Нейроклуб на целый месяц
  • Как AI ускоряет работу и приносит деньги
  • За 2 часа вы получите четкий план, как начать работать с AI прямо сейчас!

Участвовать бесплатно

Большой практикум
ЗАМЕНИ ВСЕ НЕЙРОСЕТИ НА ОДНУ — PERPLEXITY
ПОКАЖЕМ НА КОНКРЕТНЫХ КЕЙСАХ
  • Освой Perplexity и узнай, как пользоваться функционалом остальных ИИ в одном
  • УЧАСТВОВАТЬ ЗА 0 РУБ.
  • Расскажем, как получить подписку (240$) бесплатно
Участвовать бесплатно
ОНЛАЙН-ПРАКТИКУМ
ЗАПУСК DEEPSEEK R1 ЛОКАЛЬНО НА СВОЕМ КОМПЬЮТЕРЕ
ЧТО БУДЕТ НА ОБУЧЕНИИ?
  • ПОКАЖЕМ, КАК РАЗВЕРНУТЬ МОДЕЛЬ DEEPSEEK R1 ПРЯМО НА СВОЁМ КОМПЬЮТЕРЕ
Участвовать бесплатно