Javascript/연습
가격 할인율 알려주기
SEOKIHOUSE
2023. 5. 31. 12:41
1)flex로 만들기
<!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>
<style>
* {
margin: 0;
padding: 0;
}
#wrap {
width: 100%;
}
section {
display: flex;
align-items: center;
justify-content: center;
}
#div1 {
margin-right: 20px;
}
p {
margin: 10px;
}
span {
display: inline-block;
width: 100px;
}
button {
margin-left: 120px;
width: 150px;
height: 30px;
}
</style>
<script>
window.onload = function () {
let price = document.getElementById("price");
let discount = document.querySelector("#discount");
const button = document.getElementById("button");
let changeP = document.getElementById("changeP");
button.onclick = function (event) {
let price1 = parseInt(price.value);
let disco1 = parseInt(discount.value) / 100; //할인율
let discountPrice = price1 * disco1; //할인된 가격
let discountmoney = price1 - discountPrice; //깍은 돈
changeP.innerText = "상품의 원래 가격은 " + price1 + "원이고, 할인율은 " + discount.value + "%입니다. "
+ discountmoney + "원을 절약한 " + discountPrice + "원에 살 수 있습니다";
};
};
</script>
</head>
<body>
<div id="wrap">
<section>
<div id="div1">
<img src="../images/sale.png" alt="">
</div>
<div>
<p>
<span>원래가격</span><input id="price" type="text" name="txt" value=""> 원
</p>
<p>
<span>할인율</span><input id="discount" type="text" name="txt" value=""> %
</p>
<button id="button">할인 가격 계산하기</button>
</div>
</section>
<p id="changeP" style="width: 300px; margin: 0 auto;"></p>
</div>
</body>
</html>2)grid로 만들기
<!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>
<style>
* {
margin: 0;
padding: 0;
}
#wrap {
width: 100%;
}
section {
display: grid;
/* grid-template-columns: 160px 330px; */
grid-template-columns: repeat(2, minmax(100px, auto));
grid-template-rows: repeat(2,1fr);
justify-content: center;
align-items: center;
}
p {
margin: 10px;
}
span {
display: inline-block;
width: 100px;
}
button {
margin-left: 120px;
width: 150px;
height: 30px;
}
#div3 {
grid-column: 1/3;
align-self: start;
}
#changeP {
margin-top: 20px;
}
input {
height: 20px;
background-color: antiquewhite;
border: none;
}
</style>
<script>
window.onload = function () {
let price = document.getElementById("price");
//이렇게 바로 가져와도 된다
let discount = document.querySelector("#discount");
const button = document.getElementById("button");
let changeP = document.getElementById("changeP");
button.onclick = function (event) {
// let price3 = document.getElementById("price").value;
//이렇게 바로 가져와도 된다
let price1 = parseInt(price.value);
let disco1 = parseInt(discount.value) / 100; //할인율
let discountPrice = price1 * disco1; //할인된 가격
let discountmoney = price1 - discountPrice; //깍은 돈
changeP.innerHTML = "상품의 원래 가격은 " + price1 + "원이고, 할인율은 " + discount.value + "%입니다. "
+ discountmoney + "원을 절약한 " + discountPrice + "원에 살 수 있습니다";
};
};
</script>
</head>
<body>
<div id="wrap">
<section>
<div id="div1">
<img src="../images/sale.png" alt="">
</div>
<div id="div2">
<p>
<span>원래가격</span><input id="price" type="text" name="txt" value=""> 원
</p>
<p>
<span>할인율</span><input id="discount" type="text" name="txt" value=""> %
</p>
<button id="button">할인 가격 계산하기</button>
</div>
<div id="div3">
<p id="changeP"></p>
</div>
</section>
</div>
</body>
</html>3)grid + eventListener
<!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="css/lisner.css">
<script src="js/lisner.js"></script>
<style>
* {
margin: 0;
padding: 0;
}
#wrap {
width: 100%;
}
section {
display: grid;
/* grid-template-columns: 160px 330px; */
grid-template-columns: repeat(2, minmax(100px, auto));
grid-template-rows: repeat(2,1fr);
justify-content: center;
align-items: center;
}
p {
margin: 10px;
}
span {
display: inline-block;
width: 100px;
}
button {
margin-left: 120px;
width: 150px;
height: 30px;
}
#div3 {
grid-column: 1/3;
align-self: start;
}
#changeP {
margin-top: 20px;
}
input {
height: 20px;
background-color: antiquewhite;
border: none;
}
</style>
<script>
window.onload = function () {
let price = document.getElementById("price");
//이렇게 바로 가져와도 된다
let discount = document.querySelector("#discount");
const button = document.getElementById("button");
let changeP = document.getElementById("changeP");
button.addEventListener("click", f);
function f() {
let price1 = parseInt(price.value);
let disco1 = parseInt(discount.value) / 100; //할인율
let discountPrice = price1 * disco1; //할인된 가격
let discountmoney = price1 - discountPrice; //깍은 돈
changeP.innerHTML = "상품의 원래 가격은 " + price1 + "원이고, 할인율은 " + discount.value + "%입니다. "
+ discountmoney + "원을 절약한 " + discountPrice + "원에 살 수 있습니다";
}
};
</script>
</head>
<body>
<div id="wrap">
<section>
<div id="div1">
<img src="../images/sale.png" alt="">
</div>
<div id="div2">
<p>
<span>원래가격</span><input id="price" type="text" name="txt" value=""> 원
</p>
<p>
<span>할인율</span><input id="discount" type="text" name="txt" value=""> %
</p>
<button id="button">할인 가격 계산하기</button>
</div>
<div id="div3">
<p id="changeP"></p>
</div>
</section>
</div>
</body>
</html>