자바스크립트 환율 계산기 만들기

버건디·2022년 10월 17일
자바스크립트 프로젝트
0

자바스크립트 프로젝트

목록 보기
9/15
post-thumbnail

🔍 설계도

🔍 완성 화면

🔍 HTML & CSS

-HTML

<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Exchange-Rate</title>
    <link rel="stylesheet" href="style.css">
    <script src="main.js"></script>
</head>

<body>
    <div class="container">
        <img src="./img/money.png" alt="money" class="img">
        <h1 class="ercword">Exchagne Rate Calculator</h1>
        <p>Choose the currency and the amounts to get the exchange rate</p>
        <div class="currency">
            <select class="selectcurrency" name="currency-one" id="currencyOne">
                <option value="AED">AED</option>
                <option value="ARS">ARS</option>
                <option value="AUD">AUD</option>
                <option value="BGN">BGN</option>
                <option value="BRL">BRL</option>
                <option value="BSD">BSD</option>
                <option value="CAD">CAD</option>
                <option value="CHF">CHF</option>
                <option value="CLP">CLP</option>
                <option value="CNY">CNY</option>
                <option value="COP">COP</option>
                <option value="CZK">CZK</option>
                <option value="DKK">DKK</option>
                <option value="DOP">DOP</option>
                <option value="EGP">EGP</option>
                <option value="EUR">EUR</option>
                <option value="FJD">FJD</option>
                <option value="GBP">GBP</option>
                <option value="GTQ">GTQ</option>
                <option value="HKD">HKD</option>
                <option value="HRK">HRK</option>
                <option value="HUF">HUF</option>
                <option value="IDR">IDR</option>
                <option value="ILS">ILS</option>
                <option value="INR">INR</option>
                <option value="ISK">ISK</option>
                <option value="JPY">JPY</option>
                <option value="KRW">KRW</option>
                <option value="KZT">KZT</option>
                <option value="MXN">MXN</option>
                <option value="MYR">MYR</option>
                <option value="NOK">NOK</option>
                <option value="NZD">NZD</option>
                <option value="PAB">PAB</option>
                <option value="PEN">PEN</option>
                <option value="PHP">PHP</option>
                <option value="PKR">PKR</option>
                <option value="PLN">PLN</option>
                <option value="PYG">PYG</option>
                <option value="RON">RON</option>
                <option value="RUB">RUB</option>
                <option value="SAR">SAR</option>
                <option value="SEK">SEK</option>
                <option value="SGD">SGD</option>
                <option value="THB">THB</option>
                <option value="TRY">TRY</option>
                <option value="TWD">TWD</option>
                <option value="UAH">UAH</option>
                <option value="USD" selected>USD</option>
                <option value="UYU">UYU</option>
                <option value="VND">VND</option>
                <option value="ZAR">ZAR</option>
            </select>
            <input type="number" id="amount-one" value="1">
        </div>
        <div class="swap-rate-container">
            <button id="swap" class="btn">Swap</button>
            <div id="rate" class="rate"></div>
        </div>
        <div class="currency">

            <select class="selectcurrency" name="currency-two" id="currencyTwo">
                <option value="AED">AED</option>
                <option value="ARS">ARS</option>
                <option value="AUD">AUD</option>
                <option value="BGN">BGN</option>
                <option value="BRL">BRL</option>
                <option value="BSD">BSD</option>
                <option value="CAD">CAD</option>
                <option value="CHF">CHF</option>
                <option value="CLP">CLP</option>
                <option value="CNY">CNY</option>
                <option value="COP">COP</option>
                <option value="CZK">CZK</option>
                <option value="DKK">DKK</option>
                <option value="DOP">DOP</option>
                <option value="EGP">EGP</option>
                <option value="EUR">EUR</option>
                <option value="FJD">FJD</option>
                <option value="GBP">GBP</option>
                <option value="GTQ">GTQ</option>
                <option value="HKD">HKD</option>
                <option value="HRK">HRK</option>
                <option value="HUF">HUF</option>
                <option value="IDR">IDR</option>
                <option value="ILS">ILS</option>
                <option value="INR">INR</option>
                <option value="ISK">ISK</option>
                <option value="JPY">JPY</option>
                <option value="KRW" selected>KRW</option>
                <option value="KZT">KZT</option>
                <option value="MXN">MXN</option>
                <option value="MYR">MYR</option>
                <option value="NOK">NOK</option>
                <option value="NZD">NZD</option>
                <option value="PAB">PAB</option>
                <option value="PEN">PEN</option>
                <option value="PHP">PHP</option>
                <option value="PKR">PKR</option>
                <option value="PLN">PLN</option>
                <option value="PYG">PYG</option>
                <option value="RON">RON</option>
                <option value="RUB">RUB</option>
                <option value="SAR">SAR</option>
                <option value="SEK">SEK</option>
                <option value="SGD">SGD</option>
                <option value="THB">THB</option>
                <option value="TRY">TRY</option>
                <option value="TWD">TWD</option>
                <option value="UAH">UAH</option>
                <option value="USD">USD</option>
                <option value="UYU">UYU</option>
                <option value="VND">VND</option>
                <option value="ZAR">ZAR</option>
            </select>
            <input type="number" id="amount-two" value="1">

        </div>

    </div>

