인터넷강의를 보며 KRW , USD , VND 세가지 나라의 환율을 객체로 저장해서
간단한 환율계산기를 만들어 보았습니다.

# UI/UX

HTML 코드

<div id="exchange">
        <h1 class="title">
            <img src="./IMG/currency.jpg" alt="환율계산기 이미지">
        </h1>
        <strong>Exchange Rate Calculator</strong>
        <p>Choose a country and enter the amount to be converted</p>
        <div class="exchange-box">
            <div class="dropdown">
                <button class="dropbtn" id="from-button">USD</button>
                    <div class="dropdown-content" id="from-currency-list">
                        <a href="#">KRW</a>
                        <a href="#">USD</a>
                        <a href="#">VND</a>
                    </div>
            </div>
            <div class="input-area">
                <input type="number" id="from-input" onkeyup="convert()">
            </div>
        </div>
        <div class="exchange-box">
            <div class="dropdown">
                <button class="dropbtn" id="to-button">KRW</button>
                    <div class="dropdown-content" id="to-currency-list">
                        <a href="#">KRW</a>
                        <a href="#">USD</a>
                        <a href="#">VND</a>
                    </div>
            </div>
            <div class="input-area">
                <input type="number" id="to-input" onkeyup="convertRe()">
            </div>
        </div>
    </div>

우선 환율에 필요한 세가지 나라의 환율을 객체 타입으로 저장했습니다.

<script>
// 객체로 환율 저장
let currencyRatio = {
    USD:{
        KRW:1379.50,
        USD:1,
        VND:23540.96,
        unit:"달러"
    },
    KRW:{
        KRW:1,
        USD:0.00084,
        VND:19.40,
        uit:"원"
    },
    VND:{
        KRW:0.052,
        USD:0.000044,
        VND:1,
        unit:"동"
    }
};
</script>

가정먼저 각각의 드랍다운 버튼에 기본값 USD와 KRW를 설정하고 , from 과 to 리스트 아이템 , 버튼을 DOM 요소로 가져왔습니다. click 이벤트를 걸어 각각의 아이템들이 클릭 되면 textContent가 변경되고 나라별 환율을 들고오기 위해 저장해둔 from,toCurrency 변수에 textContent가 변경되도록 만들었습니다.
그리고 dropdown-item의 값이 바뀔때마다 환전이 되게 하기위하여 convert();를 넣어주었습니다.

<script>
const fromItem = document.querySelectorAll("#from-currency-list a");
const fromBtn = document.getElementById("from-button");

let fromCurrency = "USD";

fromItem.forEach(function (item) {
    item.addEventListener("click", changeFromItemName);
});

function changeFromItemName (item) {
    fromBtn.textContent = item.currentTarget.textContent;
    fromCurrency = item.currentTarget.textContent;
    convert();
};

// to-currency 값 가져오기
const toItem = document.querySelectorAll("#to-currency-list a");
const toBtn = document.getElementById("to-button");

let toCurrency = "KRW";

toItem.forEach(function (item) {
    item.addEventListener("click", changeToItemName);
});

function changeToItemName (item) {
    toBtn.textContent = item.currentTarget.textContent;
    toCurrency = item.currentTarget.textContent;
    convert();
}
</script>

환율시스템적용 convert라는 함수를 만들고 amount라는 변수에 from-input의 value 값을 저장하고 convertedAmount 변수에 amount 와 객체의 환율정보를 들고와 곱하여 환율을 나타낸다. 그후 to-input 박스의 value값을 convertedAmount에 저장해준다.

<script>
	// 환전시스템 적용
function convert () {
    let amount = document.getElementById("from-input").value;
    let convertedAmount = amount * currencyRatio[fromCurrency][toCurrency];
    document.getElementById("to-input").value = convertedAmount;
}
</script>

반대로 to-input박스에 값을 넣어도 from-input값에 적용시키기 위해 convertRe라는 함수를 만들어 이번엔 to-input value를 저장해 convertedAmount라는 변수에 계산한 값이 from-input에 저장되도록 만들었습니다.

<script>
// to-input박스값 입력해도 환전작동
function convertRe () {
    let amount = document.getElementById("to-input").value;
    let convertedAmount = amount * currencyRatio[fromCurrency][toCurrency];
    document.getElementById("from-input").value = convertedAmount;
}
</script>