워드프레스로 자바스크립트를 사용하여 간단한 계산기 만들기

워드프레스 사이트에서 간단한 계산을 할 수 있는 계산기를 만들어 보았습니다. HTML과 CSS, 그리고 자바스크립트를 만들어 워드프레스에서 작동하도록 구현할 수 있습니다.

워드프레스로 자바스크립트를 사용하여 간단한 계산기 만들기

구글링 해보면 간단한 계산기를 구현하는 다양한 자바스크립트 코드가 공개되어 있습니다. 공개된 코드를 이용하려고 했지만 코드에 보안 문제가 있어서 코드는 새롭게 만들어 보았습니다. 스타일은 [Javascript] 초간단 계산기 프로그램 만들기 글에 제시된 코드를 참조했습니다.

최종적으로 다음 그림과 같은 모양의 기본적인 사칙연산이 가능한 계산기입니다.

작동은 여기에서 확인할 수 있습니다. 기본적인 기능만 제공하므로 기능면에서 많이 미흡합니다. 제시된 코드를 참고하여 기능을 추가할 수 있을 것입니다.

HTML 코드

<div class="calculator-container">
    <div class="display">0</div>
    <div class="buttons">
        <div class="number" data-value="1">1</div>
        <div class="number" data-value="2">2</div>
        <div class="number" data-value="3">3</div>
        <div class="operator" data-value="+">+</div>
        
        <div class="number" data-value="4">4</div>
        <div class="number" data-value="5">5</div>
        <div class="number" data-value="6">6</div>
        <div class="operator" data-value="-">-</div>
        
        <div class="number" data-value="7">7</div>
        <div class="number" data-value="8">8</div>
        <div class="number" data-value="9">9</div>
        <div class="operator" data-value="*">*</div>
        
        <div class="number" data-value="0">0</div>
        <div class="reset">AC</div>
        <div class="equals">=</div>
        <div class="operator" data-value="/">/</div>
    </div>
</div>
			<button class="copy-btn">결과 복사하기</button>

CSS 스타일

.calculator-container {
    padding: 20px;
    border-radius: 2em;
    background-color: #f8f8f8;
    width: 300px;
    height: auto;
    margin: auto;
}

.buttons {
    font-size: 2em;
    font-weight: bold;
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 10px;
}

.number, .operator, .reset, .equals {
    border-radius: .75em;
    background-color: #f4f4f4;
    box-shadow: 1px 3px 15px -8px rgba(0,0,0,0.5);
    border: 3px solid rgba(240,240,240,.75);
    display: flex;
    justify-content: center;
    align-items: center;
    cursor: pointer;
}

.operator {
    background-color: #f0dbef;
}

.reset {
    background-color: #dbdef0;
}

.equals {
    background-color: #d0dec9;
}

.display {
    font-family: DotGothic16;
    font-size: 2em;
    width: 100%;
    height: 2.8em;
    line-height: 1.1em;
    padding: 0.25em;
    margin-bottom: .5em;
    box-sizing: border-box;
    text-align: right;
    border-radius: .5em;
    letter-spacing: 3px;
    background-color: #abbda7;
    box-shadow: inset 2px 2px 3px 0px rgba(0,0,0,.25);
}

.copy-btn {
    margin-top: 20px;
    font-size: 1em;
    padding: 8px 16px;
    border: none;
    background-color: #d0dec9;
    border-radius: .75em;
    cursor: pointer;
    box-shadow: 1px 3px 15px -8px rgba(0,0,0,0.5);
    transition: background-color 0.3s ease;
}

.copy-btn:hover {
    background-color: #bfcdb2;
}

사용하는 테마에 따라 적절히 변경할 수 있습니다. GeneratePress 테마에서는 잘 작동할 것입니다.

자바스크립트(Javascript) 코드

기본적인 기능을 제공하는 심플한 계산기를 구현하는 자바스크립트 코드입니다. 결과 값을 추가할 수 있는 기능이 추가되었고, 숫자를 최대 15자리까지 입력이 가능하도록 제한했습니다.

// Define the display constant here so it's accessible everywhere
const display = document.querySelector('.display');

document.addEventListener('DOMContentLoaded', function() {
    let currentOperation = '';
    let firstOperand = '';
    let secondOperand = '';
    let operator = '';

    // Function to format numbers with thousands separators
    function formatNumber(num) {
        return parseFloat(num).toLocaleString();
    }

    // Update the display with the current operation
    function updateDisplay() {
        const formattedOperation = currentOperation.replace('*', 'x');  // replace * with x for display
        display.innerText = formattedOperation;
    }

// Handle number click
function handleNumber(number) {
    const isWithinLimit = (operand) => {
        return operand.replace(/,/g, '').length < 15;
    };

    if (!operator) {
        if (isWithinLimit(firstOperand)) {
            firstOperand += number;
            currentOperation = formatNumber(firstOperand);
        }
    } else {
        if (isWithinLimit(secondOperand)) {
            secondOperand += number;
            currentOperation = formatNumber(firstOperand) + operator + formatNumber(secondOperand);
        }
    }
    updateDisplay();
}

    // Handle operator click
    function handleOperator(op) {
        if (firstOperand && !operator) {
            operator = op;
            currentOperation = formatNumber(firstOperand) + operator;
        } else if (firstOperand && operator && !secondOperand) {
            operator = op;
            currentOperation = formatNumber(firstOperand) + operator;
        } else if (firstOperand && secondOperand && operator) {
            firstOperand = calculate();
            secondOperand = '';
            operator = op;
            currentOperation = formatNumber(firstOperand) + operator;
        }
        updateDisplay();
    }

// Perform the actual calculation
function calculate() {
    let result = 0;
    let firstNum = parseFloat(firstOperand.replace(/,/g, ''));
    let secondNum = parseFloat(secondOperand.replace(/,/g, ''));

    switch (operator) {
        case '+':
            result = firstNum + secondNum;
            break;
        case '-':
            result = firstNum - secondNum;
            break;
        case '*':
            result = firstNum * secondNum;
            break;
        case '/':
            if (secondNum !== 0) {
                result = firstNum / secondNum;
            } else {
                alert("0으로 나눌 수 없습니다!");
                clearAll();
                return;
            }
            break;
    }

    // Here's the main change:
    let integerPart = Math.floor(result);
    let decimalPartLength = 15 - integerPart.toString().length - 1; // -1 to account for the decimal point
    result = parseFloat(result.toFixed(decimalPartLength));
    
    return formatNumber(result.toString());
}


    // Reset/clear the calculator
    function clearAll() {
        firstOperand = '';
        secondOperand = '';
        operator = '';
        currentOperation = '';
        updateDisplay();
    }

    document.querySelector('.buttons').addEventListener('click', function(e) {
        if (e.target.classList.contains('number')) {
            handleNumber(e.target.innerText);
        } else if (e.target.classList.contains('operator')) {
            handleOperator(e.target.innerText);
        } else if (e.target.classList.contains('reset')) {
            clearAll();
        } else if (e.target.classList.contains('equals')) {
            if (firstOperand && secondOperand && operator) {
                display.innerText = calculate();
                currentOperation = '';
                firstOperand = display.innerText.replace(/,/g, '');
                secondOperand = '';
                operator = '';
            }
        }
    });

    document.querySelector('.copy-btn').addEventListener('click', function() {
        const textArea = document.createElement('textarea');
        textArea.value = display.innerText.replace(/,/g, '');
        document.body.appendChild(textArea);
        textArea.select();
        document.execCommand('copy');
        document.body.removeChild(textArea);
        alert('계산 결과가 복사되었습니다!');
    });
});

워드프레스에 적용하기

워드프레스에 적용하려면 HTML 파트와 CSS 파트, 그리고 JavaScript 파트를 적절히 추가해야 합니다. HTML 파트는 엘리멘터 페이지 빌더 등의 페이지 빌더를 사용하는 경우 HTML 요소로 추가할 수 있습니다.

엘리멘터 페이지 빌더에 HTML 코드 추가하기 (Elementor)

블록 에디터를 사용하는 경우에는 사용자 정의 HTML 블록을 사용할 수 있습니다.

다른 방법으로 숏코드로 만들어서 추가하는 것도 가능합니다. 숏코드로 추가하고 싶은 경우 테마(차일드 테마를 만들어 작업)의 함수 파일에 다음 코드를 추가합니다.

function calculator_shortcode() {
    ob_start();
    ?>
// HTML 코드
    <?php
    return ob_get_clean();
}

add_shortcode('calculator', 'calculator_shortcode');

위의 코드를 테마의 함수 파일에 추가했다면, 다음 숏코드를 계산기가 표시될 곳에 입력하면 됩니다.

[calculator]

자바스크립트 코드는 이 글을 참고하여 로드할 수 있습니다.

쉬운 방법으로는 WPCode와 같은 플러그인을 사용하거나 GeneratePress 테마의 경우 훅(Hook)을 사용할 수 있습니다. WPCode와 같은 Headers & Footers 플러그인을 사용하는 경우 푸터 영역에 자바스크립트 코드를 로드하면 됩니다.

CSS 코드는 외모 » 사용자 정의하기 » 추가 CSS에 추가하거나 차일드 테마의 스타일시트 파일에 추가하도록 합니다.

참고

https://cloudways.tistory.com/35

올해 남은 날짜/시간 표시하기 (자바스크립트 & PHP)

https://cloudways.tistory.com/25

클라우드웨이즈(Cloudways): 워드프레스 사이트 복제하기

https://avada.tistory.com/3046

해외웹호스팅: 클라우드웨이즈 vs. 블루호스트 비교 (Cloudways vs. Bluehost)