Javascript의 단순이자 계산기 | 초보자를 위한 HTML 단순 이자 계산기

이 기사에서는 내가 어떻게했는지 보여줄 것입니다. 😃
이 게시물에서는 특별히 html css와 javascript를 사용하여 간단한 관심 계산기 프로젝트를 달성하는 방법을 살펴볼 것입니다. 이 자습서에서 빌드할 최종 결과는 다음과 같습니다.



소스 파일 링크Here

이 작은 프로젝트의 소스 파일은 위 링크에서 쉽게 다운로드할 수 있습니다. 주로 이 프로젝트에서 아래에 주어진 이러한 개념에 대해 배울 수 있습니다.
  • dom을 조작하는 방법에 대해 배웁니다.
  • 이를 통한 수식 계산 .
  • 변수 등에 대한 입력 값을 수락합니다.

  • HTML
    먼저 html 마크업이 필요합니다. 계산기의 골격이 만들어지는 곳. 그래서 여기에 몇 가지 html 코드를 언급했습니다. 또한 별도의 스타일 시트 링크를 첨부했습니다.

    ⭐ 참고 소스 링크는 Here에서 다운로드해야 합니다.

    <!DOCTYPE html>
    <html>
    
    <head>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1">
        <title>Simple interest calculator</title>
        <link rel="stylesheet" href="style.css">
    </head>
    
    <body>
    
      <div class="container">
        <h2>Simple Interest</h2>
      <input type="number" id="principal" placeholder="Principal">
        <input type="number" id="rate" placeholder="Rate Of Interest">
        <input type="number" id="time"placeholder="Time in years">
        <div class="result">
          <p>Interest: <span id="interest"></span><br></p> 
          <p>Total Interest: <span id="plus"></span></p>
        </div>
        <button id="btn" class="button-56" role="button">Submit</button>
      </div>
    
    </body>
    
    </html>
    


    참고: 원하는 대로 사용자 정의할 수 있습니다. 더 보기 좋게 하기 위해 몇 가지 스타일을 추가했습니다.

    CSS
    여기에서 원하는 대로 이 계산기의 스타일을 지정할 수 있지만 일반적인 스타일을 적용하거나 적용한 경우에 대비합니다. 스타일을 작성해야 하는 별도의 파일 이름 style.css를 만듭니다.

    @import url('https://fonts.googleapis.com/css2?family=Inter:wght@100;200;300;400;500;600;700;800;900&family=Poppins:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,100;1,200;1,300;1,400;1,500;1,600;1,700;1,800;1,900&display=swap');
    
    
    *{
      padding: 0;
      margin: 0;
      box-sizing: border-box;
    }
    
    body{
      display: flex;
      justify-content: center;
      align-items: center;
      min-height: 100vh;
      background: #3E00AC;
      font-family: 'Poppins', sans-serif;
    }
    
    .container{
      width: 550px;
      height: 750px;  
      display: grid;
      place-items: center;
      background: #edf1f4;
      border-radius: 10px;
      border: 3px solid rgb(0, 0, 0);
    }
    
    .container h2 { 
      padding-top: 15px;
      font-family: 'Poppins', sans-serif;
      font-weight: 800;
      color: #464646;
    }
    
    .container span{
      font-weight: 700;
    }
    
    .container .result{
      color: #9E9E9E;
      width: 440px;
    }
    
    .container input{
      width: 440px;
      height: 80px;
      background: #edf1f4;
      inset: -5px -5px 5px #fff;
      border-radius: 5px;
      border: 1px solid black;
      outline: none;
      font-size: 20px;
      padding: 24px;
    }
    
    p {
      color: #3E00AC;
      font-size: 17px;
      padding: 10px;
    }
    
    #interest {
      font-size: 20px;
      padding-left: 1rem;
    }
    #plus {
      font-size: 20px;
      padding-left: 1rem;
    }
    
    
    
    
    /* CSS */
    .button-56 { width: 400px;
      height: 200px;
      align-items: center;
      background-color: #adffc8;
      border: 2px solid #111;
      border-radius: 8px;
      box-sizing: border-box;
      color: rgb(26, 26, 26);
      cursor: pointer;
      display: flex;
      font-family: Inter,sans-serif;
      font-size: 16px;
      height: 68px;
      justify-content: center;
      line-height: 24px;
      max-width: 100%;
      padding: 85rem 25rem;
      position: relative;
      text-align: center;
      text-decoration: none;
      user-select: none;
      -webkit-user-select: none;
      touch-action: manipulation;
      margin-bottom: 1rem;
    }
    
    .button-56:after {
      background-color: #111;
      border-radius: 8px;
      content: "";
      display: block;
      height: 48px;
      left: 0;
      width: 100%;
      position: absolute;
      top: -2px;
      transform: translate(8px, 8px);
      transition: transform .2s ease-out;
      z-index: -1;
    }
    
    .button-56:hover:after {
      transform: translate(0, 0);
    }
    
    .button-56:active {
      background-color: #ffdeda;
      outline: 0;
    }
    
    .button-56:hover {
      outline: 0;
    }
    
    @media (min-width: 768px) {
      .button-56 {
        padding: 0 40px;
      }
    }
    


    css 및 html 부분을 성공적으로 완료했습니다. 이제 재미있는 부분인 javascript를 시작하겠습니다. 이 간단한이자 계산기에 대한 논리가 어떻게 작동하는지 이해합시다.
    이 계산기의 위 부분을 이해하시기 바랍니다. 이제 JavaScript를 시작하겠습니다.

    자바스크립트

    !--Script-->
      <script>
    
      /*Simple Interest Formula = 
      p*r*t/100*/
    
        btn.addEventListener("click", () => {
            /*Get input values to the variables */
          let p = parseInt(document.getElementById('principal').value);
          let r = document.getElementById('rate').value;
          let t = document.getElementById('time').value;
          let btn = document.getElementById('btn');
    
          var interest = (p*r*t)/100;
    
          document.getElementById('interest').innerHTML = interest;
    
          var plusInterest = p + interest;
          document.getElementById('plus').innerHTML = plusInterest;
    
        })
    
      </script>
    
    




    축하합니다! 완벽하게 작동하고 스타일이 지정된 앱을 만들었습니다. 전체 과정에서 새로운 것을 배웠기를 바랍니다! 모든 제안 및 쿼리에 대한 의견 상자에 의견을 말하십시오.

    Downloading Files

    좋은 웹페이지 즐겨찾기