Via Cà Matta 2 - Peschiera Borromeo (MI)
+39 02 00704272
info@synaptica.info

JAVASCRIPT CALCULATOR

Digital solution partner

JAVASCRIPT CALCULATOR

[iframe  style=”margin-left: 120px;” width=”100%” height=”350px” src=”http://82.85.184.181/fileshare/sitosimo/calc_edit.html”]

To create this calculator we define the spaces where we will place our elements (numbers and operations) and include them in the div tag. We use an input text for the task viewStyle (CSS) of the calculator was defined in line to the file, it can be integrated with an external file with tags import < link rel = stylesheet” type = “text/css” href =nome_del_file.css > positioned between the head tags. This HTML code will be enclosed in the tags <html> <body> Insert the html </body> </html>.

HTML

JAVASCRIPT

To operate the calculator we use function calls to onclick button. We can replace our functions with jQuery Math.js library. Use personal functions allows more customization.
First, create global variables that we will use in various functions.
With the first function we display the selected number  in the text input by replacing the parameter “value” with selected content.
With the second function we set button “C by assigning the empty string value, the variables are reinitialized to reset the previous operations.
With the third function set button “C1 to delete the last number written. Use the substring method to return a specific value chosen length.
With the fourth function set operations (+,, x, ÷,!, ). Assign to the variable “tipoOp” the value of “parOp” to describe the operation we want to perform by assigning to the next function the value of operation.
-With the last function set button “=” with onclick that will perform the operation based on the value of the parameter “tipoOp”.

CSS

Give a style to our calculator with CSS. Write then in divs the corresponding classFor external content we use an “id” because the element is unique. The style is totally customizable, just replace the values to the properties of the class.The size is fixed because the object is small, it would be better to create responsive content (replacing the pixels with percents). Preserve the aspect ratio of the content calculator with cells of the buttons to not let out their contents.