[JS/연산자] 자바스크립트로 "나이 계산기 / 할인 가격 계산기" 구현해보기

# 나이 계산기

• input박스에 태어난 연도를 입력하고 버튼을 클릭하면 아래에 나이가 출력된다.
• 입력하지 않고 버튼을 클릭했을 경우 "태어난 연도를 입력하세요" 문구 출력하고 input박스가 focus된다.
• dom, 연산자 연습

 

HTML:

<input type="text" id="testUserYear" placeholder="태어난 연도를 입력하세요">
<button type="button" id="testAgeBtn">SUBMIT</button>
<p id="testResultBox">당신의 나이는: <span></span></p>

SCRIPT:

document.querySelector('#testAgeBtn').addEventListener('click', function() {
    var birthYear = document.querySelector('#testUserYear').value;

    if(! birthYear) {
        alert('태어난 연도를 입력하세요');
        document.querySelector('#testUserYear').focus();
    } else {
        var today = new Date();
        var nowYear = today.getFullYear();
        var age = nowYear - birthYear + 1;

        document.querySelector('#testResultBox span').innerText = age;
    }
});

 

 

당신의 나이는:

 

 

# 할인 가격 계산기

• input박스에 가격과 할인율을 입력하고 버튼을 누르면 원래 가격, 할인된 가격이 출력된다.
• input박스 둘 중 하나라도 값이 입력되지 않았다면 실행되지 않는다.
• dom, 연산자 연습

 

HTML:

<input type="text" id="testPrice" placeholder="원래 가격을 입력하세요">
<span>원</span><br>
<input type="text" id="testRate" placeholder="할인율">
<span>%</span><br>
<button type="button" id="testCalBtn">CALCULATE</button>
<p id="testResultBox02"></p>

SCRIPT:

document.querySelector('#testCalBtn').addEventListener('click', function() {
    var originPrice = document.querySelector('#testPrice').value;
    var discountRate = document.querySelector('#testRate').value;

    if(! originPrice || !discountRate) {
        return false;
    } else {
        var discounted = Math.round(originPrice * (discountRate / 100));	// 정수로 출력하기 위해 소수점 아래 반올림 처리
        var newPrice = originPrice - discounted;
        document.querySelector('#testResultBox02').innerText = originPrice+'원에서 '+discounted+'원 할인되어 '+newPrice+'원입니다.'
    }
});

 

 

원

%