Skip to content

Instantly share code, notes, and snippets.

@OrangoMango

OrangoMango/calculator.html

Created April 15, 2020 16:04
Show Gist options
  • Save OrangoMango/63d50325eeaa32f74dbdca929db679ca to your computer and use it in GitHub Desktop.
Save OrangoMango/63d50325eeaa32f74dbdca929db679ca to your computer and use it in GitHub Desktop.
Download ZIP
HTML calculator
Raw
calculator.html
<html>
<head>
<script type="text/javascript" src="script.js">
</script>
<link rel="stylesheet" href="styles.css">
</head>
<body>
<div class=main>
<h1>HTML Calculator</h1>
<form name="form">
<input name="textinput" class="textinput" />
</form>
<table>
<tr>
<td><button onclick="clean()">C</button></td>
<td><button onclick="back()">DEL</button></td>
<td><button onclick="insert('*')">*</button></td>
<td><button onclick="insert('/')">/</button></td>
</tr>
<tr>
<td><button onclick="insert(1)">1</button></td>
<td><button onclick="insert(2)">2</button></td>
<td><button onclick="insert(3)">3</button></td>
<td><button onclick="insert('+')">+</button></td>
</tr>
<tr>
<td><button onclick="insert(4)">4</button></td>
<td><button onclick="insert(5)">5</button></td>
<td><button onclick="insert(6)">6</button></td>
<td><button onclick="insert('-')">-</button></td>
</tr>
<tr>
<td><button onclick="insert(7)">7</button></td>
<td><button onclick="insert(8)">8</button></td>
<td><button onclick="insert(9)">9</button></td>
<td rowspan=2><button style="height: 165" onclick="calculate()">=</button></td>
</tr>
<tr>
<td colspan=2><button style="width:164" onclick="insert(0)">0</button></td>
<td><button onclick="insert('.')">.</button></td>
</tr>
</table>
</div>
</body>
</html>
Raw
script.js
function insert(num){
document.form.textinput.value = document.form.textinput.value + num;
}
function clean() {
// clean input area
document.form.textinput.value = "";
}
function back() {
var text = document.form.textinput.value
// remove last character from string
document.form.textinput.value = text.substring(0,text.length-1)
}
function calculate(){
// eval calculation
var text = document.form.textinput.value
document.form.textinput.value = eval(text)
}
Raw
styles.css
button {
width: 80;
height: 80;
border: solid;
font-size: 25;
}
.textinput {
width: 335;
height: 50;
font-size: 25;
color: #acb5af;
border: solid;
}
.main {
position: absolute;
border: solid 4px;
background: linear-gradient(green, red);
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment