為替レート計算機

25878 ワード
API new Intl change event テキストリンク

1.為替レート計算機


今回は為替レートを知るために、為替レートサイトからapiを取得する必要があります.
まずlocalでsliderを選択し、apiからインポートした為替レートをインポートして適用します.
次に、入力した数値に為替レートを乗算して結果を表します.
また、swapボタンもあり、押すと通貨単位が変化して表示されます.

1-1. ビットレベル


  • main.js
  • App.js
  • inputValue.js
  • rate.js
  • swapButton.js

  • utilsフォルダ
  • api.js
  • constant.js
  • validator.js
  • domStorage.js
  • storage.js
    • EXchangerateコードを表示するには、要路にアクセスします.

    2.学んだこと


    - HTML
  • Contiainer>通貨(2つ)>通貨-num>入力/交換の順に等級秩序が形成されていることに注意してください.
    • <div class="container">
  <div class="currency">
    <select id="currency-one">
      <option value="USD">USD</option>
      <option value="KRW" selected>KRW</option>
      <!-- 생략 -->
    </select>
    <input type="number" id="amount-one" placeholder="0" value="1" />
  </div>

  <div class="currency">
    <select id="currency-two">
      <option value="USD">USD</option>
      <option value="KRW" selected>KRW</option>
      <!-- 생략 -->
    </select>
    <input type="number" id="amount-two" placeholder="0" />
  </div>
</div>
    - CSS
  • mediaqueryを使用して画面サイズを調整します.
    • @media (max-width: 600px) {
  .currency input {
    width: 40vh;
  }
  p {
    font-size: 2.5vh;
  }
}
    - JS
  • fetchを使用してapiを取得します.
    • 
  fetch(
    `https://v6.exchangerate-api.com/v6/a1030034a3f8837e9ab84b03/latest/${currencyOne_value}`
  )
    .then(res => res.json())
    .then(data => {
      const resCurrency = data['conversion_rates'][currencyTwo_value];
      rate.innerText = `1 ${currencyOne_value} = ${resCurrency} ${currencyTwo_value}`;
      amountEl_two.value = (amountEl_one.value * resCurrency).toFixed(2);
    });
}
    以上のコードはapiです.jsとasync/awaitでより簡潔に解決!
    //api.js
const PERSONAL_DATA = {
  API_END_POINT: `https://v6.exchangerate-api.com/v6/a1030034a3f8837e9ab84b03/latest/`,
};

export const request = async (url, options = {}) => {
  try {
    const res = await fetch(PERSONAL_DATA.API_END_POINT + url, { ...options });
    if (!res.ok) {
      throw new Error('we ve got api issues');
    }
    return await res.json();
  } catch (error) {
    alert(error);
  }
};

//App.js

import {request} from './utils/api.js';

const fetchData = async currencyUnit => {
    const result = await request(currencyUnit);
    return result;
};

const calculate = async () => {
    const firstCurrencyData = await fetchData(firstInputCurrency);
    ...blah blah
}
  • change/inputイベントにより変化が検出された.
    • うん.しかし、最終的に計算された為替レートをカンマで数字を区切って表示しようとしたところ、can't be parsed or out of rangeのエラーが発生しました...結果値は全く問題なく,解析過程で最終為替レートはstringやnumberではなくobjやNANと識別されるのか.
    typeofの後にstringと表示されます...後でゆっくり調整しましょう.
  • このように解決します!
    •   const secondInputValue = new Intl.NumberFormat('en-US', {
  style: 'currency',
  currency: `${secondInputCurrency}`,
}).format(firstInputValue * resultCurrency);
    new intlという関数を使えばいいです.

  • アルゴリズムを考えるときは、口を酸っぱくしないで、よく考えなければなりません.
  • firstCurrencyを変更し、計算後に速度とsecondInputを変更できます.(setStateロジックを作成するときの考え方.)

  • 重複して重複する修飾が必要でない場合は、一つの場所に集中することを考慮します.必要なものだけを実行します.(calculateをsetDataのsetStateに移動)
    • 
  const setData = async (currency, inputValue, whichInput) => {
    switch (whichInput) {
      case WHICH_INPUT.FIRST:
        this.setState({
          ...this.state,
          firstInputCurrency: currency,
          firstInputValue: inputValue,
        });
        break;
      case WHICH_INPUT.SECOND:
        this.setState({
          ...this.state,
          secondInputCurrency: currency,
        });
        break;
    }
    
    //calculate() => setState로 옮김
  };
    値が異なる場合、
  • の作成者関数は同じであり、別の構成部品
    • になります.
    // App.js

const firstInput = new InputValue({
  intialState: {
    inputValueEle: amountEl_one,
    inputValue: this.state.firstInputValue,
    currencyEle: currencyEl_one,
  },
  calculate: (currency, inputValue) => {
    setData(currency, inputValue, WHICH_INPUT.FIRST);
  },
});

const secondInput = new InputValue({
  intialState: {
    inputValueEle: amountEl_two,
    inputValue: this.state.secondInputValue,
    currencyEle: currencyEl_two,
  },
  calculate: (currency, inputValue) => {
    setData(currency, inputValue, WHICH_INPUT.SECOND);
  },
});
    中のstateも内容が違います.
    [TIL]3月3日