반응형
할인율 계산 프로그램
html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>할인 가격</title>
<link rel="stylesheet" href="css/sale.css">
</head>
<body>
<header><h1>할인 가격 계산 프로그램</h1></header>
<main>
<div class="wrap">
<label for="price">가격</label>
<input type="text" id="price" name="price" placeholder="가격을 입력하세요."/>원
</div>
<div class="wrap">
<label for="count">할인율</label>
<input type="text" id="count" name="count" placeholder="할인율을 입력하세요."/>%
</div>
<div>
<button type="button" onclick="showPrice()">계산</button>
</div>
<div id="result"></div>
</main>
<footer><p>Copyright © 2023 : YOON</p></footer>
<script src="js/sale.js"></script>
</body>
</html>scss(css)
html {
height: 100%;
}
body {
height: 100%;
margin: 0;
display: flex;
flex-direction: column;
}
header {
text-align: center;
}
main {
text-align: center;
display: flex;
flex-direction: column;
gap: 20px;
.wrap {
display: flex;
justify-content: center;
align-items: center;
label {
width: 100px;
}
input {
width: 150px;
max-width: 90%;
border: 1px solid #ccc;
padding: 5px;
margin-right: 5px;
border-radius: 5px;
}
}
button {
border: 0;
background: #414cff;
color: #fff;
padding: 5px 30px;
border-radius: 5px;
}
#result {
.price {
font-size: 24px;
}
.count {
font-size: 24px;
font-weight: 900;
}
.save-price {
font-size: 24px;
color: red;
}
.result-price {
font-size: 40px;
color: blue;
font-weight: 900;
}
}
}
footer {
text-align: center;
padding-top: 50px;
margin-top: auto;
}
js
function showPrice(){
const price = document.getElementById('price').value;
const count = document.getElementById('count').value;
const savePrice = price * ( count / 100 );
const resultPrice = price - savePrice;
document.getElementById('result').innerHTML = `
<div>상품의 원래 가격은 <span class='price'>${price}원</span>이고,</div>
<div>할인율은 <span class='count'>${count}%</span>입니다.</div>
<div><span class='save-price'>${savePrice}원</span>을 절약한</div>
<div><span class='result-price'>${resultPrice}원</span>에 구매 가능합니다.</div>
`;
}react로 실시간 계산 해주는 웹을 만들기 전에 테스트용으로 작업해봤다.
버튼 클릭으로 결과를 내는건 간단하다
반응형
'JAVASCRIPT' 카테고리의 다른 글
| [Javascript] 순수 javascript로 slide toggle 구현 (0) | 2023.12.16 |
|---|---|
| [Javascript] 프로그래머스 - 문자열 다루기 기본 (1) | 2023.11.29 |
| [Javascript] JS로 HTML 요소 생성 및 추가 방법 (0) | 2023.10.23 |
| [JavaScript] call(), apply(), bind() 간단 차이점 비교하기 (0) | 2023.10.20 |
| [JavaScript] 이미지 사이즈에 따라 영역 가로세로 크기 맞추기 (0) | 2022.05.25 |
