레이아웃 css 자바스크립트

자바스크립트 예제

환전(데이터 객체로 저장, foreach)

자무카 2022. 11. 2.

https://www.youtube.com/watch?v=1BF_BwW0LPs&list=PLKvVQ9ZQzjVkcW5Q2dkij8r0exIxG4sr_&index=1 

<!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 href="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/css/bootstrap.min.css" rel="stylesheet"
        integrity="sha384-1BmE4kWBq78iYhFldvKuhfTAU6auU8tT94WrHftjDbrCEXSU1oBoqyl2QvZ6jIW3" crossorigin="anonymous">
    <link rel="stylesheet" href="style.css">
</head>

<body>
    <div class="currency-box">
        <div class="dropdown">
            <button class="dropbtn" id="from-button"><img class="flag-img"
                    src="https://cdn-icons-png.flaticon.com/512/555/555526.png" />USD</button>
            <ul class="dropdown-content" id="from-currency-list">
                <li id="KRW"><img class="flag-img"
                        src="	https://cdn.countryflags.com/thumbs/south-korea/flag-400.png" />KRW</li>
                <li id="USD"><img class="flag-img" src="https://cdn-icons-png.flaticon.com/512/555/555526.png" />USD
                </li>
                <li id="VND"><img class="flag-img"
                        src="https://upload.wikimedia.org/wikipedia/commons/thumb/2/21/Flag_of_Vietnam.svg/2560px-Flag_of_Vietnam.svg.png" />VND
                </li>
            </ul>
        </div>
        <div class="input-box">
            <input type="text" class="amount-box" id="fromAmount" onkeyup="convert('from')" placeholder="금액을 입력하세요" />
            <div id="fromNumToKorea" class="korean-num">달러</div>
        </div>

    </div>
    <div class="same-icon">
        =
    </div>

    <div class="currency-box">
        <div class="dropdown">
            <button class="dropbtn" id="to-button"><img class="flag-img"
                    src="https://cdn-icons-png.flaticon.com/512/555/555526.png" />USD</button>
            <ul class="dropdown-content" id="to-currency-list">
                <li id="KRW"><img class="flag-img"
                        src="	https://cdn.countryflags.com/thumbs/south-korea/flag-400.png" />KRW</li>
                <li id="USD"><img class="flag-img" src="https://cdn-icons-png.flaticon.com/512/555/555526.png" />USD
                </li>
                <li id="VND"><img class="flag-img"
                        src="https://upload.wikimedia.org/wikipedia/commons/thumb/2/21/Flag_of_Vietnam.svg/2560px-Flag_of_Vietnam.svg.png" />VND
                </li>
            </ul>
        </div>
        <div class="input-box">
            <input type="text" class="amount-box" id="toAmount" onkeyup="convert('to')" placeholder="금액을 입력하세요" />
            <div id="toNumToKorea" class="korean-num">달러</div>
        </div>


    </div>


    <script src="main.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/js/bootstrap.bundle.min.js"
        integrity="sha384-ka7Sk0Gln4gmtz2MlQnikT1wXgYsOg+OMhuP+IlRH9sENBO0LRn5q+8nbTov4+1p"
        crossorigin="anonymous"></script>
</body>

</html>

style.css

