В мире современной финансовой технологии валютная конвертация становится все более важной. Будь то для интернет-магазина, финансового приложения или просто для удобства путешественников, создание собственного конвертера на 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;

}

«`

НЕЙРОСЕТИ ДЛЯ ЖИЗНИ И КАРЬЕРЫ В 2025 году
Мы проанализировали рынок и готовы поделиться самой свежей информацией о том, как каждому эффективно взаимодействовать с нейросетями!
ТОП-подарки всем участникам лекции:
  • ТОП-подарки всем участникам лекции:Открытая лекция РЕГИСТРАЦИЯ пошаговая PDF-инструкция “Как сделать нейрофотосессию из своего фото бесплатно
  • подборка из 3800+ нейросетей
  • доступ в бот с безлимитным доступом к ChatGPT
Участвовать бесплатно

Шаг 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.

Заключение

ОНЛАЙН-ПРАКТИКУМ
КАК «ХАКНУТЬ» PYTHON С ПОМОЩЬЮ CHATGPT
ЧТО БУДЕТ НА ОБУЧЕНИИ?
  • Прямо в эфире решим типичные задачи программиста только с помощью ChatGPT
  • Возможности Python — расскажем что можно делать и сколько на этом зарабатывать?
  • Что ждет рынок программирования и почему мы решили сюда пойти
Участвовать бесплатно

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

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

Нейросети для жизни и карьеры в 2025:
как использовать для успеха
Вы узнаете о том:
  • Как нейросети могут изменить вашу деятельность, от фриланса до управления бизнесом.
  • Как использовать GPT-агентов, цифровые двойники и другие ИИ-решения.
  • Важность безопасности в эпоху нейросетей.
  • Какие нейросети помогут вам и как на них зарабатывать.
  • 10 способов применения ИИ для бизнеса.
Участвовать бесплатно
Как «хакнуть» Python с помощью ChatGPT
и стать «программистом будущего»
Вы узнаете:
  • Как внедрение ИИ в бизнес-процессы помогает улучшить финансовые результаты компаний в 2025 году.
  • Мы асскажем, кто такой промпт-инжинер, чем он занимается и какие результаты можно ожидать от его работы.
  • Также обсудим, где найти промт-инжинера, сколько стоят его услуги в России и за рубежем, и кто может стать промпт-инженером.
Участвовать бесплатно

3-дневный курс
НАУЧИСЬ СОЗДАВАТЬ TELEGRAM-БОТОВ НА PYTHON С CHATGPT
C НУЛЯ ЗА 3 ДНЯ
  • Освой Python и нейросети и узнай, как гарантированно получить первые 10 заказов
  • УЧАСТВОВАТЬ ЗА 0 РУБ.
  • Создай и прокачай собственного чат-бота
Участвовать бесплатно
Вебинар
ФРИЛАНС И ПРОЕКТНАЯ РАБОТАДЛЯ PYTHON-РАЗРАБОТЧИКА
  • Подарим подборку бесплатных инструментов для написания кода
Участвовать бесплатно