ABOUT ME

    -

    Today
    -
    Yesterday
    -
    Total
    -
    • 220505_JAVASCRIPT_실습(환율 계산 프로그램)
      3.JavaScript/3.1 실습 2022. 5. 5. 20:21

      자바스크립트, HTML, CSS를 배우는데 도저히 개념이 머릿속에 안들어와서

      유튜브를 보고 바로 실전으로 프로그램을 만들어보기로 하였다

       

      출처 : 코딩알려주는누나 https://youtu.be/1BF_BwW0LPs

       

      사실 대부분 강사가 하는대로 따라 쳤고 마지막에 내준 숙제를 한답시고 하루종일 걸린 바보....1인..

      화폐단위가 바뀔때마다 그화폐 단위에 맞게 원, 달러, 동으로 변형해줘야 했고 

      input박스에 입력한 값을 그대로 원, 달러 동 옆에 적어줘야 했다..

      함수를 만들었다가 지웠다가 난리치고 구글링하면서 겨우겨우 구현하였는데 휴..ㅠㅠㅠ어렵다어려워..

       

      1. 자바스크립트

      let currencyRatio={
    USD:{
        KRW:1184.36,
        USD:1,
        VND:22968.00,
        UNIT:"달러"
    },
    KRW:{
        KRW:1,
        USD:0.00079,
        VND:18.17,
        UNIT:"원"
    },
    VND:{
        KRW:0.055,
        USD:0.000044,
        VND:0.055,
        UNIT:"동"
    }
}

let fromCurrency='USD';
let toCurrency='USD';

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

    fromCurrency = this.textContent;
    convert();
    change(fromCurrency,"input-name");
    
})})


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

    toCurrency = this.textContent;
    convert();
    change(toCurrency,"output-name");
})})




function convert(){
    let amount = document.getElementById("from-input").value;
    let convertedAmount = amount*currencyRatio[fromCurrency][toCurrency];
    document.getElementById('to-input').value=convertedAmount;
  
}

document.querySelector("#from-input").addEventListener("onkeyup",
function(){
    document.getElementById('msg1').textContent = document.getElementById('from-input').value;
    printName();
})

document.querySelector("#to-input").addEventListener("onkeyup",function(){
    document.getElementById('msg2').textContent = document.getElementById('to-input').value;
    printName();
    
})

function printName(){
    let name1 = document.getElementById('from-input').value; 
    console.log(name1);
    let name2 = document.getElementById('to-input').value;
    console.log(name2);
    document.getElementById('msg1').innerText = name1;
    document.getElementById('msg2').innerText = name2;

}

function change(content,content2){
    let name = currencyRatio[content].UNIT;
    document.getElementById(content2).innerText = name;
    return name;
}

      2. 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>
    <center>
        <div class = "divstyle">
    <h1 class = "h1style">환율계산기!!!</h1>
    <img src = "https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcQS9MqFAMdGxFMhSrSI-AKcTRTdPQFviMaB2Q&usqp=CAU"
    class = "imgstyle">
    <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();printName()'>
            <span id = "msg1" ></span>
            <span id = "input-name">달러
            
            </span>
        </div>
    </div>

    <h1 text-align="center">=</h1>

    <div class = "exchange-box">

        <div class="dropdown" id = "to-currency-list">
            <button class="dropbtn" id="to-button">USD</button>
            <div class="dropdown-content">
                <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 = 'convert();printName()'/>
            <span id = "msg2"></span>
            <span id = "output-name">달러
        </div>
    </div>
</center>
</div>
    <script src="index.js"></script>
</body>

</html>

       

      3. CSS

      .divstyle{
  border:3px dotted;
  width:500px;
  height:450px;
  border-radius: 20px;
}
/* Style The Dropdown Button */
.dropbtn {
  background-color: #050505;
  color: white;
  padding: 16px;
  font-size: 25px;
  border: none;
  cursor: pointer;
  width : 100%;
  
}

.imgstyle{
  float:right;
  margin-top: 10px;
  margin-right: 100px;
  width:60px;
  display:inline-block;
}


/* 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;
  text-decoration: none;
  display: block;
  width : 100%;
}


.h1style{
  text-align: center;
  color:#f1f1f1;
  margin-left: 120px;
  background-color: black;
  display: inline-block;
  border-radius: 5px;
  
}


.input-name{
  display:none;
  position:absolute;
  text-align: center;
}

.input-name a{
  color:black;
  display:block;
  text-align: center;
}

/* 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: #black;
}

.exchange-box{
    border:1px solid black;
    width : 400px;
   
}
.input-area{
    width:100%;

}
.input-area input{
    width:100%;
    box-sizing: border-box;
    text-align: center;
}

      결과물!!!!!!!!

       

      저작자표시 (새창열림)
    Designed by Tistory.

    티스토리툴바