body {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    height: 100vh;
    background-image: url("https://media.istockphoto.com/vectors/currency-exchange-dollar-sign-and-circle-arrow-fast-loan-financial-vector-id1190840209?k=20&m=1190840209&s=612x612&w=0&h=TUq_XBajwtIDMy698CLPunhoXhYUzxhma8Xp1m9G8Vw=");
    background-repeat: no-repeat;
    background-size: contain;
    background-position: center;
  }
  .currency-box {
    width: 300px;
    background-color: white;
  }
  
  /* Style The Dropdown Button */
  .dropbtn {
    border: 1px solid #dcdcde;
    border-width: 1px 1px 0;
    background-color: #fcfcfc;
    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;
    width: 100%;
    box-shadow: 0px 8px 16px 0px rgba(0, 0, 0, 0.2);
    z-index: 1;
  }
  
  /* Links inside the dropdown */
  .dropdown-content li {
    color: black;
    padding: 12px 16px;
    text-decoration: none;
    display: block;
  }
  
  /* Change color of dropdown links on hover */
  .dropdown-content li:hover {
    background-color: #95afcb;
  }
  
  /* Show the dropdown menu on hover */
  .dropdown:hover .dropdown-content {
    display: block;
  }
  
  .amount-box {
    width: 100%;
    border: none;
    text-align: right;
  }
  .amount-box:focus {
    outline: none;
  }
  .same-icon {
    font-size: 2rem;
    color: #000;
    font-weight: 900;
    text-align: center;
  }
  
  .korean-num {
    height: 50px;
    text-align: right;
  }
  
  .input-box {
    border: 1px solid #dcdcde;
  }
  
  .flag-img {
    width: 18px;
    height: 12px;
  }

main.js

const currencyRatio = {
    VND: {
      USD: 0.000043,
      KRW: 0.051,
      VND: 1,
      unit: "동",
      img: "https://upload.wikimedia.org/wikipedia/commons/thumb/2/21/Flag_of_Vietnam.svg/2560px-Flag_of_Vietnam.svg.png",
    },
    USD: {
      USD: 1,
      KRW: 1182.35,
      VND: 23235.5,
      unit: "달러",
      img: "https://cdn-icons-png.flaticon.com/512/555/555526.png",
    },
    KRW: {
      USD: 0.00085,
      KRW: 1,
      VND: 19.47,
      unit: "원",
      img: "https://cdn.countryflags.com/thumbs/south-korea/flag-400.png",
    },
  };
  var unitWords = ["", "만", "억", "조", "경"];
  var splitUnit = 10000;
  let toButton = document.getElementById("to-button");
  let fromButton = document.getElementById("from-button");
  let toCurrency = "USD";
  let fromCurrency = "USD";
  
  document.querySelectorAll("#from-currency-list li").forEach(function (item) {
    item.addEventListener("click", function () {
      fromCurrency = this.id;
      fromButton.innerHTML = `<img class="flag-img"src="${currencyRatio[fromCurrency].img}"/>${fromCurrency}`;
      convert("from");
    });
  });
  
  document.querySelectorAll("#to-currency-list li").forEach(function (item) {
    item.addEventListener("click", function () {
      toCurrency = this.id;
      toButton.innerHTML = `<img class="flag-img"src="${currencyRatio[toCurrency].img}"/>${toCurrency}`;
      convert("from");
    });
  });
  
  function convert(type) {
    console.log("here");
    let amount = 0;
    if (type == "from") {
      //입력갑 받기
      amount = document.getElementById("fromAmount").value;
      // 환전하기
      let convertedAmount = amount * currencyRatio[fromCurrency][toCurrency];
      // 환전한값 보여주기
      document.getElementById("toAmount").value = convertedAmount;
      //환전한값 한국어로
      renderKoreanNumber(amount, convertedAmount);
    } else {
      amount = document.getElementById("toAmount").value;
      let convertedAmount = amount * currencyRatio[toCurrency][fromCurrency];
      document.getElementById("fromAmount").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;
  }
저작자표시 비영리 변경금지

'자바스크립트 예제' 카테고리의 다른 글

new Audio() 사용  (0) 2023.01.04
js 타임앤타이머 기록 (1)  (0) 2023.01.03
디지털 시계 : new Date() -> getMonth()+1, getDate(), getDay()  (0) 2022.12.31
스톱워치 + 타이머 예제 (setInterval & clearInterval)  (0) 2022.12.31
[노마드코더] snowflake  (0) 2022.12.30
노마드 ToDo ( javascript - react)  (0) 2022.12.17
js 예제: clock - todo_list_날씨받기  (0) 2022.11.06
todo-list 연습 (javascript )  (0) 2022.11.02

댓글

티스토리툴바