3.JavaScript/3.1 실습
220505_JAVASCRIPT_실습(환율 계산 프로그램)
마느링
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;
}결과물!!!!!!!!