본문 바로가기
  • 내 손안 세상 보기 니 해피
IT

자동차 할부 계산기 HTML CSS JavaScript 코드

by 니해피 2024. 4. 29.
반응형

할부 계산기는 자동차 할부 은행대출 상품 할부 구매 등에 사용할 수 있어 계산기를 만들어 블로그에 적용해 보고 싶어졌다. JavaScript를 사용하여 할부 계산기를 만들어 블로그에 삽입 가능하기 때문이다.

 

다음은 JavaScript로 작성된 자동차 할부 계산기를 블로그에 삽입하는 방법이다.

  1. JavaScript를 사용하여 자동차 할부 계산기를 만든다. 계산기는 원리금균등상환과 원금균등상환 두 가지 상환 방식으로 한다.
  2. 계산기를 HTML과 CSS로 스타일링하여 시각적으로 보기 좋게 만든다.
  3. 블로그 플랫폼에서 제공하는 기능을 사용하여 JavaScript 코드를 삽입한다. 대부분의 블로그 플랫폼은 웹페이지에 JavaScript 코드를 삽입할 수 있는 기능을 제공하고 있다.
  4. 블로그에서 게시하면 독자들이 해당 계산기를 사용할 수 있게 된다.

 

자동차 할부 계산기 HTML CSS JavaScript 코드

 

 

 

다음은 HTML, CSS, JavaScript로 작성된 할부 계산기 코드로서 원리금균등상환, 원금균등상환의 두 가지 방식을 지원한다.

 

1. 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="style.css">
</head>
<body>
    <h2>자동차 할부 계산기</h2>
    <div id="calculator">
        <label for="loanAmount">대출 금액:</label>
        <input type="number" id="loanAmount" placeholder="대출 금액 입력"><br><br>

        <label for="loanTerm">대출 기간 (개월):</label>
        <input type="number" id="loanTerm" placeholder="대출 기간 입력"><br><br>

        <label for="interestRate">연 이자율 (%):</label>
        <input type="number" id="interestRate" placeholder="연 이자율 입력"><br><br>

        <label for="repaymentType">상환 방식:</label>
        <select id="repaymentType">
            <option value="principalAndInterest">원리금균등상환</option>
            <option value="principalOnly">원금균등상환</option>
        </select><br><br>

        <button onclick="calculate()">계산하기</button><br><br>

        <div id="result"></div>
    </div>
    <script src="script.js"></script>
</body>
</html>

 

 

위 코드를 적용한 결과는 아래와 같다.

 

자동차 할부 계산기











 

 

'계산하기'를 눌러보니 작동이 안 되고 있다. 해결방법을 알고 나면 별거 아닐 것이지만 지금은 작동 안 되는 문제 해결방법을 모른다.

 

JavaScript를 어떻게 사용해야 하는 걸까?

 

계산기 적용을 위해서는 외부파일을 작성하여 호스팅 링크 절차가 있어야 한다. 방법은 하단 주제를 보면 될 것이다.

 

 

2. CSS 코드(style css)

#calculator {
    width: 300px;
    margin: 0 auto;
}

input[type="number"], select {
    width: 100%;
    padding: 8px;
    margin: 5px 0;
    border: 1px solid #ccc;
    border-radius: 4px;
    box-sizing: border-box;
}

button {
    background-color: #4CAF50;
    color: white;
    padding: 10px 20px;
    margin: 8px 0;
    border: none;
    border-radius: 4px;
    cursor: pointer;
}

button:hover {
    background-color: #45a049;
}

#result {
    margin-top: 20px;
}

 

CSS는 간단한 스타일을 적용하여 시각적으로 보기 좋게 만드는데 필요하다.

 

3. JavaScript코드(script.js)

function calculate() {
    var loanAmount = parseFloat(document.getElementById('loanAmount').value);
    var loanTerm = parseInt(document.getElementById('loanTerm').value);
    var interestRate = parseFloat(document.getElementById('interestRate').value) / 100;
    var repaymentType = document.getElementById('repaymentType').value;

    var monthlyInterestRate = interestRate / 12;
    var monthlyPayment;
    var remainingLoan = loanAmount;

    var resultHTML = '<h3>월별 상환 내역</h3>';

    if (repaymentType === 'principalAndInterest') {
        monthlyPayment = loanAmount * monthlyInterestRate / (1 - Math.pow(1 + monthlyInterestRate, -loanTerm));
    } else {
        monthlyPayment = loanAmount / loanTerm;
    }

    for (var i = 1; i <= loanTerm; i++) {
        var interestPayment = remainingLoan * monthlyInterestRate;
        var principalPayment = monthlyPayment - interestPayment;
        remainingLoan -= principalPayment;

        resultHTML += '<p><strong>월 ' + i + '</strong>: 원금 ' + principalPayment.toFixed(2) + ' + 이자 ' + interestPayment.toFixed(2) + ', 잔액 ' + remainingLoan.toFixed(2) + '</p>';
    }

    document.getElementById('result').innerHTML = resultHTML;
}

 

 

이 코드는 HTML에 자동차 할부 계산기를 위한 입력 필드 및 버튼을 생성하고, JavaScript로 입력된 값들을 바탕으로 월별 상환액, 이자, 원금, 잔액을 계산하여 출력하는 것으로 이 코드를 사용하여 블로그에 삽입하면 사용자의 입력한 값에 따라 자동차 할부 계산을 할 수 있다.

 

