Приложение для конвертации валют 💰🌍

Быстро и просто конвертируйте валюты по актуальному курсу с помощью нашего удобного онлайн-конвертера. Выбирайте валюты, вводите сумму и получайте точный результат в реальном времени. Подходит для путешествий и онлайн-шопинга.

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

✨ Демо проекта | 📂 Скачать исходный код на GitHub

🤖 В приложении Кодик вы можете изучить HTML, CSS и JavaScript, а также много других курсов, чтобы начать свой путь в веб-разработке! 🌱

1. Описание проекта ✨

Наше приложение для конвертации валют позволит пользователю выбрать валюту, в которой он хочет ввести сумму, и конвертировать её в другую валюту по актуальному курсу. Мы будем использовать API для получения актуальных курсов валют. Интерфейс приложения будет интуитивно понятным и простым, чтобы любой новичок мог легко в нем разобраться. 🌐

2. Подготовка к проекту 🛠️

Для того чтобы начать, нам понадобятся следующие инструменты и ресурсы:

  • Текстовый редактор (например, VS Code) для написания кода.

  • Браузер для тестирования работы приложения.

  • API для получения курсов валют. Мы будем использовать бесплатный API от Exchangerate-API, который позволяет получать актуальные данные о курсах валют. Для этого нужно зарегистрироваться на сайте и получить ключ API.

Как только у вас будет ключ API, мы сможем интегрировать его в наш проект и использовать для конвертации валют. 🚀

3. Шаги разработки 🖥️

Шаг 1: Создаем HTML

HTML - это основа нашего приложения. С помощью HTML мы создадим структуру для ввода данных и отображения результата.

Вот как будет выглядеть основной файл index.html:

<!DOCTYPE html>
<!-- Сделано командой coursme - https://coursme.com/ -->
<html lang="ru" dir="ltr">
<head>
  <meta charset="utf-8">
  <title>Приложение для конвертации валют | Coursme</title>
  <link rel="stylesheet" href="style.css">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <!-- Ссылка на CDN для иконок FontAwesome -->
  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.3/css/all.min.css"/>
</head>
<body>
<div class="wrapper">
  <header>Конвертер валют</header>
  <form action="#">
    <div class="amount">
      <p>Введите сумму</p>
      <input type="text" value="1">
    </div>
    <div class="drop-list">
      <div class="from">
        <p>Из</p>
        <div class="select-box">
          <img src="https://flagcdn.com/48x36/us.png" alt="flag">
          <select> <!-- Опции добавляются через JavaScript --> </select>
        </div>
      </div>
      <div class="icon"><i class="fas fa-exchange-alt"></i></div>
      <div class="to">
        <p>В</p>
        <div class="select-box">
          <img src="https://flagcdn.com/48x36/np.png" alt="flag">
          <select> <!-- Опции добавляются через JavaScript --> </select>
        </div>
      </div>
    </div>
    <div class="exchange-rate">Получение обменного курса...</div>
    <button>Получить обменный курс</button>
  </form>
</div>

<script src="js/country-list.js"></script>
<script src="js/script.js"></script>

</body>
</html>

Шаг 2: Стилизация с помощью CSS

Теперь давайте добавим немного стилей, чтобы наше приложение выглядело аккуратно и красиво. Вот как будет выглядеть файл styles.css:

