유용한 도구

모임 정산기

작성자 정보

  • 차트분석 작성
  • 작성일

컨텐츠 정보

본문

<!DOCTYPE html>
<html lang="ko">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
    <title>모임 정산기</title>
    <link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css" rel="stylesheet">
    <style>
        body {
            padding-top: 20px;
            font-weight: bold;
        }
        .round-form {
            display: none;
        }
    </style>
</head>
<body>
<div class="container">
    <h1 class="text-center">모임 정산 계산기</h1>

    <h2 class="text-center">1차 모임</h2>
    <form id="firstRoundForm">
        <div class="form-group">
            <label for="totalPeople1">총 인원 예시(둘리,희동,길동)</label>
            <input type="text" class="form-control" id="totalPeople1" placeholder="이름을 ,로 구분하여 입력" required>
        </div>
        <div class="form-group">
            <label for="nonDrinkerCount1">술을 먹지 않은 인원 (둘리)</label>
            <input type="text" class="form-control" id="nonDrinkerCount1" placeholder="이름을 ,로 구분하여 입력" required>
        </div>
        <div class="form-group">
            <label>안주 비용 (룸비, 공깃밥 포함, 기타 등등)</label>
            <div id="foodCostContainer1">
                <div class="input-group mb-2">
                    <input type="text" class="form-control foodCost" oninput="formatAndCalculate()">
                    <div class="input-group-append">
                        <button type="button" class="btn btn-outline-secondary" onclick="addField('foodCostContainer1', 'foodCost')">+</button>
                    </div>
                </div>
            </div>
        </div>
        <div class="form-group">
            <label>음료수 비용 (술을 먹지 않은 인원 음료값만 기입)</label>
            <div id="drinkCostContainer1">
                <div class="input-group mb-2">
                    <input type="text" class="form-control drinkCost" oninput="formatAndCalculate()">
                    <div class="input-group-append">
                        <button type="button" class="btn btn-outline-secondary" onclick="addField('drinkCostContainer1', 'drinkCost')">+</button>
                    </div>
                </div>
            </div>
        </div>
        <div class="form-group">
            <label>술 비용 (술 먹은 인원 음료값은 여기에 포함)</label>
            <div id="alcoholCostContainer1">
                <div class="input-group mb-2">
                    <input type="text" class="form-control alcoholCost" oninput="formatAndCalculate()">
                    <div class="input-group-append">
                        <button type="button" class="btn btn-outline-secondary" onclick="addField('alcoholCostContainer1', 'alcoholCost')">+</button>
                    </div>
                </div>
            </div>
        </div>
        <div class="form-group">
            <label for="totalCost1">총 비용</label>
            <input type="text" class="form-control" id="totalCost1" readonly>
        </div>
    </form>

    <!-- 2차부터 5차까지 폼 추가 -->
    <div id="roundForms">
        <h2 class="text-center">2차 모임</h2>
        <button class="btn btn-secondary mb-3" onclick="toggleForm('secondRoundForm')">2차 모임 열기/닫기</button>
        <form id="secondRoundForm" class="round-form">
            <div class="form-group">
                <label for="totalPeople2">총 인원</label>
                <input type="text" class="form-control" id="totalPeople2" placeholder="이름을 ,로 구분하여 입력">
            </div>
            <div class="form-group">
                <label for="nonDrinkerCount2">술을 먹지 않은 인원</label>
                <input type="text" class="form-control" id="nonDrinkerCount2" placeholder="이름을 ,로 구분하여 입력">
            </div>
            <div class="form-group">
                <label>안주 비용 (룸비, 공깃밥 포함, 기타 등등)</label>
                <div id="foodCostContainer2">
                    <div class="input-group mb-2">
                        <input type="text" class="form-control foodCost" oninput="formatAndCalculate()">
                        <div class="input-group-append">
                            <button type="button" class="btn btn-outline-secondary" onclick="addField('foodCostContainer2', 'foodCost')">+</button>
                        </div>
                    </div>
                </div>
            </div>
            <div class="form-group">
                <label>음료수 비용 (술을 먹지 않은 인원 음료값만 기입)</label>
                <div id="drinkCostContainer2">
                    <div class="input-group mb-2">
                        <input type="text" class="form-control drinkCost" oninput="formatAndCalculate()">
                        <div class="input-group-append">
                            <button type="button" class="btn btn-outline-secondary" onclick="addField('drinkCostContainer2', 'drinkCost')">+</button>
                        </div>
                    </div>
                </div>
            </div>
            <div class="form-group">
                <label>술 비용 (술 먹은 인원 음료값은 여기에 포함)</label>
                <div id="alcoholCostContainer2">
                    <div class="input-group mb-2">
                        <input type="text" class="form-control alcoholCost" oninput="formatAndCalculate()">
                        <div class="input-group-append">
                            <button type="button" class="btn btn-outline-secondary" onclick="addField('alcoholCostContainer2', 'alcoholCost')">+</button>
                        </div>
                    </div>
                </div>
            </div>
            <div class="form-group">
                <label for="totalCost2">총 비용</label>
                <input type="text" class="form-control" id="totalCost2" readonly>
            </div>
        </form>

        <!-- 동일한 구조로 3차부터 5차까지 추가 -->
        <h2 class="text-center">3차 모임</h2>
        <button class="btn btn-secondary mb-3" onclick="toggleForm('thirdRoundForm')">3차 모임 열기/닫기</button>
        <form id="thirdRoundForm" class="round-form">
            <div class="form-group">
                <label for="totalPeople3">총 인원</label>
                <input type="text" class="form-control" id="totalPeople3" placeholder="이름을 ,로 구분하여 입력">
            </div>
            <div class="form-group">
                <label for="nonDrinkerCount3">술을 먹지 않은 인원</label>
                <input type="text" class="form-control" id="nonDrinkerCount3" placeholder="이름을 ,로 구분하여 입력">
            </div>
            <div class="form-group">
                <label>안주 비용 (룸비, 공깃밥 포함, 기타 등등)</label>
                <div id="foodCostContainer3">
                    <div class="input-group mb-2">
                        <input type="text" class="form-control foodCost" oninput="formatAndCalculate()">
                        <div class="input-group-append">
                            <button type="button" class="btn btn-outline-secondary" onclick="addField('foodCostContainer3', 'foodCost')">+</button>
                        </div>
                    </div>
                </div>
            </div>
            <div class="form-group">
                <label>음료수 비용 (술을 먹지 않은 인원 음료값만 기입)</label>
                <div id="drinkCostContainer3">
                    <div class="input-group mb-2">
                        <input type="text" class="form-control drinkCost" oninput="formatAndCalculate()">
                        <div class="input-group-append">
                            <button type="button" class="btn btn-outline-secondary" onclick="addField('drinkCostContainer3', 'drinkCost')">+</button>
                        </div>
                    </div>
                </div>
            </div>
            <div class="form-group">
                <label>술 비용 (술 먹은 인원 음료값은 여기에 포함)</label>
                <div id="alcoholCostContainer3">
                    <div class="input-group mb-2">
                        <input type="text" class="form-control alcoholCost" oninput="formatAndCalculate()">
                        <div class="input-group-append">
                            <button type="button" class="btn btn-outline-secondary" onclick="addField('alcoholCostContainer3', 'alcoholCost')">+</button>
                        </div>
                    </div>
                </div>
            </div>
            <div class="form-group">
                <label for="totalCost3">총 비용</label>
                <input type="text" class="form-control" id="totalCost3" readonly>
            </div>
        </form>

        <h2 class="text-center">4차 모임</h2>
        <button class="btn btn-secondary mb-3" onclick="toggleForm('fourthRoundForm')">4차 모임 열기/닫기</button>
        <form id="fourthRoundForm" class="round-form">
            <div class="form-group">
                <label for="totalPeople4">총 인원</label>
                <input type="text" class="form-control" id="totalPeople4" placeholder="이름을 ,로 구분하여 입력">
            </div>
            <div class="form-group">
                <label for="nonDrinkerCount4">술을 먹지 않은 인원</label>
                <input type="text" class="form-control" id="nonDrinkerCount4" placeholder="이름을 ,로 구분하여 입력">
            </div>
            <div class="form-group">
                <label>안주 비용 (룸비, 공깃밥 포함, 기타 등등)</label>
                <div id="foodCostContainer4">
                    <div class="input-group mb-2">
                        <input type="text" class="form-control foodCost" oninput="formatAndCalculate()">
                        <div class="input-group-append">
                            <button type="button" class="btn btn-outline-secondary" onclick="addField('foodCostContainer4', 'foodCost')">+</button>
                        </div>
                    </div>
                </div>
            </div>
            <div class="form-group">
                <label>음료수 비용 (술을 먹지 않은 인원 음료값만 기입)</label>
                <div id="drinkCostContainer4">
                    <div class="input-group mb-2">
                        <input type="text" class="form-control drinkCost" oninput="formatAndCalculate()">
                        <div class="input-group-append">
                            <button type="button" class="btn btn-outline-secondary" onclick="addField('drinkCostContainer4', 'drinkCost')">+</button>
                        </div>
                    </div>
                </div>
            </div>
            <div class="form-group">
                <label>술 비용 (술 먹은 인원 음료값은 여기에 포함)</label>
                <div id="alcoholCostContainer4">
                    <div class="input-group mb-2">
                        <input type="text" class="form-control alcoholCost" oninput="formatAndCalculate()">
                        <div class="input-group-append">
                            <button type="button" class="btn btn-outline-secondary" onclick="addField('alcoholCostContainer4', 'alcoholCost')">+</button>
                        </div>
                    </div>
                </div>
            </div>
            <div class="form-group">
                <label for="totalCost4">총 비용</label>
                <input type="text" class="form-control" id="totalCost4" readonly>
            </div>
        </form>

        <h2 class="text-center">5차 모임</h2>
        <button class="btn btn-secondary mb-3" onclick="toggleForm('fifthRoundForm')">5차 모임 열기/닫기</button>
        <form id="fifthRoundForm" class="round-form">
            <div class="form-group">
                <label for="totalPeople5">총 인원</label>
                <input type="text" class="form-control" id="totalPeople5" placeholder="이름을 ,로 구분하여 입력">
            </div>
            <div class="form-group">
                <label for="nonDrinkerCount5">술을 먹지 않은 인원</label>
                <input type="text" class="form-control" id="nonDrinkerCount5" placeholder="이름을 ,로 구분하여 입력">
            </div>
            <div class="form-group">
                <label>안주 비용 (룸비, 공깃밥 포함, 기타 등등)</label>
                <div id="foodCostContainer5">
                    <div class="input-group mb-2">
                        <input type="text" class="form-control foodCost" oninput="formatAndCalculate()">
                        <div class="input-group-append">
                            <button type="button" class="btn btn-outline-secondary" onclick="addField('foodCostContainer5', 'foodCost')">+</button>
                        </div>
                    </div>
                </div>
            </div>
            <div class="form-group">
                <label>음료수 비용 (술을 먹지 않은 인원 음료값만 기입)</label>
                <div id="drinkCostContainer5">
                    <div class="input-group mb-2">
                        <input type="text" class="form-control drinkCost" oninput="formatAndCalculate()">
                        <div class="input-group-append">
                            <button type="button" class="btn btn-outline-secondary" onclick="addField('drinkCostContainer5', 'drinkCost')">+</button>
                        </div>
                    </div>
                </div>
            </div>
            <div class="form-group">
                <label>술 비용 (술 먹은 인원 음료값은 여기에 포함)</label>
                <div id="alcoholCostContainer5">
                    <div class="input-group mb-2">
                        <input type="text" class="form-control alcoholCost" oninput="formatAndCalculate()">
                        <div class="input-group-append">
                            <button type="button" class="btn btn-outline-secondary" onclick="addField('alcoholCostContainer5', 'alcoholCost')">+</button>
                        </div>
                    </div>
                </div>
            </div>
            <div class="form-group">
                <label for="totalCost5">총 비용</label>
                <input type="text" class="form-control" id="totalCost5" readonly>
            </div>
        </form>
    </div>

    <button type="button" class="btn btn-primary mt-4" onclick="calculateAllRounds()">전체 계산 및 이미지 저장</button>

    <div id="result" class="mt-4">
        <h3>결과</h3>
        <p>술 X 금액: <span id="totalNonDrinkerResult" style="color: red;"></span>원</p>
        <p>술 O 금액: <span id="totalDrinkerResult"></span>원</p>
        <div id="individualResults"></div>
    </div>

    <div id="copyButtonContainer" class="mt-4"></div>
