반응형
가계부 프로그램을 작성해 보겠습니다.
간단한 가계부
가계부
| 날짜 | 유형 | 금액 | 설명 |
|---|
이 프로그램은 사용자가 지출과 수입을 입력하고 이를 기록하는 간단한 웹 기반 가계부입니다. 사용자가 입력한 내용은 웹 브라우저의 로컬 스토리지에 저장됩니다. 아래는 JavaScript와 HTML을 사용한 가계부 프로그램의 예시 코드입니다.
html
코드 복사
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>간단한 가계부</title> </head> <body> <h1>간단한 가계부</h1> <!-- 입력 폼 --> <form id="transactionForm"> <label for="transactionType">거래 유형:</label> <select id="transactionType"> <option value="income">수입</option> <option value="expense">지출</option> </select><br> <label for="amount">금액:</label> <input type="number" id="amount" required><br> <label for="description">설명:</label> <input type="text" id="description"><br> <button type="submit">기록</button> </form> <!-- 가계부 테이블 --> <h2>가계부</h2> <table id="transactionTable"> <thead> <tr> <th>날짜</th> <th>유형</th> <th>금액</th> <th>설명</th> </tr> </thead> <tbody id="transactionTableBody"> </tbody> </table> <script> // 페이지 로드 시 실행 document.addEventListener('DOMContentLoaded', function() { loadTransactions(); document.getElementById('transactionForm').addEventListener('submit', addTransaction); }); // 거래 기록 함수 function addTransaction(event) { event.preventDefault(); var transactionType = document.getElementById('transactionType').value; var amount = parseFloat(document.getElementById('amount').value); var description = document.getElementById('description').value; var date = new Date().toLocaleString(); // 로컬 스토리지에 거래 추가 var transaction = { type: transactionType, amount: amount, description: description, date: date }; var transactions = JSON.parse(localStorage.getItem('transactions')) || []; transactions.push(transaction); localStorage.setItem('transactions', JSON.stringify(transactions)); // 테이블 업데이트 loadTransactions(); // 폼 리셋 document.getElementById('transactionForm').reset(); } // 가계부 테이블 업데이트 함수 function loadTransactions() { var transactions = JSON.parse(localStorage.getItem('transactions')) || []; var tableBody = document.getElementById('transactionTableBody'); tableBody.innerHTML = ''; transactions.forEach(function(transaction) { var row = "<tr><td>" + transaction.date + "</td><td>" + transaction.type + "</td><td>" + transaction.amount + "</td><td>" + transaction.description + "</td></tr>"; tableBody.innerHTML += row; }); } </script> </body> </html>
이 프로그램은 HTML의 폼을 통해 사용자가 거래를 입력하고, JavaScript를 사용하여 이를 로컬 스토리지에 저장하고 테이블에 표시합니다. 사용자는 거래 유형(수입 또는 지출), 금액, 설명을 입력할 수 있습니다. 입력한 거래는 테이블에 날짜, 유형, 금액, 설명과 함께 표시됩니다.
반응형
'AI물어보살' 카테고리의 다른 글
| 삼성이 10년간 신입사원에게 추천한 이나모리 가즈오의 책 "왜 일하는가?" (0) | 2024.05.22 |
|---|---|
| 간단한 영어 회화 무한반복 프로그램 작성하기 (0) | 2024.05.22 |
| 현재시간 javascript로 시계 프로그램 작성하기(코드포함) (0) | 2024.05.22 |
| 집금거래목적아님과 집금거래목적 구분(증권계좌 고객확인때 당황하셨죠) (0) | 2024.05.20 |
| 장애인전용주차장 주차가능 스티커와 주차불가 스티커 구분 이유 (0) | 2024.05.18 |