/* Import Google Font - Poppins */
@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@400;500;600;700&display=swap');
*{
  margin: 0;
  padding: 0;
  box-sizing: border-box;
  font-family: 'Poppins', sans-serif;
}
body{
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 100vh;
  padding: 0 10px;
  background: #11152C;
}
::selection{
  color: #fff;
  background: #11152C;
}
.wrapper{
  width: 370px;
  padding: 30px;
  border-radius: 7px;
  background: #fff;
  box-shadow: 7px 7px 20px rgba(0, 0, 0, 0.05);
}
.wrapper header{
  font-size: 28px;
  font-weight: 500;
  text-align: center;
}
.wrapper form{
  margin: 40px 0 20px 0;
}
form :where(input, select, button){
  width: 100%;
  outline: none;
  border-radius: 5px;
  border: none;
}
form p{
  font-size: 18px;
  margin-bottom: 5px;
}
form input{
  height: 50px;
  font-size: 17px;
  padding: 0 15px;
  border: 1px solid #999;
}
form input:focus{
  padding: 0 14px;
  border: 2px solid #11152C;
}
form .drop-list{
  display: flex;
  margin-top: 20px;
  align-items: center;
  justify-content: space-between;
}
.drop-list .select-box{
  display: flex;
  width: 115px;
  height: 45px;
  align-items: center;
  border-radius: 5px;
  justify-content: center;
  border: 1px solid #999;
}
.select-box img{
  max-width: 21px;
}
.select-box select{
  width: auto;
  font-size: 16px;
  background: none;
  margin: 0 -5px 0 5px;
}
.select-box select::-webkit-scrollbar{
  width: 8px;
}
.select-box select::-webkit-scrollbar-track{
  background: #fff;
}
.select-box select::-webkit-scrollbar-thumb{
  background: #888;
  border-radius: 8px;
  border-right: 2px solid #ffffff;
}
.drop-list .icon{
  cursor: pointer;
  margin-top: 30px;
  font-size: 22px;
}
form .exchange-rate{
  font-size: 17px;
  margin: 20px 0 30px;
}
form button{
  height: 52px;
  color: #fff;
  font-size: 17px;
  cursor: pointer;
  background: #11152C;
  transition: 0.3s ease;
}
form button:hover{
  background: #11152C;
}

Шаг 3: Описание JavaScript-кода

В нашем приложении для конвертации валют на JavaScript мы будем выполнять несколько основных задач:

  1. Заполнение выпадающих списков с валютами: Сначала мы заполним оба выпадающих списка (fromCurrency и toCurrency) доступными валютами, используя данные о валютах, предоставленные в объекте country_list. Этот процесс включает добавление флагов и кодов валют в списки.

  2. Обработка выбора валют: Когда пользователь выбирает валюту в одном из выпадающих списков, мы автоматически обновим отображаемый флаг для каждой валюты, чтобы отразить выбор пользователя.

  3. Переключение валют с помощью иконки: Для удобства пользователя мы добавим возможность переключать валюты местами между полями "Из" и "В" через иконку обмена валют. При клике на иконку валюты будут обмениваться местами.

  4. Получение обменного курса: При нажатии кнопки "Получить обменный курс" или при изменении любой из валют, приложение отправит запрос на внешний API для получения актуального обменного курса между выбранными валютами. Мы будем использовать API от Exchangerate-API, чтобы получать актуальные данные о курсах валют.

  5. Отображение результатов: После получения курса, мы вычислим результат конвертации введенной суммы в выбранную валюту и отобразим его на экране. Если что-то пошло не так (например, нет интернета или API не отвечает), мы покажем ошибку.

Описание и функциональность кода

  1. Заполнение выпадающих списков: Мы будем использовать объект country_list, который содержит коды валют и соответствующие им страны. С помощью этого объекта мы заполним оба выпадающих списка (с валютами для полей "Из" и "В").

for (let i = 0; i < dropList.length; i++) {
    for (let currency_code in country_list) {
        let selected = i == 0 ? currency_code == "USD" ? "selected" : "" : currency_code == "NPR" ? "selected" : "";
        let optionTag = `<option value="${currency_code}" ${selected}>${currency_code}</option>`;
        dropList[i].insertAdjacentHTML("beforeend", optionTag);
    }
}

Здесь мы проходим по всем выпадающим спискам и добавляем в них валюты. По умолчанию для поля "Из" будет выбрана валюта USD, а для поля "В" — валюта NPR.

  1. Обновление флага при изменении валюты: Когда пользователь выбирает валюту, мы обновляем флаг, отображающий страну, к которой относится эта валюта. Для этого мы используем метод loadFlag, который будет менять изображение флага в теге <img>:

