HiveBrain v1.2.0
Get Started
← Back to all entries
patternjavascriptMinor

A simple HTML / JavaScript calculator

Submitted by: @import:stackexchange-codereview··
0
Viewed 0 times
javascriptsimplecalculatorhtml

Problem

I am making an app and I want somebody to check my code to maybe make it shorter, fix bugs, or add some things.

```


Simple Calculator


input[type="button"]{
background:-webkit-gradient( linear, left top, left bottom, color-stop(0.05, #606060), color-stop(1, #606060) );
background:-moz-linear-gradient( center top, #606060 5%, #606060 100% );
filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#606060', endColorstr='#606060');
background-color:#606060;
border:1px solid #606060;
display:inline-block;
color:#fff;
font-family:Arial;
font-size:50px;
line-height:28px;
text-decoration:none;
text-align:center;
margin-bottom:1.5px;
margin-left: 1.5px;
margin-right:1.5px ;
margin-top:1.5px ;
height: 75px;
}
input[type="button"]{
width: 184px;
}
#btnC{
width:372.7px;
}
#btn0{
width:374.7px;
}
#btn0,#btndecimal,#btndivide {
margin-right: 0.1px;
}
#btn7,#btn4,#btn1,#btn0,#btnequals {
margin-left: 0.01px;
}
#btnequals {
height: 61px;
width: 944px;
margin-top: 3px;
}
input[type="button"]:active {
position:relative;
background:#989898;
}
input:focus {
outline:0;
}
input[type="Text"] {
padding-left: 10px;
margin-bottom: 1.5px;
font-size: 100px;
background-color: #202020 ;n
height:195px;
width: 935px;
border:none;
color:white;
}
body {
background-color: #080808 ;
overflow: hidden;
}
#about {
font-size: 45px;
}






















var FKeyPad = document.Keypad;
var Accumulate = 0;
var FlagNewNum = false;
var PendingOp = "";
function NumPressed (Num) {
if (FlagNewNum) {
FKeyPad.ReadOut.value = Num;
FlagNewNum = false;
}
else {
if (FKeyPad.ReadOut.value == "0")
FKeyPa

Solution

You have some layout bugs:

-
The labels for the "4" and "5" keys are misaligned due to careless use of whitespace. I recommend omitting the spaces altogether, e.g.:

<input id="btn7" type="Button" value="7" …


-
You used a `` for the first three rows of buttons, but not for the last two. As a result, the last two rows may be misaligned by a few pixels on some browsers. Also, the reflow behaviour when the window is too narrow is inconsistent.

Code Snippets

<input id="btn7" type="Button" value="7" …

Context

StackExchange Code Review Q#52478, answer score: 6

Revisions (0)

No revisions yet.