Build a Advanced Scientific Calculator Web App in Browser Using HTML5 CSS3 and Javascript Full Project For Beginners

 

 

 

index.html

 

 

<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css">
<div class="container">

        <h2>Scientific Calculator App</h2>

<form id="calculator">
   <div class="form-group">
    <div class="col-md-4" class="display">
 <input type="text" id="show" class="form-control" readonly size="18">
</div>
 </div><br />
          
 <div class="keys">
          
<button type="button" class="btn btn-md btn-primary" value="1" name="btn1" onclick="display(btn1.value)"> 1</button>
                
<button type="button" class="btn btn-md btn-primary" value="2" name="btn2" onclick="display(btn2.value)"> 2</button>
                
<button type="button" class="btn btn-md btn-primary" value="3" name="btn3" onclick="display(btn3.value)"> 3</button>
                
<button type="button" class="btn btn-md btn-primary" value="+" name="addbtn" onclick="display(addbtn.value)"> +</button>
                
<button type="button" class="btn btn-md btn-primary" value="%" name="btnpercent" onclick="percent(btnpercent)">%</button>

                <br />

<button type="button" class="btn btn-md btn-primary" value="4" name="btn4" onclick="display(btn4.value)"> 4</button>
        
<button type="button" class="btn btn-md btn-primary" value="5" name="btn5" onclick="display(btn5.value)"> 5</button>
                
<button type="button" class="btn btn-md btn-primary" value="6" name="btn6" onclick="display(btn6.value)"> 6</button>
                
<button type="button" class="btn btn-md btn-primary" value="-" name="minusbtn" onclick="display(minusbtn.value)"> -</button>
                
<button type="button" class="btn btn-md btn-primary" value="fact" name="btnfact" onclick="factorial(btnfact.value)">n!</button>

                <br />

 <button type="button" class="btn btn-md btn-primary" value="7" name="btn7" onclick="display(btn7.value)"> 7</button>
                
<button type="button" class="btn btn-md btn-primary" value="8" name="btn8" onclick="display(btn8.value)"> 8</button>
              
<button type="button" class="btn btn-md btn-primary" value="9" name="btn9" onclick="display(btn9.value)"> 9</button>
                
<button type="button" class="btn btn-md btn-primary" value="*" name="timesbtn" onclick="display(timesbtn.value)"> *</button>

<button type="button" class="btn btn-md btn-primary" value="Sin" name="btnSin" onclick="sin(btnSin)">Sin</button>

<br />

<button type="button" class="btn btn-md btn-primary" value="0" name="btn0" onclick="display(btn0.value)"> 0</button>
                
<button type="button" class="btn btn-md btn-primary" value="." name="dotbtn" onclick="display(dotbtn.value)"> .</button>
             
<button type="button" class="btn btn-md btn-primary" value="<-- " name="backbtn" onclick="backspace()"> <-- </button>
                  
<button type="button" class="btn btn-md btn-primary" value="/" name="dividebtn" onclick="display(dividebtn.value)"> /</button>          
<button type="button" class="btn btn-md btn-primary" value="Cos" name="btnCos" onclick="cos(btnCos)">Cos</button>

<br />
<button type="button" class="btn btn-md btn-primary" value="+/-" name="plusminus" onclick="signChange()">+/-</button>
                 
<button type="button" class="btn btn-md btn-primary" value="C" name="clear" onclick="display(clear.value)">C</button>
                  
<button type="button" class="btn btn-md btn-primary" value="pi" name="btnPI" onclick="pier(btnPI)"> PI</button>
                  
<button type="button" class="btn btn-md btn-primary" value="sqrt" name="btnSqrt" onclick="square(btnSqrt)"> Sqrt</button>
                  
<button type="button" class="btn btn-md btn-primary" value="Tan" name="btnTan" onclick="tan(btnTan)">Tan</button>

<br />
<button type="button" class="btn btn-md btn-primary" value="In" name="btnLog" onclick="log(btnLog)">Log </button>
                  
<button type="button" class="btn btn-md btn-primary" value=" , " name="btnExp" onclick="exponent(btnExp)"> EXP</button>
             
<button type="button" class="btn btn-md btn-primary" value="x^y" name="btnX^Y" onclick="raiseTo(base,power)">X^Y</button>
                
<button type="button" class="btn btn-md btn-primary" value="(" name="btnOpen" onclick="display()">(</button>
                 
<button type="button" class="btn btn-md btn-primary" value=")" name="btnClose" onclick="display()">)</button>

 <br />
<button type="button" class="btn btn-lg btn-primary" value="=" name="equal" onclick="answer()">=</button>
</div>
</form>
</div>
  
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
  
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>

 

 

style.css

 

 

/* Major Style */

.container h2 {
    margin-left: 400px;
    margin-bottom: 20px;
}

#calculator {
    background-color: #505050;
    width: 35%;
    min-height: 484px;
    max-height: 520px;
    border-radius: 5px;
    margin: 0 auto;
}

.form-control {
    height: 50px;
    font-size: 15px;
    display: inline-block;
    margin-top: 28px;
    margin-left: 2px;
    text-align: right;
}

@media (min-width: 992px) {
    .col-md-4 {
        width: 396px;
    }
}


/*  style Button-Primary */