function loadFlag(element) {
    for (let code in country_list) {
        if (code == element.value) {
            let imgTag = element.parentElement.querySelector("img");
            imgTag.src = `https://flagcdn.com/48x36/${country_list[code].toLowerCase()}.png`;
        }
    }
}

  1. Переключение валют с помощью иконки: Пользователь может поменять местами валюты с помощью иконки обмена. При клике на эту иконку коды валют в полях "Из" и "В" меняются местами:

const exchangeIcon = document.querySelector("form .icon");
exchangeIcon.addEventListener("click", () => {
    let tempCode = fromCurrency.value;
    fromCurrency.value = toCurrency.value;
    toCurrency.value = tempCode;
    loadFlag(fromCurrency);
    loadFlag(toCurrency);
    getExchangeRate();
});

  1. Получение обменного курса: Когда пользователь нажимает кнопку "Получить обменный курс", или когда он меняет валюты, мы делаем запрос к API для получения текущего курса. API возвращает курс для выбранных валют, и мы вычисляем итоговую сумму:

function getExchangeRate() {
    const amount = document.querySelector("form input");
    const exchangeRateTxt = document.querySelector("form .exchange-rate");
    let amountVal = amount.value;
    if (amountVal == "" || amountVal == "0") {
        amount.value = "1";
        amountVal = 1;
    }

    const apiKey = 'f2cd93cc5c526e3204de8e90';  // Ваш API ключ
    exchangeRateTxt.innerText = "Получаем обменный курс...";

    let url = `https://v6.exchangerate-api.com/v6/${apiKey}/latest/${fromCurrency.value}`;

    fetch(url).then(response => response.json()).then(result => {
        let exchangeRate = result.conversion_rates[toCurrency.value];
        let totalExRate = (amountVal * exchangeRate).toFixed(2);
        exchangeRateTxt.innerText = `${amountVal} ${fromCurrency.value} = ${totalExRate} ${toCurrency.value}`;
    }).catch(() => {
        exchangeRateTxt.innerText = "Что-то пошло не так";
    });
}

Мы делаем запрос к API и используем полученный курс для вычисления итоговой суммы. Если произошла ошибка (например, проблемы с интернет-соединением), мы выводим сообщение об ошибке.

Важные моменты:

  • Предотвращение отправки формы: При нажатии на кнопку "Получить обменный курс" мы предотвращаем стандартное поведение формы (перезагрузку страницы) с помощью e.preventDefault(), чтобы вся обработка происходила на той же странице.

  • Валидация ввода: Мы проверяем, чтобы пользователь не ввел 0 или пустое значение в поле суммы. Если это происходит, по умолчанию мы используем значение 1.

  • Ключ API: В коде используется внешний API для получения актуальных курсов валют. Вы должны получить свой собственный ключ API, зарегистрировавшись на Exchangerate-API, чтобы заменить текущий ключ в коде.

  • Обновление флага: Мы обновляем изображение флага в теге <img> в зависимости от выбранной валюты, получая код страны из объекта country_list.

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

Полный код вы можете скачать на нашем GitHub

Заключение ✨

Теперь у вас есть рабочий конвертер валют, который использует актуальные курсы из API! Вы можете добавить больше валют или улучшить интерфейс по своему усмотрению. Не забывайте, что этот проект идеально подходит для новичков, так как он охватывает все основные аспекты веб-разработки: создание HTML-структуры, стилизация с помощью CSS и работа с API с использованием JavaScript. Удачи в разработке! 🎯

Для полного исходного кода и, возможно, дополнительных улучшений, загляни на наш GitHub.

Если у тебя возникнут вопросы, не стесняйся задавать их. Удачи в программировании, и пусть твои проекты всегда будут такими же интересными и увлекательными! 👊🌟

Бесплатно
Кодик: Интерактивное обучение!
Изучай HTML, JavaScript, CSS, Python, PHP, SQL, Git
Проходи практические уроки!
Получи сертификат!
Google Play App Store
Вам может быть интересно

Не нашли нужной статьи?
Напишите нам и ее сделаем!

Бесплатно
Кодик: Интерактивное обучение!
Изучай HTML, JavaScript, CSS, Python, PHP, SQL, Git
Проходи практические уроки!
Получи сертификат!
Google Play App Store
Главная
Курсы
Блог
Меню