minjeongss · August 6, 2024 07:34
diff --git a/README.md b/README.md
diff --git a/index.html b/index.html
 <!DOCTYPE html>
 <html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>환율계산기</title>
    <style>
      * {
        padding: 0;
        margin: 0;
        box-sizing: border-box;
      }
      .wrap {
        max-width: 600px;
        width: 80%;
        margin: auto;
      }
    </style>
  </head>
  <body>
    <!-- fetch 잘 쓰기 -->
    <!-- 객체 순회하기 -->
    <!-- 연산하는 함수 만들기 -->
    <!-- input하면 재연산한다 -->
    <!-- 버튼을 바꾸면 위치가 바뀌며 재연산한다 -->
    <div class="wrap">
      <h1>환율계산기</h1>
      <div class="con">
        <div class="currency">
          <span>Amount</span>
          <select name="currency-one" id="currency-one">
            <!-- <option value="USD" data-rate="1" selected>USD</option> -->
          </select>
          <input type="number" id="amount-one" value="1" />
          <!-- 얘는 값 수정 가능 -->
        </div>
        <div class="curreycy">
          <span>Converted amount</span>
          <select name="currency-two" id="currency-two">
            <!-- <option value="KRW" data-rate="1.3" selected>KRW</option> -->
          </select>
          <input type="number" id="amount-two" value="1" />
          <!-- 얘는 값 수정 불가능 -->
        </div>
        <button id="swap">바꾸기</button>
      </div>
      <p id="rate"></p>
    </div>
    <script>
      const $currencyOne = document.getElementById("currency-one");
      const $currencyTwo = document.getElementById("currency-two");
      const $inputOne = document.getElementById("amount-one");
      const $inputTwo = document.getElementById("amount-two");
      const $rate = document.getElementById("rate");
      const $swap = document.getElementById("swap");

      //fetch로 데이터 가져오는 방법
      const getData = async () => {
        const url = `https://open.exchangerate-api.com/v6/latest`;
        const response = await fetch(url);
        const json = await response.json();
        return json;
      };

      //con 부분 초기화
      const initAmount = async () => {
        let isFirst = [true, true];
        const data = await getData();
        const fragmentOne = document.createDocumentFragment();
        const fragmentTwo = document.createDocumentFragment();
        for (let key in data.rates) {
          const optionOne = document.createElement("option");
          optionOne.value = key;
          optionOne.dataset.rate = data.rates[key];
          optionOne.innerText = key;

          const optionTwo = document.createElement("option");
          optionTwo.value = key;
          optionTwo.dataset.rate = data.rates[key];
          optionTwo.innerText = key;
          if (optionTwo.value === "KRW") {
            optionTwo.selected = true;
          }

          fragmentOne.appendChild(optionOne);
          fragmentTwo.appendChild(optionTwo);
        }
        $currencyOne.appendChild(fragmentOne);
        $currencyTwo.appendChild(fragmentTwo);

        $inputOne.value =
          $currencyOne.options[$currencyOne.selectedIndex].dataset.rate;

        $inputTwo.value =
          $currencyTwo.options[$currencyTwo.selectedIndex].dataset.rate;
      };

      //rate부분 초기화
      const initCurrency = () => {
        const span = document.createElement("span");
        span.innerText = "표시 환율";

        const amountOne = document.createElement("p");
        amountOne.innerText = $inputOne.value + " " + $currencyOne.value;

        const amountTwo = document.createElement("p");
        amountTwo.innerText = $inputTwo.value + " " + $currencyTwo.value;

        $rate.appendChild(span);
        $rate.appendChild(amountOne);
        $rate.appendChild(amountTwo);
      };

      //환율 계산
      const calculateCurrency = () => {
        let input = $inputOne.value;
        let amountOne =
          $currencyOne.options[$currencyOne.selectedIndex].dataset.rate;
        let amountTwo =
          $currencyTwo.options[$currencyTwo.selectedIndex].dataset.rate;
        console.log(amountOne, amountTwo);
        $inputTwo.value = (amountTwo / amountOne) * input;
      };
      const init = async () => {
        await initAmount();
        initCurrency();
      };

      //이벤트 등록
      $currencyOne.addEventListener("input", () => {
        $inputOne.value =
          $currencyOne.options[$currencyOne.selectedIndex].dataset.rate;
        calculateCurrency();
      });
      $currencyTwo.addEventListener("input", () => {
        $inputTwo.value =
          $currencyTwo.options[$currencyTwo.selectedIndex].dataset.rate;
      });
      $swap.addEventListener("click", () => {
        let amountOne = $currencyOne.value;
        let amountTwo = $currencyTwo.value;
        $currencyTwo.value = amountOne;
        $currencyOne.value = amountTwo;
        $inputOne.value =
          $currencyOne.options[$currencyOne.selectedIndex].dataset.rate;
        $inputTwo.value =
          $currencyTwo.options[$currencyTwo.selectedIndex].dataset.rate;
      });
      $inputOne.addEventListener("input", calculateCurrency);

      //초기화
      init();
    </script>
  </body>
 </html>
	<!DOCTYPE html>
	<html lang="en">
	<head>
	<meta charset="UTF-8" />
	<meta name="viewport" content="width=device-width, initial-scale=1.0" />
	<title>환율계산기</title>
	<style>
	* {
	padding: 0;
	margin: 0;
	box-sizing: border-box;
	}
	.wrap {
	max-width: 600px;
	width: 80%;
	margin: auto;
	}
	</style>
	</head>
	<body>
	<!-- fetch 잘 쓰기 -->
	<!-- 객체 순회하기 -->
	<!-- 연산하는 함수 만들기 -->
	<!-- input하면 재연산한다 -->
	<!-- 버튼을 바꾸면 위치가 바뀌며 재연산한다 -->
	<div class="wrap">
	<h1>환율계산기</h1>
	<div class="con">
	<div class="currency">
	<span>Amount</span>
	<select name="currency-one" id="currency-one">
	<!-- <option value="USD" data-rate="1" selected>USD</option> -->
	</select>
	<input type="number" id="amount-one" value="1" />
	<!-- 얘는 값 수정 가능 -->
	</div>
	<div class="curreycy">
	<span>Converted amount</span>
	<select name="currency-two" id="currency-two">
	<!-- <option value="KRW" data-rate="1.3" selected>KRW</option> -->
	</select>
	<input type="number" id="amount-two" value="1" />
	<!-- 얘는 값 수정 불가능 -->
	</div>
	<button id="swap">바꾸기</button>
	</div>
	<p id="rate"></p>
	</div>
	<script>
	const $currencyOne = document.getElementById("currency-one");
	const $currencyTwo = document.getElementById("currency-two");
	const $inputOne = document.getElementById("amount-one");
	const $inputTwo = document.getElementById("amount-two");
	const $rate = document.getElementById("rate");
	const $swap = document.getElementById("swap");

	//fetch로 데이터 가져오는 방법
	const getData = async () => {
	const url = `https://open.exchangerate-api.com/v6/latest`;
	const response = await fetch(url);
	const json = await response.json();
	return json;
	};

	//con 부분 초기화
	const initAmount = async () => {
	let isFirst = [true, true];
	const data = await getData();
	const fragmentOne = document.createDocumentFragment();
	const fragmentTwo = document.createDocumentFragment();
	for (let key in data.rates) {
	const optionOne = document.createElement("option");
	optionOne.value = key;
	optionOne.dataset.rate = data.rates[key];
	optionOne.innerText = key;

	const optionTwo = document.createElement("option");
	optionTwo.value = key;
	optionTwo.dataset.rate = data.rates[key];
	optionTwo.innerText = key;
	if (optionTwo.value === "KRW") {
	optionTwo.selected = true;
	}

	fragmentOne.appendChild(optionOne);
	fragmentTwo.appendChild(optionTwo);
	}
	$currencyOne.appendChild(fragmentOne);
	$currencyTwo.appendChild(fragmentTwo);

	$inputOne.value =
	$currencyOne.options[$currencyOne.selectedIndex].dataset.rate;

	$inputTwo.value =
	$currencyTwo.options[$currencyTwo.selectedIndex].dataset.rate;
	};

	//rate부분 초기화
	const initCurrency = () => {
	const span = document.createElement("span");
	span.innerText = "표시 환율";

	const amountOne = document.createElement("p");
	amountOne.innerText = $inputOne.value + " " + $currencyOne.value;

	const amountTwo = document.createElement("p");
	amountTwo.innerText = $inputTwo.value + " " + $currencyTwo.value;

	$rate.appendChild(span);
	$rate.appendChild(amountOne);
	$rate.appendChild(amountTwo);
	};

	//환율 계산
	const calculateCurrency = () => {
	let input = $inputOne.value;
	let amountOne =
	$currencyOne.options[$currencyOne.selectedIndex].dataset.rate;
	let amountTwo =
	$currencyTwo.options[$currencyTwo.selectedIndex].dataset.rate;
	console.log(amountOne, amountTwo);
	$inputTwo.value = (amountTwo / amountOne) * input;
	};
	const init = async () => {
	await initAmount();
	initCurrency();
	};

	//이벤트 등록
	$currencyOne.addEventListener("input", () => {
	$inputOne.value =
	$currencyOne.options[$currencyOne.selectedIndex].dataset.rate;
	calculateCurrency();
	});
	$currencyTwo.addEventListener("input", () => {
	$inputTwo.value =
	$currencyTwo.options[$currencyTwo.selectedIndex].dataset.rate;
	});
	$swap.addEventListener("click", () => {
	let amountOne = $currencyOne.value;
	let amountTwo = $currencyTwo.value;
	$currencyTwo.value = amountOne;
	$currencyOne.value = amountTwo;
	$inputOne.value =
	$currencyOne.options[$currencyOne.selectedIndex].dataset.rate;
	$inputTwo.value =
	$currencyTwo.options[$currencyTwo.selectedIndex].dataset.rate;
	});
	$inputOne.addEventListener("input", calculateCurrency);

	//초기화
	init();
	</script>
	</body>
	</html>