</div>

<!-- 최신 html2canvas 라이브러리 -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/html2canvas/1.4.1/html2canvas.min.js"></script>
<script>
    function formatNumber(value) {
        return value.toString().replace(/\B(?=(\d{3})+(?!\d))/g, ',');
    }

    function parseNumber(value) {
        return parseInt(value.replace(/,/g, ''), 10);
    }

    function formatAndCalculate() {
        document.querySelectorAll('.foodCost, .drinkCost, .alcoholCost').forEach(function(input) {
            input.value = formatNumber(parseNumber(input.value) || 0);
        });

        // 각 차수별로 총 비용을 계산하여 표시
        const rounds = [1, 2, 3, 4, 5];
        rounds.forEach(round => {
            let totalCost = 0;
            const foodCosts = document.querySelectorAll(`#foodCostContainer${round} .foodCost`);
            const drinkCosts = document.querySelectorAll(`#drinkCostContainer${round} .drinkCost`);
            const alcoholCosts = document.querySelectorAll(`#alcoholCostContainer${round} .alcoholCost`);

            foodCosts.forEach(input => totalCost += parseNumber(input.value));
            drinkCosts.forEach(input => totalCost += parseNumber(input.value));
            alcoholCosts.forEach(input => totalCost += parseNumber(input.value));

            const totalCostElement = document.getElementById(`totalCost${round}`);
            if (totalCostElement) {
                totalCostElement.value = formatNumber(totalCost);
            }
        });
    }

    function addField(containerId, className) {
        const container = document.getElementById(containerId);
        const inputGroup = document.createElement('div');
        inputGroup.className = 'input-group mb-2';

        const input = document.createElement('input');
        input.type = 'text';
        input.className = `form-control ${className}`;
        input.setAttribute('oninput', 'formatAndCalculate()');

        const inputGroupAppend = document.createElement('div');
        inputGroupAppend.className = 'input-group-append';

        const removeButton = document.createElement('button');
        removeButton.type = 'button';
        removeButton.className = 'btn btn-outline-secondary';
        removeButton.innerText = '-';
        removeButton.onclick = function() {
            container.removeChild(inputGroup);
            formatAndCalculate();
        };

        inputGroupAppend.appendChild(removeButton);
        inputGroup.appendChild(input);
        inputGroup.appendChild(inputGroupAppend);
        container.appendChild(inputGroup);
    }

    function toggleForm(formId) {
        const form = document.getElementById(formId);
        form.style.display = (form.style.display === 'none' || form.style.display === '') ? 'block' : 'none';
    }

    function calculateAllRounds() {
        const rounds = [1, 2, 3, 4, 5];
        let totalNonDrinkerResult = 0;
        let totalDrinkerResult = 0;

        let drinkerTotals = {};
        let nonDrinkerTotals = {};

        rounds.forEach(round => {
            const result = calculateRound(round, round);
            totalNonDrinkerResult += result.nonDrinker;
            totalDrinkerResult += result.drinker;

            result.nonDrinkers.forEach(name => {
                if (nonDrinkerTotals[name]) {
                    nonDrinkerTotals[name] += result.nonDrinker;
                } else {
                    nonDrinkerTotals[name] = result.nonDrinker;
                }
            });

            result.drinkers.forEach(name => {
                if (drinkerTotals[name]) {
                    drinkerTotals[name] += result.drinker;
                } else {
                    drinkerTotals[name] = result.drinker;
                }
            });
        });

        document.getElementById('totalNonDrinkerResult').innerText = totalNonDrinkerResult.toLocaleString();
        document.getElementById('totalDrinkerResult').innerText = totalDrinkerResult.toLocaleString();

        const individualResults = document.getElementById('individualResults');
        individualResults.innerHTML = '<h4>닉네임별 정산 결과:</h4>';

        Object.keys(nonDrinkerTotals).forEach(name => {
            const amount = nonDrinkerTotals[name].toLocaleString();
            individualResults.innerHTML += `<p>${name}: ${amount}원 (술 X)</p>`;
        });

        Object.keys(drinkerTotals).forEach(name => {
            const amount = drinkerTotals[name].toLocaleString();
            individualResults.innerHTML += `<p>${name}: ${amount}원 (술 O)</p>`;
        });

        // "복사하기" 버튼 추가
        const copyButtonContainer = document.getElementById('copyButtonContainer');
        copyButtonContainer.innerHTML = '<button class="btn btn-success" onclick="copyResults()">결과 복사하기</button>';

        // 결과를 캡처 및 저장
        html2canvas(document.body).then(canvas => {
            const link = document.createElement('a');
            link.href = canvas.toDataURL('image/png');
            link.download = 'total_result.png';
            link.click();
        });
    }

    function calculateRound(roundNumber) {
        const totalPeopleInput = document.getElementById(`totalPeople${roundNumber}`);
        const nonDrinkerInput = document.getElementById(`nonDrinkerCount${roundNumber}`);
       
        if (!totalPeopleInput || !nonDrinkerInput) return { nonDrinker: 0, drinker: 0, nonDrinkers: [], drinkers: [] };

        const totalPeople = totalPeopleInput.value.split(',').map(name => name.trim()).filter(name => name !== '');
        const nonDrinkers = nonDrinkerInput.value.split(',').map(name => name.trim()).filter(name => name !== '');
        const drinkers = totalPeople.filter(name => !nonDrinkers.includes(name));

        const foodCost = Array.from(document.querySelectorAll(`#foodCostContainer${roundNumber} .foodCost`)).reduce((sum, input) => sum + parseNumber(input.value), 0);
        const drinkCost = Array.from(document.querySelectorAll(`#drinkCostContainer${roundNumber} .drinkCost`)).reduce((sum, input) => sum + parseNumber(input.value), 0);
        const alcoholCost = Array.from(document.querySelectorAll(`#alcoholCostContainer${roundNumber} .alcoholCost`)).reduce((sum, input) => sum + parseNumber(input.value), 0);

        const nonDrinkerShare = nonDrinkers.length > 0 ? Math.floor((foodCost / totalPeople.length) + (drinkCost / nonDrinkers.length)) : 0;
        const drinkerShare = drinkers.length > 0 ? Math.floor((foodCost / totalPeople.length) + (alcoholCost / drinkers.length)) : 0;

        return { nonDrinker: nonDrinkerShare, drinker: drinkerShare, nonDrinkers: nonDrinkers, drinkers: drinkers, roundNumber: roundNumber };
    }

    function copyResults() {
        const totalNonDrinker = document.getElementById('totalNonDrinkerResult').innerText;
        const totalDrinker = document.getElementById('totalDrinkerResult').innerText;
        const individualResults = document.getElementById('individualResults').innerText;

        let textToCopy = `술 X 금액: ${totalNonDrinker}원\n술 O 금액: ${totalDrinker}원\n\n`;

        const rounds = [1, 2, 3, 4, 5];
        rounds.forEach(round => {
            const result = calculateRound(round);
            textToCopy += `\n${round}차 결과:\n`;
            result.nonDrinkers.forEach(name => {
                textToCopy += `${name}: ${result.nonDrinker}원 (술 X)\n`;
            });
            result.drinkers.forEach(name => {
                textToCopy += `${name}: ${result.drinker}원 (술 O)\n`;
            });
        });

        textToCopy += `\n${individualResults}`;

        const textarea = document.createElement('textarea');
        textarea.value = textToCopy;
        document.body.appendChild(textarea);
        textarea.select();
        document.execCommand('copy');
        document.body.removeChild(textarea);

        alert('결과가 복사되었습니다!');
    }
</script>

<script src="https://code.jquery.com/jquery-3.5.1.slim.min.js"></script>
<script src="core@2.9.2/dist/umd/popper.min.js"" TARGET="_blank" rel="nofollow">https://cdn.jsdelivr.net/npm/@popperjs/core@2.9.2/dist/umd/popper.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.2/js/bootstrap.min.js"></script>
</body>
</html>
모임 정산기

모임 정산 계산기

1차 모임

2차 모임

3차 모임

4차 모임

5차 모임

결과

술 X 금액: 원

술 O 금액: 원

관련자료

목록
📊 크립토 공포지수 Latest Crypto Fear & Greed Index
알림 0