🎨 사각형 너비 계산 / 할인 가격 계산 프로그램

kirin.log·2020년 11월 24일

사각형 넓이 계산

<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>사각형 너비 구하기</title>
</head>
<body>	
<script>
	var width = prompt("가로 길이를 입력하세요.");  //promp창이 떴을 때, 사용자가 입력한 값이 width 값으로 지정
	var height = prompt("세로 길이를 입력하세요");  //promp창이 떴을 때, 사용자가 입력한 값이 width 값으로 지정
	var area = width * height;  //사용자가 입력한 값들의 곱이 area값이 됨
	alert("사각형의 넓이는 " + area + "입니다");  //alert창이 뜨면서 area값이 출력
</script>
</body>
</html>

할인 가격 계산 프로그램

<!DOCTYPE html>
<html lang="ko">
<head>
   <meta charset="UTF-8">
   <meta name="viewport" content="width=device-width, initial-scale=1.0">
   <meta http-equiv="X-UA-Compatible" content="ie=edge">
   <title>할인 가격 구하기</title>
</head>
<body>	
  <div id="contents">
     <ul>
	<li>
	   <label for="oPrice">원래 가격</label>  <!--label의 for값(oPrice)과 input의 id값(oPrice)을 같게 연결해야 한다-->
	   <input type="text" id="oPrice">원
	</li>
	<li>
	   <label for="rate">할인율</label>
	   <input type="text" id="rate">%
	</li>
	<li>
	   <button onclick="showPrice()">할인 가격 계산하기</button>
	</li>
     </ul>
     <div id="showResult"></div>  <!--'할인가격 계산하기'버튼을 누른 후 결과값이 나오는 공간 만들어주기-->	
  </div>	
<script>
   function showPrice(){
	var originPrice = document.querySelector('#oPrice').value;  //originPrice 변수를 선언한 뒤, '원래가격'값을 불러오도록 설정
	var rate = document.querySelector('#rate').value;  //rate 변수를 선언한 뒤, '할인율'값을 불러오도록 설정
	var savedPrice = originPrice * (rate / 100);  //savedPrice 변수를 선언한 뒤, 할인율을 계산하는 공식 설정(위에 선언한 변수값들을 이용하여)
	var resultPrice = originPrice - savedPrice;
	document.querySelector('#showResult').innerHTML = 
  	    `${originPrice}원에서 ${rate}%가 할인되어 ${savedPrice}원 저렴한 ${resultPrice}원에 구매할 수 있습니다`;
	}  //document로 출력(html 안의 #showResult값을 소환하여)
</script>
</body>
</html>

kirin.log

boma91@gmail.com

이전 포스트

🎨 math game

다음 포스트

🎨 사각형 너비 계산 / 할인 가격 계산 프로그램

사각형 넓이 계산

할인 가격 계산 프로그램

🎨 math game

제어문

0개의 댓글