JAVASCRIPT CALCULATOR

by Simona Marotto
in Posts
on January 4, 2017

[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 view. Style (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

<div id="calcolatrice">   
    <input type="text" style="text-align:right;height:40px;width:306px;border:solid black 1px;font-size:30px"  id="coefficiente" ><br><br>
    <div class="cella"  onclick="scrivi('1')">1</div>
    <div class="cella"  onclick="scrivi('2')">2</div>  
    <div class="cella"  onclick="scrivi('3')">3</div>  
    <div class="cella2" onclick="operazione(0)" >+</div> <div class="cella3" onclick="operazione(1)">-</div>
    <div style="clear:both;"></div>
    <div class="cella" onclick="scrivi('4')" >4</div>
    <div class="cella" onclick="scrivi('5')" >5</div>  
    <div class="cella" onclick="scrivi('6')" >6</div> 
    <div class="cella2" onclick="operazione(2)">x</div> <div class="cella3" onclick="operazione(3)">÷</div> 
    <div style="clear:both;"></div>
    <div class="cella" onclick="scrivi('7')">7</div> 
    <div class="cella" onclick="scrivi('8')">8</div>  
    <div class="cella" onclick="scrivi('9')">9</div> 
    <div class="cella2" onclick="operazione(4)">!</div> <div class="cella3" onclick="operazione(5)">√</div> 
    <div style="clear:both;"></div>
    <div class="cella" onclick="scrivi('0')">0</div>
    <div class="cella" onclick="cancellaUltimo()">C-1</div>  
    <div class="cella" onclick="sbianca(0)">C</div>  <div class="cella4" onclick="uguale()">=</div>    
</div>

</div>

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 “C–1“ 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”.

var op1=0;
var tipoOp=99; 

function scrivi(valore){
    document.getElementById('coefficiente').value = document.getElementById('coefficiente').value + valore;  
}    
 
function sbianca(parS){
    if(parS==0){
    document.getElementById('coefficiente').value='';
    op1=0;      
    tipoOp=99; 
    }
    else {
    document.getElementById('coefficiente').value='';
    }  
} 
 
function cancellaUltimo(){
    var str = document.getElementById('coefficiente').value;
    var res = str.substring(0,str.length -1 );       
    document.getElementById('coefficiente').value=res;   
}

function operazione(parOp) {
    tipoOp = parOp;
    if(parOp==5){
      op1= +document.getElementById('coefficiente').value;               
    }                                                       
    else{
    op1= +document.getElementById('coefficiente').value; 
    sbianca(1);    
    }
} 
 
function uguale(){
    if (tipoOp ==0){
      document.getElementById('coefficiente').value=op1+ +document.getElementById('coefficiente').value;
    }
    else if (tipoOp ==1){
      document.getElementById('coefficiente').value=op1- +document.getElementById('coefficiente').value;
    }
    else if (tipoOp ==2){
      document.getElementById('coefficiente').value=op1* +document.getElementById('coefficiente').value;
    }    
    else if (tipoOp ==3){
      document.getElementById('coefficiente').value=op1/ +document.getElementById('coefficiente').value;
    } 
    else if (tipoOp ==5){
      document.getElementById('coefficiente').value=Math.sqrt(+document.getElementById('coefficiente').value) ;
    }    
    else if (tipoOp==4) {
        var xx=1;
        for(i=1;i<=op1;i++){
            xx=xx*i;   
        }
        document.getElementById('coefficiente').value=xx;   
    }
    else {
        document.getElementById('coefficiente').value= ' ';
    }
}

var op1=0;

var tipoOp=99;

function scrivi(valore){

document.getElementById('coefficiente').value = document.getElementById('coefficiente').value + valore;

}

function sbianca(parS){

if(parS==0){

document.getElementById('coefficiente').value='';

op1=0;

tipoOp=99;

}

else {

document.getElementById('coefficiente').value='';

}

function cancellaUltimo(){

var str = document.getElementById('coefficiente').value;

var res = str.substring(0,str.length -1 );

document.getElementById('coefficiente').value=res;

}

function operazione(parOp) {

tipoOp = parOp;

if(parOp==5){

op1= +document.getElementById('coefficiente').value;

}

else{

op1= +document.getElementById('coefficiente').value;

sbianca(1);

}

function uguale(){

if (tipoOp ==0){

document.getElementById('coefficiente').value=op1+ +document.getElementById('coefficiente').value;

}

else if (tipoOp ==1){

document.getElementById('coefficiente').value=op1- +document.getElementById('coefficiente').value;

}

else if (tipoOp ==2){

document.getElementById('coefficiente').value=op1* +document.getElementById('coefficiente').value;

}

else if (tipoOp ==3){

document.getElementById('coefficiente').value=op1/ +document.getElementById('coefficiente').value;

}

else if (tipoOp ==5){

document.getElementById('coefficiente').value=Math.sqrt(+document.getElementById('coefficiente').value) ;

}

else if (tipoOp==4) {

var xx=1;

for(i=1;i<=op1;i++){

xx=xx*i;

}

document.getElementById('coefficiente').value=xx;

}

else {

document.getElementById('coefficiente').value= ' ';

}

CSS

Give a style to our calculator with CSS. Write then in divs the corresponding class. For 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.

#calcolatrice{ 
    border: 3px solid black;
    padding: 10px 10px 10px 10px;
    width: 310px;
    height: 270px;
    background-image: url(http://82.85.184.181/fileshare/sitosimo/megadeth.jpg);
    background-size: contain;
    background-position: center;  
    }    
    
.cella{
    background-color: ghostwhite;
    opacity: 0.8;
    padding-top: 10px; 
    text-align: center;
    font-size: 30px;
    border:  1px solid black; 
    float:left; 
    width: 50px;
    height: 40px;
    }
    
.cella2{
    background-color: ghostwhite;
    opacity: 0.8;
    padding-top: 10px; 
    text-align: center;
    font-size: 30px;
    margin-left: 50px;
    border:  1px solid black; 
    float:left; 
    width: 50px;
    height: 40px;   
    }
    
.cella3{
  background-color: ghostwhite;
  opacity: 0.8;
  padding-top: 10px;    
  text-align: center;
  font-size: 30px;  
  margin-left: 256px;
  border:  1px solid black; 
  width: 50px;
  height: 40px;   
  }   
 
.cella4{
  background-color: ghostwhite;
  opacity: 0.8;    
  padding-top: 10px; 
  text-align: center;
  font-size: 30px;
  margin-left: 50px;
  border:  1px solid black; 
  float:left; 
  width: 100px;
  height: 40px;  
  }  

.cella:hover{
  background-color:gainsboro;
  }
    
 .cella2:hover{
  background-color:darkgray;
  }
 
.cella3:hover{
  background-color:darkgray;
  }

#calcolatrice{

border: 3px solid black;

padding: 10px 10px 10px 10px;

width: 310px;

height: 270px;

background-image: url(http://82.85.184.181/fileshare/sitosimo/megadeth.jpg);

background-size: contain;

background-position: center;

}

.cella{

background-color: ghostwhite;

opacity: 0.8;

padding-top: 10px;

text-align: center;

font-size: 30px;

border: 1px solid black;

float:left;

width: 50px;

height: 40px;

}

.cella2{

background-color: ghostwhite;

opacity: 0.8;

padding-top: 10px;

text-align: center;

font-size: 30px;

margin-left: 50px;

border: 1px solid black;

float:left;

width: 50px;

height: 40px;

}

.cella3{

background-color: ghostwhite;

opacity: 0.8;

padding-top: 10px;

text-align: center;

font-size: 30px;

margin-left: 256px;

border: 1px solid black;

width: 50px;

height: 40px;

}

.cella4{

background-color: ghostwhite;

opacity: 0.8;

padding-top: 10px;

text-align: center;

font-size: 30px;

margin-left: 50px;

border: 1px solid black;

float:left;

width: 100px;

height: 40px;

}

.cella:hover{

background-color:gainsboro;

}

.cella2:hover{

background-color:darkgray;

}

.cella3:hover{

background-color:darkgray;

}

JAVASCRIPT CALCULATOR

JAVASCRIPT CALCULATOR

Ricerca Articolo

Categorie

Synaptica srl