환율계산기 구현하기 only html css js

FE 데브코스 수업시간에

입력하는 통화량에 따라 자동으로 환율을 계산해주는

환율 계산기를 구현해보았다.

🌟완성작

 

DOM 조작을 연습할 수 있었던

좋은 두 번째 과제였다.

 

참고로, 이용했던 환율 api는 open된 api를 이용했다.

🖇️환율 정보 제공 api

 

api가 제공하는 json data에서,

이번 환율 계산기에서는 'rates' 객체만 이용하여 구현하였다.

---

🖇️ 환율계산기 github gist 링크

[10팀]신아진 - 환율계산기

 

github gist 링크에서

Javascript 코드에 대한 자세한 설명 및 흐름,

라이브로 실행할 수 있는 codesandbox 링크를 확인할 수 있다.

---

구현하면서 힘들었던 점?

 

환율 변환 결과를 화면에 input으로 표시해야하는데, <select>안의 선택된 <option>에서  'data-rate' 속성으로 환율을 가져오는 과정이 힘들었다.

<select>에서 선택된 <option>을 어떻게 판별하고, 그리고 가져온 <option>에서 'data-rate' 속성에 어떻게 접근해야하지? 라는 두 가지 막막함이 들었다.

 

해결방안

 

1.  선택된 <option>을 판별하기

$.selectedIndex를 이용해, <select>에서 선택된 option의 인덱스를 얻어낸다.

그 다음, $.options[index]의 대괄호 안에 추출한 인덱스를 활용한다. 이렇게 하면 선택된 option을 얻을 수 있다.

 

2. 선택된 <option>에서 'data-rate'속성에 접근하기

선택된 옵션에서, $.dataset.rate  로 접근하면 <option>의 'data-rate' 속성에 접근할 수 있다.!

const fromRate =
    document.getElementById("currency-one").options[
    document.getElementById("currency-one").selectedIndex
    ].dataset.rate;
const toRate =
    document.getElementById("currency-two").options[
    document.getElementById("currency-two").selectedIndex
    ].dataset.rate;