도담도담

환율계산기 만들어보기 본문

IT 공부/개인정리

환율계산기 만들어보기

Zinisang 2022. 2. 7. 17:11

업무 보다가 개인적으로 한번 만들어보면 좋겠다 싶어서 시작했었다.

유튜브 같은거 참고하면서 만들었는데 많이 엉성한 상태이긴 하다.

 

드롭다운(dropdown)형식은 bootstrap에서 참고해서 사용했다.

 

쌍방향 입력이라던가 같은 국가일때 안나오게 하는 등의 기능이추가적으로 필요할듯

 

 

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>환율계산기</title>
    <link rel="stylesheet" href="../css/currencyExchange.css">
</head>

<body>
    <div class="exchange-box">
        <div class="dropdown">
            <button onclick="fromFunction()" 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="#">THB</a>
            </div>
        </div>
        <div class="input-area">
            <input type="text" id="from-input" class="amount-input" onkeyup="convert()" placeholder="0" />
            <div id="fromNumToKorea" class="korean-num">달러</div>
        </div>
    </div>
    
    <h1>=</h1>

    <div class="exchange-box">
        <div class="dropdown">
            <button onclick="toFunction()" class="dropbtn" id="to-button">KRW</button>
            <div class="dropdown-content" id="to-currency-list">
                <a href="#">USD</a>
                <a href="#">KRW</a>
                <a href="#">THB</a>
            </div>
        </div>
        <div class="input-area">
            <input type="text" id="to-input" class="amount-input" onkeyup="convert()" placeholder="0" />
            <div id="toNumToKorea" class="korean-num">원</div>
        </div>
    </div>

    <script src="../js/currencyExchange.js"></script>
</body>

</html>

 

JS

/* When the user clicks on the button,
toggle between hiding and showing the dropdown content */
function fromFunction() {
    document.getElementById("from-currency-list").classList.toggle("show");
}

function toFunction() {
    document.getElementById("to-currency-list").classList.toggle("show");
}

// Close the dropdown menu if the user clicks outside of it
window.onclick = function (event) {
    if (!event.target.matches('.dropbtn')) {
        var dropdowns = document.getElementsByClassName("dropdown-content");
        var i;
        for (i = 0; i < dropdowns.length; i++) {
            var openDropdown = dropdowns[i];
            if (openDropdown.classList.contains('show')) {
                openDropdown.classList.remove('show');
            }
        }
    }
}

let currencyRatio = {
    USD: {
        KRW: 1184.36,
        THB: 35.38,
        unit: "달러",
    },
    KRW: {
        USD: 0.00084,
        THB: 0.32,
        unit: "원",
    },
    THB: {
        KRW: 40,
        USD: 38.123,
        unit: "바트",
    },
};

let fromCurrency = "USD";
let toCurrency = "KRW";

var unitWords = ["", "만 ", "억 ", "조 ", "경 "];
var splitUnit = 10000;
let toButton = document.getElementById("to-button");
let fromButton = document.getElementById("from-button");

document.querySelectorAll("#from-currency-list a")
    .forEach(menu => menu.addEventListener("click", function () {
        document.getElementById("from-button").textContent = this.textContent;
        fromCurrency = this.textContent;

        convert("from");
    }));

document.querySelectorAll("#to-currency-list a")
    .forEach(menu => menu.addEventListener("click", function () {
        document.getElementById("to-button").textContent = this.textContent;
        toCurrency = this.textContent;

        convert("to");
    }));

function convert(type) {

    let amount = 0;
    if (type = "from") {
        amount = document.getElementById("from-input").value;
        let convertedAmount = amount * currencyRatio[fromCurrency][toCurrency]
        document.getElementById("to-input").value = convertedAmount;
        renderKoreanNumber(amount, convertedAmount);
    } else {
        amount = document.getElementById("to-input").value;
        let convertedAmount = amount * currencyRatio[toCurrency][fromCurrency]
        document.getElementById("from-input").value = convertedAmount;
        renderKoreanNumber(convertedAmount, amount);
    }
}

/--------------------------------------------------------------------/

function renderKoreanNumber(from, to) {
    document.getElementById("fromNumToKorea").textContent =
      readNum(from) + currencyRatio[fromCurrency].unit;
    document.getElementById("toNumToKorea").textContent =
      readNum(to) + currencyRatio[toCurrency].unit;
  }
  function readNum(num) {
    let resultString = "";
    let resultArray = [];
    for (let i = 0; i < unitWords.length; i++) {
      let unitResult =
        (num % Math.pow(splitUnit, i + 1)) / Math.pow(splitUnit, i);
      unitResult = Math.floor(unitResult);
      if (unitResult > 0) {
        resultArray[i] = unitResult;
      }
    }
    for (let i = 0; i < resultArray.length; i++) {
      if (!resultArray[i]) continue;
      resultString = String(resultArray[i]) + unitWords[i] + resultString;
    }
    return resultString;
  }

 

CSS

/* Dropdown Button */
.exchange-box{
    border: 1px solid black;
    width: 300px;
}
.dropbtn {
    background-color: #2e00fa;
    color: white;
    padding: 16px;
    font-size: 16px;
    border: none;
    cursor: pointer;
    width: 100%;
  }
  
  /* Dropdown button on hover & focus */
  .dropbtn:hover, .dropbtn:focus {
    background-color: #2980B9;
  }
  
  /* 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: #f1f1f1;
    min-width: 160px;
    box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
    z-index: 1;
    width: 100%;
    text-align: center;
  }
  
  /* 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: #ddd}
  
  /* Show the dropdown menu (use JS to add this class to the .dropdown-content container when the user clicks on the dropdown button) */
  .show {display:block;}

  .input-area{
      width: 100%;
      text-align: right;
      padding-right: 100px;
  }
  .amount-input{
    width: 100%;
    box-sizing: border-box;
    text-align: right;
    border:none;
    font-size: large;
  }
  .korean-num{
    font-size: large;
  }

  body {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    height: 100vh;
    background-repeat: no-repeat;
    background-size: contain;
    background-position: center;
  }

'IT 공부 > 개인정리' 카테고리의 다른 글

자바스크립트로 나이 계산식 만들기  (0) 2022.02.14
드레그앤드롭 (Drag and Drop) 연습  (0) 2022.02.10
== 와 === 의 차이점  (0) 2022.01.25
VS code 단축키  (0) 2022.01.01
VS code 에서 HTML 자동 완성 기능  (0) 2021.12.30
'IT 공부/개인정리' Related Articles more
Comments