mikepenzin/calculator.html

## calculator.html
<html>
<title>CalculatorJS</title>
<style>
    body {
        color: #412a0f;
    }

    .calculator {
        width: 20%;
        margin: 0 auto;
    }

    button {
        float: left;
        height: 8%;
        width: 20%;
        margin: 2.5%;
        border: solid 1px #412a0f;
        border-radius: 5px;
        background-color: #FBFBFB;
        font-size: 1em;
        font-weight: bold;
        overflow: hidden;
    }

    .full-length {
        margin: 0 auto;
    }

    .full-length>button {
        width: 95%;
    }

    #keep-left {
        float: right;
    }

    #display {
        max-width: 100%;
        line-height: 50px;
        text-align: right;
        margin: 0 auto;
        padding: 5%;
        vertical-align: middle;
        font-size: 1.8em;
        font-weight: bolder;
        overflow: hidden;
        background-color: #FBFBFB;
        border-radius: 15px;
    }

    .mark {
        background-color: #edb6a6;
    }

    #equation {
        background-color: #e0dbdb;
    }

    #reset {
        background-color: #792e18;
        color: #FBFBFB;
    }
</style>

<div class="calculator">
    <div id="display">
        0
    </div>
    <div class="full-length">
        <button id="reset">C</button>
    </div>
    <div class="full-length">
        <div>
            <button>1</button>
            <button>2</button>
            <button>3</button>
            <button class="mark">+</button>
        </div>
        <div>
            <button>4</button>
            <button>5</button>
            <button>6</button>
            <button class="mark">-</button>
        </div>
        <div>
            <button>7</button>
            <button>8</button>
            <button>9</button>
            <button class="mark">x</button>
        </div>
        <div>
            <button>0</button>
            <button id="keep-left" class="mark">/</button>
        </div>
    </div>
    <div class="full-length">
        <button id="equation">=</button>
    </div>
</div>
<script>
    (function() {
        var buttons = document.getElementsByTagName("button");
        var display = document.getElementById("display");
        var equation = "";
        var result = 0;
        for (var i = 0; i < buttons.length; i++) {
            buttons[i].addEventListener("click", function() {
                if (this.innerText == "C") {
                    equation = "";
                    result = 0;
                    display.innerText = result;
                } else if (this.innerText == "=") {
                    if (equation == "") {
                        return display.innerText = 0;
                    }
                    display.innerText = calculation(equation);
                } else {
                    equation += this.innerText;
                    display.innerText = equation;
                }

            });
        }

        function calculation(data) {
            if (data.includes("+")) {
                data = data.split("+");
                result = Number(data[0]) + Number(data[1]);
                equation = result;
                return result;
            } else if (data.includes("-")) {
                data = data.split("-");
                result = Number(data[0]) - Number(data[1]);
                equation = result;
                return result;
            } else if (data.includes("x")) {
                data = data.split("x");
                result = Number(data[0]) * Number(data[1]);
                equation = result;
                return result;
            } else if (data.includes("/")) {
                data = data.split("/");
                result = Number(data[0]) / Number(data[1]);
                equation = result;
                return result;
            } else {
                return data;
            }
        }

    })();
</script>

</html>
	<html>
	<title>CalculatorJS</title>
	<style>
	body {
	color: #412a0f;
	}

	.calculator {
	width: 20%;
	margin: 0 auto;
	}

	button {
	float: left;
	height: 8%;
	width: 20%;
	margin: 2.5%;
	border: solid 1px #412a0f;
	border-radius: 5px;
	background-color: #FBFBFB;
	font-size: 1em;
	font-weight: bold;
	overflow: hidden;
	}

	.full-length {
	margin: 0 auto;
	}

	.full-length>button {
	width: 95%;
	}

	#keep-left {
	float: right;
	}

	#display {
	max-width: 100%;
	line-height: 50px;
	text-align: right;
	margin: 0 auto;
	padding: 5%;
	vertical-align: middle;
	font-size: 1.8em;
	font-weight: bolder;
	overflow: hidden;
	background-color: #FBFBFB;
	border-radius: 15px;
	}

	.mark {
	background-color: #edb6a6;
	}

	#equation {
	background-color: #e0dbdb;
	}

	#reset {
	background-color: #792e18;
	color: #FBFBFB;
	}
	</style>

	<div class="calculator">
	<div id="display">
	0
	</div>
	<div class="full-length">
	<button id="reset">C</button>
	</div>
	<div class="full-length">
	<div>
	<button>1</button>
	<button>2</button>
	<button>3</button>
	<button class="mark">+</button>
	</div>
	<div>
	<button>4</button>
	<button>5</button>
	<button>6</button>
	<button class="mark">-</button>
	</div>
	<div>
	<button>7</button>
	<button>8</button>
	<button>9</button>
	<button class="mark">x</button>
	</div>
	<div>
	<button>0</button>
	<button id="keep-left" class="mark">/</button>
	</div>
	</div>
	<div class="full-length">
	<button id="equation">=</button>
	</div>
	</div>
	<script>
	(function() {
	var buttons = document.getElementsByTagName("button");
	var display = document.getElementById("display");
	var equation = "";
	var result = 0;
	for (var i = 0; i < buttons.length; i++) {
	buttons[i].addEventListener("click", function() {
	if (this.innerText == "C") {
	equation = "";
	result = 0;
	display.innerText = result;
	} else if (this.innerText == "=") {
	if (equation == "") {
	return display.innerText = 0;
	}
	display.innerText = calculation(equation);
	} else {
	equation += this.innerText;
	display.innerText = equation;
	}

	});
	}

	function calculation(data) {
	if (data.includes("+")) {
	data = data.split("+");
	result = Number(data[0]) + Number(data[1]);
	equation = result;
	return result;
	} else if (data.includes("-")) {
	data = data.split("-");
	result = Number(data[0]) - Number(data[1]);
	equation = result;
	return result;
	} else if (data.includes("x")) {
	data = data.split("x");
	result = Number(data[0]) * Number(data[1]);
	equation = result;
	return result;
	} else if (data.includes("/")) {
	data = data.split("/");
	result = Number(data[0]) / Number(data[1]);
	equation = result;
	return result;
	} else {
	return data;
	}
	}

	})();
	</script>

	</html>