Calculator
Base Code
<!DOCTYPE html>
<html lang="en">
<head>
<title> Calculator </title>
</head>
<style>
html, body {
background-color: #aebdc2;
color: whitesmoke;
}
table {
margin: auto;
background-color: #101010;
width: 300px;
height: 300px;
text-align: center;
}
input {
outline: 0;
position: relative;
left: 5px;
top: 5px;
border: 0;
color: #101010;
background-color: #fff;
width: 60px;
height: 50px;
float: left;
margin: 5px;
border-radius: 4px;
font-size: 20px;
margin-bottom: 15px;
}
input:hover {
border: 0 #101010;
color: #1c1c1c;
background-color: #fff;
border-radius: 4px;
float: left;
margin: 5px;
font-size: 20px;
}
#display {
width: 280px;
max-width: 300px;
font-size: 26px;
text-align: right;
background-color: #859274;
box-shadow: #101010;
}
/*operator = addition subraction multiplication division*/
.operator {
background-color: #ceead8;
position: relative;
}
.operator:hover {
background-color: #ceead8;
box-shadow: 0 4px #b0d2cf;
}
#clear {
float: left;
position: relative;
display: block;
background-color: #d55a60;
}
#clear:hover {
float: left;
display: block;
background-color: #c05c65;
margin-bottom: 15px;
box-shadow: 0 4px #c05c65;
}
</style>
<body>
<form name="calculator">
<table>
<tr>
<td><table>
<tr>
<td colspan="4">
<input type="text" name="display" id="display" disabled>
</td>
</tr>
<tr>
<td><input type="button" name="one" value="1"
onclick="calculator.display.value += '1'"></td>
<td><input type="button" name="two" value="2"
onclick="calculator.display.value += '2'"></td>
<td><input type="button" name="three" value="3"
onclick="calculator.display.value += '3'"></td>
<td><input type="button" class="operator" name="plus" value="+"
onclick="calculator.display.value += '+'"></td>
</tr>
<tr>
<td><input type="button" name="four" value="4"
onclick="calculator.display.value += '4'"></td>
<td><input type="button" name="five" value="5"
onclick="calculator.display.value += '5'"></td>
<td><input type="button" name="six" value="6"
onclick="calculator.display.value += '6'"></td>
<td><input type="button" class="operator" name="minus" value="-"
onclick="calculator.display.value += '-'"></td>
</tr>
<tr>
<td><input type="button" name="seven" value="7"
onclick="calculator.display.value += '7'"></td>
<td><input type="button" name="eight" value="8"
onclick="calculator.display.value += '8'"></td>
<td><input type="button" name="nine" value="9"
onclick="calculator.display.value += '9'"></td>
<td><input type="button" class="operator" name="times" value="x"
onclick="calculator.display.value += '*'"></td>
</tr>
<tr>
<td><input type="button" id="clear" name="clear" value="c"
onclick="calculator.display.value = ''"></td>
<td><input type="button" name="zero" value="0"
onclick="calculator.display.value += '0'"></td>
<td><input type="button" name="doit" value="=" onclick="addToHistory()"
onclick="calculator.display.value = eval(calculator.display.value)"></td>
<td><input type="button" class="operator" name="div" value="/"
onclick="calculator.display.value += '/'"></td>
</tr>
</table></td>
<td><table>
<tr>
<th>HISTORY</th>
<td>Oldest calculation</td>
</tr>
<tr>
<td id="history1"></td>
<td>^</td>
</tr>
<tr>
<td id="history2"></td>
<td>^</td>
</tr>
<tr>
<td id="history3"></td>
<td>^</td>
</tr>
<tr>
<td id="history4"></td>
<td>^</td></tr>
<tr>
<td id="history5"></td>
<td>^</td>
</tr>
<tr>
<td id="history6"></td>
<td>Recent Calculation</td>
</tr>
</table></td>
</tr>
</table>
</form>
<script>
const history = []
function addToHistory(){
n = history.length
history[n] = eval(calculator.display.value)
console.log(history)
console.log(history[n])
document.getElementById('history1').innerHTML = history[n-5]
document.getElementById('history2').innerHTML = history[n-4]
document.getElementById('history3').innerHTML = history[n-3]
document.getElementById('history4').innerHTML = history[n-2]
document.getElementById('history5').innerHTML = history[n-1]
document.getElementById('history6').innerHTML = history[n]
}
</script>
</body>
</html>
<!-- tutorial credit: https://codeburst.io/making-a-calculator-with-basic-html-css-and-javascript-part-1-1e4288f0bea1 -->