Skip to content

Instantly share code, notes, and snippets.

@Terron23

Terron23/calculator-pt-11.markdown

Created October 16, 2017 17:35
Show Gist options
  • Star 0 You must be signed in to star a gist
  • Fork 0 You must be signed in to fork a gist
  • Save Terron23/5e39f79fadff02ac6d2576e7db65196b to your computer and use it in GitHub Desktop.
Save Terron23/5e39f79fadff02ac6d2576e7db65196b to your computer and use it in GitHub Desktop.
Download ZIP
Calculator Pt 11
Raw
index.html
<body>
<center>
<h1>The Calculator</h1>
<div id="calc" class="container text-center">
<center>
<form name="calculator">
<input type="text" name="answer" placeholder="0">
<br>
<input type="button" value=" 1 " onclick="calculator.answer.value += '1'">
<input type="button" value=" 2 " onclick="calculator.answer.value += '2'">
<input type="button" value=" 3 " onclick="calculator.answer.value += '3'">
<input type="button" value=" + " onclick="calculator.answer.value += '+'">
<br>
<input type="button" value=" 4 " onclick="calculator.answer.value += '4'">
<input type="button" value=" 5 " onclick="calculator.answer.value += '5'">
<input type="button" value=" 6 " onclick="calculator.answer.value += '6'">
<input type="button" value=" - " onclick="calculator.answer.value += '-'">
<br>
<input type="button" value=" 7 " onclick="calculator.answer.value += '7'">
<input type="button" value=" 8 " onclick="calculator.answer.value += '8'">
<input type="button" value=" 9 " onclick="calculator.answer.value += '9'">
<input type="button" value=" * " onclick="calculator.answer.value += '*'">
<br>
<input type="button" value=" c " onclick="calculator.answer.value = ''">
<input type="button" value=" 0 " onclick="calculator.answer.value += '0'">
<input type="button" value=" = " onclick="calculator.answer.value = eval(calculator.answer.value)">
<input type="button" value=" / " onclick="calculator.answer.value += '/'">
</center>
</form>
</center>
</div>
</body>
Raw
style.css
body {
background-color: gray;
margin-top: 30px;
padding: 20px;
}
.container {
width: 400px;
border: 2px solid black;
border-radius: 8px;
padding: 20px;
background: gold;
}
input[type=button] {
background: purple;
width: 20%;
font-size: 20px;
font-weight: bold;
border-radius: 4px;
margin: 2px;
padding: 15px;
}
input[type=text] {
display: block;
margin: 0 auto;
width: 90%;
font-size: 20px;
font-weight: bold;
border-radius: 4px;
padding: 20px;
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment