javascript로 계산기를 만들어보자

조금 헛점이 많은 계산기이긴 하지만 구글링을 하면서 구현해 보았습니다!

html

<div class="container">
    <div class="view"></div>
    <div class="button-wrap">
        <section>
            <div class="row header">
                <span class="reset" onclick="clearResult()">AC</span>
                <span class="result" onclick="calculateResult()">계산</span>
            </div>
            <div class="row">
                <span class="number" onclick="addNumber('7')">7</span>
                <span class="number" onclick="addNumber('8')">8</span>
                <span class="number" onclick="addNumber('9')">9</span>
                <span class="operator" onclick="addOperator('+')">+</span>
            </div>
            <div class="row">
                <span class="number" onclick="addNumber('4')">4</span>
                <span class="number" onclick="addNumber('5')">5</span>
                <span class="number" onclick="addNumber('6')">6</span>
                <span class="operator" onclick="addOperator('-')">-</span>
            </div>
            <div class="row">
                <span class="number" onclick="addNumber('1')">1</span>
                <span class="number" onclick="addNumber('2')">2</span>
                <span class="number" onclick="addNumber('3')">3</span>
                <span class="operator" onclick="addOperator('*')">*</span>
            </div>
            <div class="row footer">
                <span class="number" onclick="addNumber('0')">0</span>
                <div class="test">
                    <span class="dot" onclick="addOperator('.')">.</span>
                    <span class="operator" onclick="addOperator('/')">/</span>
                </div>
            </div>
        </section>
    </div>
</div>

css

* {
	padding: 0;
    margin: 0;
    box-sizing: border-box;
  }

ul,
ol,
li {
	list-style: none;
}

html,
body {
	height: 100%;
}

body {
	display: flex;
	justify-content: center;
	align-items: center;
}

a {
	text-decoration: none;
}

.container {
	width: 90%;
    max-width: 400px;
    padding: 10px 20px;
    background: navy;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    gap: 10px;
 }

.view {
	width: 100%;
    height: 150px;
    display: flex;
    justify-content: center;
    align-items: center;
    background: pink;
}

.button-wrap {
	width: 100%;
    padding: 10px;
    background: #fff;
}

section {
	width: 100%;
    display: flex;
    flex-direction: column;
}

.row {
	width: 100%;
    display: flex;
    /* gap:10px; */
}

.row span {
	display: flex;
    justify-content: center;
    align-items: center;
    padding: 20px;
    flex: 1;
    background: #ccc;
    margin: 5px;
}

.header span {
	flex: 0.5;
    background: pink;
    margin: 5px;
}

.footer {
	width: 100%;
}

.footer span:nth-child(1) {
	width: 50%;
}

.test {
	width: 50%;
    display: flex;
}

.container span {
	border-radius: 5px;
    cursor: pointer;
}

javascript

let result = document.querySelector('.view');

function addNumber(number) {
  	result.textContent += number;
}

function addOperator(operator) {
  	result.textContent += " " + operator + " ";
}

function clearResult() {
  	result.textContent = "";
}

function calculateResult() {
  	const input = result.textContent.split(" ");
  	let total = parseFloat(input[0]);
  	for (let i = 1; i < input.length; i += 2) {
      
      	const operator = input[i];
      	const operand = parseFloat(input[i + 1]);
      
      	if (operator === "+") {
          	total += operand;
        } else if (operator === "*") {
          	total *= operand;
        } else if (operator === "/") {
          	total /= operand;
        }
      
    }	
  	result.textContent = total;
}

구글링을 해 본 결과 아주 많은 방식으로 구현 할 수가 있었지만, 제가 내키는 코드를 선정해서 구현 해 보았습니다!