HTML 코드는 대부분의 블로그 플랫폼에서 글쓰기 편집기에 직접 사용할 수 있다. 대개 블로그 편집기에는 HTML을 입력할 수 있는 '소스 편집' 또는 'HTML 편집' 모드가 있기 때문이다.

소스편집 또는 HTML편집에 코드를 붙여 넣은 후에 미리 보기를 통해 계산기가 제대로 동작하는지 확인해 본다.

 

CSS와 JavaScript 코드는 보통 HTML과 마찬가지로 글쓰기 편집기에 붙여 넣을 수 있다. 만약 블로그 플랫폼에서 스타일시트(CSS)와 스크립트(JavaScript)를 직접 연결하는 기능이 제공되고 있지 않는다면, 외부 파일로 작성하여 해당 파일을 호스팅 한 후 HTML에서 링크를 걸어서 사용할 수 있다.

 

외부파일 작성 및 호스팅 링크방법

위의 CSS JavaScript 코드를 웹 서버에 호스팅 한 다음에 HTML에서는 외부파일을 불러와 사용한다.

1. CSS외부 파일 작성 및 호스팅

  • 작성한 CSS코드를 'css' 확장자를 가진 외부파일로 저장을 한다. 이때 각각의 스타일은 적절한 선택지와 함께 작성한다.
  • 호스팅을 위해 CSS파일을 웹 서버에 업로드하고 해당파일의 Url을 확인한다.
  • HTML에서 '<link>' 요소를 사용하여 외부 CSS파일을 불러온다.'<link>' 요소의 herf 속성에 CSS파일의 Url을 포함시킨다.

2. JavaScript 외부파일 작성 및 호스팅

  • 작성한 JavaScript코드를 'js' 확장자를 가진 외부파일로 저장을 한다.
  • 호스팅을 위하여 JavaScript파일을 웹서버에 업로드하고 해당 파일의 Url을 확인한다.
  • HTML파일에서 '<script>' 요소를 확인하여 src속성에 JavaScript파일의 Url을 포함시킨다.

 

[예시]

style.css

/* style.css */
#calculator {
    width: 300px;
    margin: 0 auto;
}

input[type="number"], select {
    width: 100%;
    padding: 8px;
    margin: 5px 0;
    border: 1px solid #ccc;
    border-radius: 4px;
    box-sizing: border-box;
}

button {
    background-color: #4CAF50;
    color: white;
    padding: 10px 20px;
    margin: 8px 0;
    border: none;
    border-radius: 4px;
    cursor: pointer;
}

button:hover {
    background-color: #45a049;
}

#result {
    margin-top: 20px;
}

 

[script.js]

// script.js
function calculate() {
    var loanAmount = parseFloat(document.getElementById('loanAmount').value);
    var loanTerm = parseInt(document.getElementById('loanTerm').value);
    var interestRate = parseFloat(document.getElementById('interestRate').value) / 100;
    var repaymentType = document.getElementById('repaymentType').value;

    // 계산 로직...
}

 

호스팅 된 CSS 및 JavaScript파일의 URL을 '<link>' '<script>'요소를 사용하여 다음과 같이 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="https://example.com/style.css">
</head>
<body>
    <!-- HTML 내용... -->
    <script src="https://example.com/script.js"></script>
</body>
</html>

 

CSS와 JavaScript코드가 별도의 파일로 분리 관리되며, HTML파일에서는 이를 외부파일로 불러와서 사용할 수 있게 되는 것이다.

 

HTML_CODE
코드(배경=신라호텔)

 

이상 코딩 요소 등 ChatGPT 도움을 받았다. 외부파일로 작성하여 호스팅 한 후 html에서 링크를 걸어 사용하면 되므로 다음단계는 외부파일로 작성하여 호스팅 하는 문제만 남았다.

어디에서 할 수 있는지 그 방법을 아직 모르겠다. 왜냐하면 코딩에 코자도 모르기 때문이다. 다음글에서 이에 대하여 해결과정 글을 공유하겠다.

 

 

 

마치며...

자동차 할부 계산기등 계산기를 만드는 데 있어 CSS JavaScript 적용할 줄 모르고 있었다고 하더라도 코딩은 무식하게 목표를 가지고 결과치를 얻으려고 노력하면 성과가 있다고 한다. 이와 같이 할부 계산기를 만들어 페이지에 적용하는 것이 현재로서 요원한 코딩 왕 초보라고 할지라도 관심이 있다면 코딩전문가를 통하여 적용 방법을 배우거나 또는 유튜브 블로그글등을 통하여 스스로 배울 수 있을 것이다.

 

 

반응형
저작자표시 비영리 변경금지

'IT' 카테고리의 다른 글

니해피의 HTML CSS 리뷰  (0) 2024.05.07
비주얼 스튜디오 코드 다운로드 개발 환경 설정  (1) 2024.05.03
테무 이용 후기 가격 조정 요청 과 반품 환불 정책  (0) 2024.04.22
와이파이 비번 찾기 바꾸기 비번없이 연결하는 방법  (0) 2024.04.15
블루투스 휴대폰에서 꼭 꺼야 할 기능인 이유  (0) 2024.04.08

관련글

댓글

티스토리툴바