Bootstrap Snippet Calculator using HTML CSS Javascript

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
<link href="//netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css">
<script src="//netdna.bootstrapcdn.com/bootstrap/3.0.0/js/bootstrap.min.js"></script>
<script src="//code.jquery.com/jquery-1.11.1.min.js"></script>
<!------ Include the above in your HEAD tag ---------->
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
  <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1"/>
  <title>Calculadora Física</title>
  <link rel="shortcut icon" href="../favicon.ico"> 
  <link rel="stylesheet" type="text/css" href="css/default.css" />
  <link rel='stylesheet prefetch' href='https://maxcdn.bootstrapcdn.com/font-awesome/4.4.0/css/font-awesome.min.css'>
  <link rel="stylesheet" type="text/css" href="css/component.css" />
  <script type="text/javascript" src="js/formcalculations.js"></script>
</head>
<script type="text/javascript">
function valida(e){
  tecla = (document.all) ? e.keyCode : e.which;
    //Tecla de retroceso para borrar, siempre la permite
    if (tecla==8){
      return true;
    }
    
    // Patron de entrada, en este caso solo acepta numeros
    patron =/[0-9]/;
    tecla_final = String.fromCharCode(tecla);
    return patron.test(tecla_final);
  }
  function Checkradiobutton() {
    if(document.getElementById('r1').checked ){
      document.getElementById('box1').disabled=true; 
      document.getElementById('box2').disabled=false; 
      document.getElementById('box3').disabled=false; 
      document.getElementById('box5').disabled=false; 
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
body {
  color: white;
  display: flex;
  justify-content: center;
  align-items: center;
  background: white;
  backface-visibility: hidden;
}
input[type="radio"] {
  appearance: none;
  margin: 0 40px;
  width: 24px;
  height: 24px;
  background: #eeeeee;
  box-shadow: inset 0 0 0 .4em white, 0 0 0 .3em;
  border-radius: 50%;
  transition: .2s;
  cursor: pointer;
  color: #363945;
}
input[type="radio"]:hover, input[type="radio"]:checked {
  background: #363945;
  box-shadow: inset 0 0 0 .6em white, 0 0 0 .3em;
}
input[type="radio"]:checked {
  background: #56be8e;
  box-shadow: inset 0 0 0 .4em white, 0 0 0 .3em #56be8e;
}
input[type="radio"]:focus {
  outline: 0;
}
#wrap{
    width:750px;
    margin:0 auto;
    text-align:center;
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
function calculate() {
    var myBox1 = document.getElementById('box1').value; 
    var myBox2 = document.getElementById('box2').value;
    var myBox3 = document.getElementById('box3').value;
    var myBox4 = document.getElementById('box4').placeholder;
    var myBox5 = document.getElementById('box5').value;
    var result = document.getElementById('result');
    var myResult = 0;
    //Calcula los moles
    if(!myBox1.match(/\S/)  && !myBox2.match(/\S/)  && !myBox3.match(/\S/)  && !myBox5.match(/\S/)  ){
        alert("Existe algun campo incompleto");
    }
    if(myBox1.value!='' && myBox2.value!='' && !myBox3.match(/\S/)  && myBox5.value!='' ){
        myResult = (myBox1 * myBox2)/(myBox4 * (parseInt(myBox5)+parseInt(273.16)));
    }
    //Calcula la presión
    else if(!myBox1.match(/\S/) && myBox2.value!='' && myBox3.value!='' && myBox5.value!='' ){
        myResult = ((myBox3 * myBox4 * (parseInt(myBox5)+parseInt(273.16)))/myBox2);
    }
    //Calcula la temperatura
    else if(myBox1.value!='' && myBox2.value!='' && myBox3.value!=''&& !myBox5.match(/\S/)){
        myResult = (myBox1 * myBox2)/(myBox3 * myBox4);
    }
    //Calcula el volumen
    else if(myBox1.value!='' && !myBox2.match(/\S/) && myBox3.value!=''&& myBox5.value!='' ){
        myResult = ((myBox3 * myBox4 * (parseInt(myBox5)+parseInt(273.16)))/myBox1);
    }
    result.value = myResult;
    /*if (myBox1 == 0 && myBox2 ==0){
        result.value='';
    }else{
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX

"Calculator"
Bootstrap 3.0.0 Snippet by Emiliano87

Related: See More

Questions / Comments:

"Calculator" Bootstrap 3.0.0 Snippet by Emiliano87

Related: See More

Questions / Comments:

"Calculator"
Bootstrap 3.0.0 Snippet by Emiliano87