.btn-primary {
    width: 15.7%;
    height: 40px;
    margin-left: 9px;
    margin-bottom: 14px;
}

.btn-lg {
    width: 92%;
    height: 50px;
}

button#comma {
    font-weight: bold;
}

.keys {
    width: 100%;
    display: inline-block;
    margin: 15px 7px 15px 7px;
}


/* MEDIA QUERIE Mini-Laptop screen view */

@media (max-width:1199px) and (min-width:990px) {
    #calculator {
        width: 38%;
    }
    .form-control {
        width: 90%;
        margin-left: 0px;
    }
    .container h2 {
        margin-left: 310px;
        font-size: 2.9rem;
    }
    .keys {
        width: 100%;
        display: inline-block;
        margin: 15px 5px 15px 5px;
    }
    .btn-lg {
        width: 92.5%;
        height: 45px;
    }
}


/* MEDIA QUERIE Tablet Screen View */

@media (max-width:991px) and (min-width:768px) {
    #calculator {
        width: 47%;
        height: 500px;
    }
    .form-control {
        width: 100%;
        margin-left: 0px;
    }
    .container h2 {
        margin-left: 221px;
        font-size: 2.7rem;
    }
    .keys {
        width: 100%;
        display: inline-block;
        margin: 0px 1px 15px 0px;
    }
    .btn-lg {
        width: 93%;
        height: 45px;
    }
}


/* MEDIA QUERIE Mobile large screen */

@media (max-width:767px) {
    #calculator {
        width: 46%;
    }
    .form-control {
        width: 100%;
        margin-left: 0px;
    }
    .container h2 {
        margin-left: 223px;
        font-size: 2.5rem;
    }
    .keys {
        width: 100%;
        display: inline-block;
        margin: 0px;
        margin-left: 4px !important;
    }
    .btn-primary {
        width: 15%;
    }
    .btn-lg {
        width: 93.5%;
        height: 44px;
    }
}

@media (max-width:578px) {
    #calculator {
        width: 65%;
        height: 500px;
    }
    .form-control {
        width: 100%;
        margin-left: 0px;
    }
    .container h2 {
        margin-left: 130px;
        font-size: 2.3rem;
    }
    .keys {
        width: 100%;
        display: inline-block;
        margin: 0px;
        margin-left: 6px !important;
    }
    .btn-primary {
        width: 15%;
    }
    .btn-lg {
        width: 90%;
        height: 44px;
    }
}

@media (max-width:448px) {
    #calculator {
        width: 85%;
        height: 500px;
    }
    .form-control {
        width: 100%;
        margin-left: 0px;
    }
    .container h2 {
        margin-left: 80px;
        font-size: 2.1rem;
    }
    .keys {
        width: 100%;
        display: inline-block;
        margin: 0px;
        margin-left: 6px !important;
    }
    .btn-primary {
        width: 15%;
    }
    .btn-lg {
        width: 90%;
        height: 44px;
    }
}

@media (max-width:375px) {
    #calculator {
        width: 100%;
        height: 500px;
    }
    .form-control {
        width: 100%;
        margin-left: 0px;
    }
    .container h2 {
        margin-left: 20px;
        font-size: 1.5rem;
    }
    .keys {
        width: 100%;
        display: inline-block;
        margin: 0px;
        margin-left: 4px !important;
    }
    .btn-primary {
        width: 15%;
        /* margin-left: 8px; */
    }
    .btn-lg {
        width: 91%;
        height: 44px;
    }
}

 

 

script.js

 

 

var txtField = document.getElementById('show');

function display(txt) {
    txtField.value += txt;

    if (txt === 'C') {
        txtField.value = "";
        return false;
    }
}

function backspace() {
    var num = txtField.value;
    var len = num.length - 1;
    var newNumber = num.substring(0, len);
    txtField.value = newNumber;
}

function signChange() {
    var plus = txtField.value;
    var nem = plus * -1;
    txtField.value = nem;
}

function answer(txt) {
    txt = txtField.value;
    txt = eval(txt);
    txtField.value = txt;
}

function cos(txt) {
    txt = txtField.value;
    txt = Math.cos(txt * Math.PI / 180);
    txtField.value = txt;

}

function sin(txt) {
    txt = txtField.value;
    txt = Math.sin(txt * Math.PI / 180);
    txtField.value = txt;
}

function tan(txt) {
    txt = txtField.value;
    txt = Math.tan(txt * Math.PI / 180);
    txtField.value = txt;
}

function log(txt) {
    txt = txtField.value;
    txt = Math.log10(txt);
    txtField.value = txt;
}

function exponent(txt) {
    txt = txtField.value;
    txt = Math.exp(txt);
    txtField.value = txt;
}
var val = 0.0;

function percent(txt) {
    val = txtField.value;
    txtField.value = val * 0.01;
}

pie = 3.142;

function pier(txt) {
    txt = txtField.value;
    txtField.value = txt * pie;

}

function square(txt) {
    txt = txtField.value;
    txt = Math.sqrt(txt);
    txtField.value = txt;
}

function raiseTo(base, power) {
    base = txtField.value;
    console.log(base);

}

function factorial(txt) {
    txt = txtField.value;
    var result = 1;
    for (var i = 0; i < txt; i++) {
        result = result * (txt - i);
    }

    txtField.value = result;

}

Leave a Reply