KodikKodik
{}const=>[]async()letfn</>var
Web実践開発

通貨換算アプリ 💰🌍

便利なオンライン変換ツールを使用して、現在のレートで迅速かつ簡単に通貨を変換できます。通貨を選択し、金額を入力すると、リアルタイムで正確な結果が得られます。旅行やオンラインショッピングに最適です。

К

Kodik

著者

3分で読める

この記事では、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. 通貨のドロップダウンリストの入力: まず、country_list オブジェクトで提供された通貨データを使用して、両方のドロップダウンリスト (fromCurrency と toCurrency) を利用可能な通貨で埋めます。このプロセスには、リストにフラグと通貨コードを追加することが含まれます。

  2. 通貨選択の処理：ユーザーがドロップダウンリストの1つで通貨を選択すると、ユーザーの選択を反映するために、各通貨の表示フラグが自動的に更新されます。

  3. アイコンを使用した通貨の切り替え：ユーザーの利便性を高めるために、通貨交換アイコンを介して「元」フィールドと「先」フィールドの間で通貨を切り替える機能を追加します。アイコンをクリックすると、通貨が入れ替わります。

  4. 為替レートの取得：「為替レートを取得」ボタンをクリックするか、いずれかの通貨を変更すると、アプリケーションは外部APIにリクエストを送信して、選択した通貨間の現在の為替レートを取得します。APIを使用します Exchangerate-API最新の為替レートデータを受け取るため。

  5. 結果の表示：レートを受け取った後、入力された金額を選択した通貨に換算した結果を計算し、画面に表示します。何か問題が発生した場合（インターネットがない、APIが応答しないなど）、エラーが表示されます。

コードの説明と機能

  1. ドロップダウンリストの入力: 通貨コードと対応する国を含むオブジェクト country_list を使用します。このオブジェクトを使用して、両方のドロップダウンリスト（「From」フィールドと「To」フィールドの通貨）を入力します。

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. アイコンを使用した通貨の切り替え：ユーザーは交換アイコンを使用して通貨を交換できます。このアイコンをクリックすると、「From」フィールドと「To」フィールドの通貨コードが入れ替わります。

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 = "Getting the exchange rate...";

    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 = "Something went wrong";
    });
}

APIにリクエストを送信し、結果のレートを使用して合計金額を計算します。エラーが発生した場合（インターネット接続の問題など）、エラーメッセージが表示されます。

重要なポイント：

  • フォーム送信の防止: [為替レートを取得]ボタンをクリックすると、e.preventDefault()を使用してフォームの標準動作（ページの再読み込み）を防ぎ、すべての処理が同じページで行われるようにします。

  • 入力の検証:ユーザーが金額フィールドに0または空の値を入力していないことを確認します。これが発生した場合、デフォルトでは値1を使用します。

  • APIキー：コードは外部APIを使用して現在の為替レートを取得します。登録して独自のAPIキーを取得する必要があります Exchangerate-APIコード内の現在のキーを置き換えます。

  • 旗の更新: 選択した通貨に応じて、<img> タグのフラグの画像を更新し、country_list オブジェクトから国コードを取得します。

このアプローチにより、HTML、CSS、JavaScriptを使用して柔軟な通貨換算アプリケーションを作成できます。これにより、外部APIから最新のデータを取得し、リアルタイムで通貨を換算するための便利なインターフェースをユーザーに提供できます。

完全なコードは、当社のウェブサイトからダウンロードできます。 GitHub

結論✨

これで、APIからの最新レートを使用する通貨換算ツールが完成しました。必要に応じて、通貨を追加したり、インターフェースを改善したりできます。このプロジェクトは、HTML構造の作成、CSSを使用したスタイリング、JavaScriptを使用したAPIの操作など、Web開発のすべての主要な側面をカバーしているため、初心者に最適です。開発がうまくいくことを願っています！ 🎯

完全なソースコードと追加の改善については、 GitHub.

質問があれば、遠慮なく聞いてください。プログラミングがうまくいって、プロジェクトがいつも面白くて楽しいものでありますように！ 👊🌟

🎯先延ばしをやめよう

記事は気に入った？
実践の時間だ！

Kodikでは読むだけでなく、すぐにコードを書く。理論 + 実践 = 本当のスキル。

⚡即座に実践
🧠AIがコードを説明
🏆修了証

登録不要 • カード不要