미국 배당주 심플계산기

서론

저번 일주일 동안에는 실수 로 날려먹은

GitHub 레파지토리 데이터를 살리고

이제 Hexo 블로그 가 어느정도 완성해서

이제서야 첫 게시글을 작성해본다.

본론

심플계산기
심플계산기(JP)

나는 가까운 미래 미국 배당주 주식을
계획 하고 있다.

그래서 예상금액 등등 계산을 할려고
계산기를 찾고 있었는데

대부분 너무 복잡하고 내가 원하는 계산기가

없어서 그냥 내가 코딩으로 만들어 보기로 했다.

(나의 원래 정체성은 코딩 이랑 화이트해커이다.)

(여테까지 나는 취미로 그림을 그린다.)

일딴 단순히 계산식은 이렇다.

-모아볼 주 × 예상 배당금

-1주 가격 × 구입한주

이런 형식의 계산기가 나에게 필요했다

자 이제 바로 아래 자바스크립트 코드를 보자

<script>
    function calculate() {
      const num = parseFloat(document.getElementById('num').value);
      const num1 = parseFloat(document.getElementById('num1').value);
      const num2 = parseFloat(document.getElementById('num2').value);
      const num3 = parseFloat(document.getElementById('num3').value);
 
      if (isNaN(num) || isNaN(num1) || isNaN(num2) || isNaN(num3)) {
        document.getElementById('output').innerHTML = "⚠️ 모든 입력란을 채워주세요!";
        return;
      }
 
      const YB = num * num1;
      const afterTax = YB * (1 - 0.154);
      const ZG = num2 * num3;
 
      document.getElementById('output').innerHTML =
        `총 예상 배당금: <strong>${YB.toLocaleString()}원</strong><br>` +
        `세후 예상 배당금 (15.4% 공제): <strong>${afterTax.toLocaleString()}원</strong><br>` +
        `총 예상 구입가격: <strong>${ZG.toLocaleString()}원</strong>`;
    }
  </script>

위 코드는 바닐라 자바스크립트 다.
순수 자바스크립트 코드로 코딩을 해봤다.

아주 오래전에 직업훈련학교 때 배워둔 자바스크립트가

빛을 발하는 듯하다. 아무튼 결과물은 아래 사진.1

사진.1

생각보다 결과물은 매우 만족한다 .

이제 가까운 미래 에 미국 배당주 주식 시작할 때

큰 도움이 되지 싶다.

마지막 아래 코드는 전체 코드이다.

<!DOCTYPE html>
<html lang="ko">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>심플 배당주 계산기(원화)</title>
  <style>
    body {
      font-family: 'Segoe UI', sans-serif;
      background-color: #f4f4f4;
      padding: 2em;
      max-width: 600px;
      margin: auto;
    }
    h1 {
      color: #2c3e50;
      font-size: 1.8em;
    }
    label, input {
      display: block;
      margin-bottom: 1em;
      font-size: 1rem;
      width: 100%;
    }
    input {
      padding: 0.5em;
      box-sizing: border-box;
      border-radius: 5px;
      border: 1px solid #ccc;
    }
    button {
      width: 100%;
      padding: 0.8em;
      font-size: 1rem;
      border: none;
      background-color: #3498db;
      color: white;
      border-radius: 6px;
      cursor: pointer;
      margin-top: 1em;
    }
    button:hover {
      background-color: #2980b9;
    }
    .result {
      margin-top: 2em;
      font-weight: bold;
      word-break: keep-all;
    }
 
    .wrap-container {
      margin-top: 2em;
      text-align: center;
    }
    .home-image {
      width: 100%;
      max-width: 300px;
      height: auto;
    }
 
    footer {
      text-align: center;
      margin-top: 3em;
      font-size: 0.9em;
      color: #777;
    }
 
    @media (max-width: 480px) {
      body {
        padding: 1em;
      }
      h1 {
        font-size: 1.4em;
      }
      button {
        font-size: 0.9em;
      }
    }
  </style>
</head>
<body>
 
  <!--<h1> </h1>--> 
  <label>
  <br><font size=6 style="font-weight:900;">💹 심플 배당주 계산기(원화)</font> <a style="color: #33d45b">ver 0.0.5</a></br>
</label>
 
  <label>
    <a style="color: #37b7fe">모아볼 주:</a>
    <input type="number" id="num" placeholder="예: 22691">
  </label>
 
  <label>
    <a style="color: #37b7fe">예상 배당락:</a>
    <input type="number" id="num1" placeholder="예: 1158">
  </label>
 
  <label>
    <a style="color: #37b7fe">1주당 가격:</a>
    <input type="number" id="num2" placeholder="현재 1주당 가격">
  </label>
 
  <label>
    <a style="color: #37b7fe">구입한 주:</a>
    <input type="number" id="num3" placeholder="구입할 주식 수">
  </label>
 
  <button onclick="calculate()">계산하기</button>
 
  <div class="result" id="output"></div>
 
  <script>
    function calculate() {
      const num = parseFloat(document.getElementById('num').value);
      const num1 = parseFloat(document.getElementById('num1').value);
      const num2 = parseFloat(document.getElementById('num2').value);
      const num3 = parseFloat(document.getElementById('num3').value);
 
      if (isNaN(num) || isNaN(num1) || isNaN(num2) || isNaN(num3)) {
        document.getElementById('output').innerHTML = "⚠️ 모든 입력란을 채워주세요!";
        return;
      }
 
      const YB = num * num1;
      const afterTax = YB * (1 - 0.154);
      const ZG = num2 * num3;
 
      document.getElementById('output').innerHTML =
        `총 예상 배당금: <strong>${YB.toLocaleString()}원</strong><br>` +
        `세후 예상 배당금 (15.4% 공제): <strong>${afterTax.toLocaleString()}원</strong><br>` +
        `총 예상 구입가격: <strong>${ZG.toLocaleString()}원</strong>`;
    }
  </script>
 
  <div class="wrap-container">
    <div class="home-container">
 
    </div>
  </div>  
  <script width="5px" height="5px"  type="text/javascript" src="https://cdnjs.buymeacoffee.com/1.0.0/button.prod.min.js" data-name="bmc-button" data-slug="Luna0x03" data-color="#BD5FFF" data-emoji="" data-font="Cookie" data-text="Buy me a coffee" data-outline-color="#000000" data-font-color="#ffffff" data-coffee-color="#FFDD00" ></script>
</body>
 
by. <a href="https://github.com/luna00110010">luna00110010</a>
 
<footer>  
  <small>Copyright &copy; Kurai Luna(Luna0x03)</small>
</footer>
</html>

휴, 많은 뻘짓이였다ㅡㅠ;;
아무튼 아래 사진.2 처럼 일본 버전도 보여주고 이만 끝마친다.

사진.2

P.s.
일본버전도 만들어보니까

일본에서 총 배당금 세금이 28.28% 사실에

놀라웠다, 개인적으로 일본의 금융에 있어서는

많이 아쉬운 부분이다.