</body>

</html>

-CSS

*{
    box-sizing: border-box;
}
body{
    margin: 0;
    padding: 20px;
    display: flex;
    align-items: center;
    justify-content: center;
    height: 100vh;
    flex-direction: column;
    background-color: #fff;
}


.img{
    width: 150px;
    height: 150px;
}

.ercword{
    color: #5fbaa7;
}

.currency{
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    align-items: center;
    padding: 40px 0;
}

.currency input{
    text-align: right;
    padding: 1px 2px;
    border: none;
    font-size: 30px;
}

.selectcurrency{
    padding: 10px 20px 10px 10px;
    font-size: 16px;
    border-radius: 10px;
    border: 1px solid #777;
    background: transparent;

}

.swap-rate-container{
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.rate {
    color: #5fbaa7;
    font-size: 18px;
    padding: 0 10px;
  }



.btn{
    background-color: #5fbaa7;
    color: #fff;
    padding: 5px 12px;
    border-radius: 10px;
}

🔍 자바스크립트

document.addEventListener("DOMContentLoaded", () => {
  const currencyOne = document.getElementById("currencyOne");
  const amountOne = document.getElementById("amount-one");
  const swap = document.getElementById("swap");
  const rate = document.getElementById("rate");
  const currencyTwo = document.getElementById("currencyTwo");
  const amountTwo = document.getElementById("amount-two");

  // 환율 업데이트

  const updateCurrency = async () => {
    const url = await fetch(
      `https://v6.exchangerate-api.com/v6/52f1f656328d5996e352de41/latest/${currencyOne.value}`
    );

    data = await url.json();

    rate.innerText = "1 " + currencyOne.value + " = " + data.conversion_rates[currencyTwo.value] + currencyTwo.value;

    amountTwo.value = (
      amountOne.value * data.conversion_rates[currencyTwo.value]
    ).toFixed(2);
  };

  // 환율 서로 바꾸기

  function changeCurrency() {
    let temp;

    temp = currencyTwo.value;

    currencyTwo.value = currencyOne.value;
    currencyOne.value = temp;
    updateCurrency();
  }

  updateCurrency();

  currencyOne.addEventListener("change", updateCurrency);
  currencyTwo.addEventListener("change", updateCurrency);
  amountOne.addEventListener("input", updateCurrency);
  swap.addEventListener("click", changeCurrency);
});

우선적으로 환율 api를 통해 데이터를 받아와야하므로 async await 과 fetch 를 통해서 데이터를 받아왔다.

그 안에서 받아온 data 를 이용해서 현재 환율을 표시해주었고, 각 amount.value에 맞는 값을 표시했다.

또한 swap 버튼을 누르면 환율1과 환율2의 자리와 값이 바뀌는데,

temp 라는 빈 변수를 하나 만들어주고 그 변수를 이용해서 환율1과 환율2의 값을 바꿔주었다.

profile
버건디
https://brgndy.me/ 로 옮기는 중입니다 :)
이전 포스트

자바스크립트 비디오 플레이어 만들기

다음 포스트

자바스크립트 음식 탐색기 만들어보기

0개의 댓글