calculator by i.

calculator-by-i.markdown

calculator by i.

A Pen by terry kaseke on CodePen.

License.

index.html

<div class="container">
  <fieldset id="container">
		<form name="calculator">

			<input id="display" type="text" name="display" readonly>

			<input class="button digits" type="button" value="7" onclick="calculator.display.value += '7'">
			<input class="button digits" type="button" value="8" onclick="calculator.display.value += '8'">
			<input class="button digits" type="button" value="9" onclick="calculator.display.value += '9'">
			<input class="button mathButtons" type="button" value="+" onclick="calculator.display.value += ' + '">
			<br>
			<input class="button digits" type="button" value="4" onclick="calculator.display.value += '4'">
			<input class="button digits" type="button" value="5" onclick="calculator.display.value += '5'">
			<input class="button digits" type="button" value="6" onclick="calculator.display.value += '6'">
			<input class="button mathButtons" type="button" value="-" onclick="calculator.display.value += ' - '">
			<br>
			<input class="button digits" type="button" value="1" onclick="calculator.display.value += '1'">
			<input class="button digits" type="button" value="2" onclick="calculator.display.value += '2'">
			<input class="button digits" type="button" value="3" onclick="calculator.display.value += '3'">
			<input class="button mathButtons" type="button" value="x" onclick="calculator.display.value += ' * '">
			<br>
			<input id="clearButton" class="button" type="button" value="C" onclick="calculator.display.value = ''">
			<input class="button digits" type="button" value="0" onclick="calculator.display.value += '0'">
			<input class="button mathButtons" type="button" value="=" onclick="calculator.display.value = eval(calculator.display.value)">
			<input class="button mathButtons" type="button" value="/" onclick="calculator.display.value += ' / '">
		</form>
	</fieldset>
</div>
  
        

style.css

* {
    box-sizing: border-box;
    font-family: 'Roboto', sans-serif;
}
body {
    background: black;
}

.container {
    width: 300px;
    margin: auto;
}

.calculator {
    width: 275px;
    margin: auto;
    min-height: 400px;
    border: solid 1px #3a4655;
    box-shadow: 0 8px 50px -1px black;
}

#display {
    background: white;
    width: 100%;
    height: 75px;
    padding: 55px;
    font-size: 50px;
}

.calc-operation {
    text-align: right;
    color: #727b86;
    font-size: 21px;
    padding-bottom: 10px;
    border-bottom: dotted 1px;
}

.button {
    width: 25%;
    background: #425062;
    color: #fff;
    padding: 20px;
    display: inline-block;
    font-size: 25px;
    text-align: center;
    vertical-align: middle;
    margin-right: -4px;
    border-right: solid 2px #3c4857;
    border-bottom: solid 2px #3c4857;
    transition: all 0.2s ease-in-out;
}

.mathButtons {
    color: #aeb3ba;
    background: #404d5e;
}
#clearButton {
    color: #d95d4e;
    background: #404d5e;
}

.button:hover {
    background: pink;
}