개인 프로젝트 - 환전 기능 웹

Dain KIM·2023년 3월 17일

개인 프로젝트

개인프로젝트

목록 보기

1/1

환전 기능 웹

입력한 금액에 맞게 선택한 나라의 금액으로 환전 되는 웹

자바스크립트 공부를 하면서 '코딩알려주는 누나'라는 유튜브에서 환전 웹을
프로젝트를 참고하여 만들어보았다.
출처) 코딩알려주는 누나 - 환전 웹

기능 구현

기능 구현 순서는 아래와 같다.

박스 2개 만들기

드롭다운 리스트 만들기

환율정보 들고오기

드랍다운 리스트에서 아이템 선택하면 아이템 바뀜

금액을 입력하면 환전이 됨

드랍다운 리스트에서 아이템을 선택하면 다시 그 단위 기준으로 환전이 됨
(어느 곳의 아이템을 바꾸든 환전은 위의 금액을 기준으로 환전 됨)

반대로 밑 박스에서 숫자를 바꿔도 위에 박스에 환율이 적용이 된다.

선택된 나라의 금액 단위로 나타남 (ex) 달러, 원, 동)

코드

<index.html>

<!DOCTYPE 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>Document</title>
    <link rel="stylesheet" href="style.css" />
  </head>
  <body>
    <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="#">USD</a>
          <a href="#">KRW</a>
          <a href="#">VND</a>
        </div>
      </div>
      <div class="input-area">
        <input type="number" id="from-input" onkeyup="convert()"/>
        <div id="from-unit">달러</div>
      </div>
    </div>

    <div class="exchange-box">
        <div class="dropdown">
          <button class="dropbtn" id="to-button">USD</button>
          <div class="dropdown-content" id="to-currency-list">
            <a href="#">USD</a>
            <a href="#">KRW</a>
            <a href="#">VND</a>
          </div>
        </div>
        <div class="input-area">
          <input type="number" id="to-input" onkeyup="toConvert()"/>
          <div id="to-unit">달러</div>
        </div>
      </div>

    <script src="main.js"></script>
  </body>
</html>

<main.js>

// 환율 정보
let currencyRatio = {
    USD : {
        KRW : 1314.80,
        USD : 1,
        VND : 23795.00,
        unit : "달러"
    },

    KRW : {
        KRW : 1,
        USD : 0.00076,
        VND : 18.10,
        unit : "원"
    },

    VND : {
        KRW : 0.055, 
        USD : 0.000042,
        VND : 1,
        unit : "동"
    }
}

let fromCurrency = 'USD';
let toCurrency = 'USD';
let fromAmount = 0;
let fromConvertedAmount = 0;
let toAmount = 0;
let toConvertedAmount = 0;

// from 나라 선택
document.querySelectorAll("#from-currency-list a").forEach((menu) => {
    menu.addEventListener("click", function() {
     	// 원하는 나라 클릭 시 바뀜
        document.getElementById('from-button').textContent = this.textContent;
        fromCurrency = this.textContent;
        //console.log(fromCurrency);

		// 환전
        convert();
    })
})

// to 나라 선택
document.querySelectorAll("#to-currency-list a").forEach((menu) => {
    menu.addEventListener("click", function() {
    	// 원하는 나라 클릭 시 바뀜
        document.getElementById("to-button").textContent = this.textContent;
        toCurrency = this.textContent;
		
        // 환전, from 금액을 기준으로 환전해야하기 때문에 convert()사용
        convert();
        
    })
})

// from 환전 함수
function convert() {
    
    // 환전
    // 1. 얼마를 환전? 가지고 있는 돈이 뭔지? 바꾸고자하는 돈이 뭔지?
    // 2. 돈 * 환율 = 환전 금액

    // 인풋값에 적은 돈 값 가져오기
    fromAmount = document.getElementById("from-input").value;

    // from div에 쓴 금액 나타내기
    document.getElementById("from-unit").textContent = fromAmount + currencyRatio[fromCurrency].unit;
    
    // 환전 금액, 소수점자리 반올림하기
    fromConvertedAmount = Math.round(fromAmount * currencyRatio[fromCurrency][toCurrency]* 100) / 100;
    
    
    // 환전 금액 to인풋값에 넣기
    document.getElementById("to-input").value = fromConvertedAmount;
    // 환전 단위 to디브값에 나타내기
    document.getElementById("to-unit").textContent = fromConvertedAmount + currencyRatio[toCurrency].unit;
}

// to 환전 함수
function toConvert() {
    toAmount = document.getElementById("to-input").value;

    document.getElementById("to-unit").textContent = toAmount + currencyRatio[toCurrency].unit;

    toConvertedAmount = Math.round(toAmount * currencyRatio[toCurrency][fromCurrency] * 100) / 100;

    document.getElementById("from-input").value = toConvertedAmount;
    
    fromAmount = toConvertedAmount;

    document.getElementById("from-unit").textContent = toConvertedAmount + currencyRatio[fromCurrency].unit;

}

<style.css>

.exchange-box{
    border: 1px solid black;
    width: 400px;
    margin: 10% 30%;
}

.dropbtn {
    background-color: #4CAF50;
    color: white;
    padding: 16px;
    font-size: 16px;
    border: none;
    cursor: pointer;
    width: 100%;
  }
  
  /* The container <div> - needed to position the dropdown content */
  .dropdown {
    position: relative;
    display: inline-block;
    width: 100%;
    
  }
  
  /* Dropdown Content (Hidden by Default) */
  .dropdown-content {
    display: none;
    position: absolute;
    background-color: #f9f9f9;
    min-width: 160px;
    box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
    z-index: 1;
    width: 100%;
  }
  
  /* Links inside the dropdown */
  .dropdown-content a {
    color: black;
    padding: 12px 16px;
    text-decoration: none;
    display: block;
  }
  
  /* Change color of dropdown links on hover */
  .dropdown-content a:hover {background-color: #f1f1f1}
  
  /* Show the dropdown menu on hover */
  .dropdown:hover .dropdown-content {
    display: block;
  }
  
  /* Change the background color of the dropdown button when the dropdown content is shown */
  .dropdown:hover .dropbtn {
    background-color: #3e8e41;
  }

  .input-area{
    width: 100%;
    text-align: right;
  }

  .input-area input {
    width: 100%;
    box-sizing: border-box;
    text-align: right;
    border: none;
    height: 50%;
  }

  .input-area input:focus {
    outline: none;
  }