JS CSS Implementation Simple Calculator

<! DOCTYPE HTML PUBLIC "-//W3C//DTD XHTML 1.0 transitional//en" "Http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd ">

Get all the keys from documentvar keys = Document.queryselectorall (' #calculator span '), var operators = [' + ', '-', ' X ', ' ÷ '];var decimaladded = false;//Add onclick event to all the keys and perform operationsfor (var i = 0; i < keys.length ; i++) {Keys[i].onclick = function (e) {//Get the input and button valuesvar input = Document.queryselector ('. Screen '); var i Nputval = Input.innerhtml;var Btnval = this.innerhtml;//Now, just append the key values (Btnvalue) to the input string an D finally use JavaScript's eval function to get the result//If clear key is pressed, erase everythingif (btnval = = ' C ') {i nput.innerhtml = ";d ecimaladded = false;} If eval key is pressed, calculate and display the Resultelse if (btnval = = ' = ') {var equation = Inputval;var Lastchar = equation[equation.length-1];//Replace All instances of x And÷with * and/respectively. This can is done easily using regex and the ' G ' tag which would replace all instances of the matched character/substringequ ation = EQuation.replace (/x/g, ' * '). Replace (/÷/g, '/');//Final thing left to do are checking the last character of the equation. If It's an operator or a decimal, remove itif (Operators.indexof (Lastchar) >-1 | | lastchar = = '. ') Equation = Equation.replace (/.$/, "), if (equation) input.innerhtml = eval (equation);d ecimaladded = false;} Basic functionality of the calculator are complete. But there is some problems like//1. No operators should be added consecutively.//2. The equation shouldn ' t start from an operator except minus//3.  Not more than 1 decimal should is there in a number//We'll fix these issues using some simple checks//indexOf works only In Ie9+else if (Operators.indexof (Btnval) >-1) {//Operator are clicked//Get the last character from the Equationvar l Astchar = inputval[inputval.length-1];//Only add operator if input are not empty and there are no operator at the Lastif ( Inputval! = "&& operators.indexof (lastchar) = =-1) input.innerhtml + = btnval;//allow miNUS if the string is Emptyelse if (inputval = = ' && Btnval = = '-') input.innerhtml + = btnval;//Replace the last O Perator (if exists) with the newly pressed Operatorif (Operators.indexof (Lastchar) >-1 && inputval.length > 1) {//here, '. ' matches any character and $ denotes the end of string, so anything t the end of string would get replaced by new operatorinput.innerhtml = Inputval.replace (/.$/, btnval);} Decimaladded =false;} Now only the decimal problem are left. We can solve it easily using a flag ' decimaladded ' which we ' ll set once the decimal is added and prevent more decimals to be added once it ' s set. It would be the reset when a operator, eval or clear key is pressed.else if (btnval = = '. ') {if (!decimaladded) {input.innerhtml + = Btnval;decimaladded = True;}} If any other key is pressed, just append itelse {input.innerhtml + = Btnval;} Prevent page Jumpse.preventdefault ();} }

/* Basic reset */* {margin:0;padding:0;box-sizing:border-box;/* Better text styling */font:bold 14px Arial, Sans-serif ;} /* Finally Adding some IE9 fallbacks for gradients to finish things up *//* A nice BG gradient */html {height:100%;backgr Ound:white;background:radial-gradient (Circle, #fff 20%, #ccc); background-size:cover;} /* Using box shadows to create 3D effects */#calculator {width:325px;height:auto;margin:100px auto;padding:20px 20px 9 Px;background: #9dd2ea; Background:linear-gradient (#9dd2ea, #8bceec) border-radius:3px;box-shadow:0px 4px #009de4, 0px 10px 15px rgba (0, 0, 0, 0.2);} /* Top portion */.top span.clear {float:left;} /* Inset shadow on the screens to create Chinaz */.top. screen {height:40px;width:212px;float:right;padding:0 10px;back Ground:rgba (0, 0, 0, 0.2); Border-radius:3px;box-shadow:inset 0px 4px rgba (0, 0, 0, 0.2);/* Typography */font-size:17px ; line-height:40px;color:white;text-shadow:1px 1px 2px rgba (0, 0, 0, 0.2); text-align:right;letter-spacing:1px;} /* Clear floats */.keys,. Top {Overflow:hidden;} /* Applying same to the keys */.keys span,. Top Span.clear {float:left;position:relative;top:0;cursor:pointer;width:6 6px;height:36px;background:white;border-radius:3px;box-shadow:0px 4px rgba (0, 0, 0, 0.2); margin:0 7px 11px 0;color: # 888;line-height:36px;text-align:center;/* prevent selection of text inside keys */user-select:none;/* smoothing out HOV Er and active states using CSS3 transitions */transition:all 0.2s ease;} /* Remove right margins from operator keys *//* style different type of keys (operators/evaluate/clear) differently */.key s Span.operator {background: #FFF0F5; margin-right:0;}. Keys Span.eval {background: #f1ff92; box-shadow:0px 4px #9da853; color: #888e5f;}. Top Span.clear {background: #ff9fa8; box-shadow:0px 4px #ff7c87; color:white;} /* Some hover effects */.keys span:hover {background: #9c89f6; box-shadow:0px 4px #6b54d3; color:white;}. Keys Span.eval:hover {background: #abb850; box-shadow:0px4px #717a33; color: #ffffff;}. Top Span.clear:hover {background: #f68991; box-shadow:0px 4px #d3545d; color:white;} /* simulating "pressed" effect on active state of the keys by removing the Box-shadow and moving the keys down a bit */.ke Ys span:active {box-shadow:0px 0px #6b54d3; top:4px;}. Keys span.eval:active {box-shadow:0px 0px #717a33; top:4px;}. Top span.clear:active {top:4px;box-shadow:0px 0px #d3545d;}