Build a Google Scientific Calculator Clone in Browser Using HTML5 CSS3 and Javascript Full Project For Beginners

 

 

 

 

index.html

 

 

<html>
    
    <head>
<style>

table {
    width: 50%;
    height: 300px;
    border-collapse: collapse;
    font-family: arial, sans-serif;
}
td {
    padding: 5px;
    text-align: center;
}
input[type=text] {
    width: 100%;
    height: 50px;
    text-align: right;
    font-family: monospace;
    font-size: 3em;
    font-weight: bold;
    border-color: gray;
    border-width: 1px;
    border-style: solid;
    opacity: 0.5;
}
input[type=text]:hover {
    opacity: 1;
}
input[type=button] {
    opacity: 0.8;
    background-color: #f5f5f5;
    background-image: linear-gradient(top, #f5f5f5, #f1f1f1);
    border: 1px solid #dedede;
    color: #444;
    height: 45px;
    width: 65px;
    text-align: center;
    font-size: 1.2em;
    font-weight: normal;
}
input[type=button]:hover {
    box-shadow: 0 1px 1px rgba(0, 0, 0, 0.1);
    background-image: linear-gradient(top, #f8f8f8, #f1f1f1);
    opacity: 1;
    border: 1px solid #c6c6c6;
    color: #222;
    cursor: pointer;
}
input[name=equal] {
    background-color: #4d90fe;
    background-image: linear-gradient(top, #4d90fe, #4787ed);
    border: 1px solid #3079ed;
    color: #fefefe;
}
input[name=equal]:hover {
    background-color: #4d90fe;
    background-image: linear-gradient(top, #4d90fe, #357ae8);
    border: 1px solid #2f5bb7;
    color: #fefefe;
}
input[name=operator] {
    border: 1px solid #c6c6c6;
    background-color: #d6d6d6;
}

</style>
        <meta charset="UTF-8">
        <title>Calculator</title>
        <link rel="stylesheet" href="css/style.css" media="screen" type="text/css" />
    </head>
    
    <body>
        <table>
            <tr>
                <td colspan="7">
                    <input type="text" id="display" value="" />
                </td>
            </tr>
            <tr>
                <td>
                    <input id="btnAns" type="button" name="operator" value="Ans" />
                </td>
                <td>
                    <input id="btnPi" type="button" name="operator" value="π" onclick="set('3.14')" />
                </td>
                <td>
                    <input id="btnE" type="button" name="operator" value="e" />
                </td>
                <td>
                    <input id="btnOParen" type="button" name="operator" value="(" onclick="set('(')" />
                </td>
                <td>
                    <input id="btnCParen" type="button" name="operator" value=")" onclick="set(')')" />
                </td>
                <td>
                    <input id="btnPcnt" type="button" name="operator" value="%" />
                </td>
                <td>
                    <input id="btnCE" type="button" name="operator" value="CE" onclick="ce()" />
                </td>
            </tr>
            <tr>
                <td>
                    <input id="btnRad" type="button" name="operator" value="rad" />
                </td>
                <td>
                    <input id="btnDeg" type="button" name="operator" value="deg" />
                </td>
                <td>
                    <input id="btnFact" type="button" name="operator" value="x!" />
                </td>
                <td>
                    <input id="btn7" type="button" value="7" onclick="set('7')" />
                </td>
                <td>
                    <input id="btn8" type="button" value="8" onclick="set('8')" />
                </td>
                <td>
                    <input id="btn9" type="button" value="9" onclick="set('9')" />
                </td>
                <td>
                    <input id="btnDiv" type="button" name="operator" value="÷" onclick="set('/')" />
                </td>
            </tr>
            <tr>
                <td>
                    <input id="btnSineInv" type="button" name="operator" value="asin" onclick="asine()" />
                </td>
                <td>
                    <input id="btnSine" type="button" name="operator" value="sin" onclick="sine()" />
                </td>
                <td>
                    <input id="btnLN" type="button" name="operator" value="ln" />
                </td>
                <td>
                    <input id="btn4" type="button" value="4" onclick="set('4')" />
                </td>
                <td>
                    <input id="btn5" type="button" value="5" onclick="set('5')" />
                </td>
                <td>
                    <input id="btn6" type="button" value="6" onclick="set('6')" />
                </td>
                <td>
                    <input id="btnMul" type="button" name="operator" value="×" onclick="set('*')" />
                </td>
            </tr>
            <tr>
                <td>
                    <input id="btnCosInv" type="button" name="operator" value="acos" onclick="acosine()" />
                </td>
                <td>
                    <input id="btnCos" type="button" name="operator" value="cos" onclick="cosine()" />
                </td>
                <td>
                    <input id="btnLog" type="button" name="operator" value="log" onclick="fLog()" />
                </td>
                <td>
                    <input id="btn1" type="button" value="1" onclick="set('1')" />
                </td>
                <td>
                    <input id="btn2" type="button" value="2" onclick="set('2')" />
                </td>
                <td>
                    <input id="btn3" type="button" value="3" onclick="set('3')" />
                </td>
                <td>
                    <input id="btnSub" type="button" name="operator" value="-" onclick="set('-')" />
                </td>
            </tr>
            <tr>
                <td>
                    <input id="btnTanInv" type="button" name="operator" value="atan" onclick="atangent()" />
                </td>
                <td>
                    <input id="btnTan" type="button" name="operator" value="tan" onclick="tangent()" />
                </td>
                <td>
                    <input id="btnSqrt" type="button" name="operator" value="√" onclick="sqrRoot()" />
                </td>
                <td>
                    <input id="btn0" type="button" value="0" onclick="set('0')" />
                </td>
                <td>
                    <input id="btnPeriod" type="button" value="." />
                </td>
                <td>
                    <input id="btnEqual" type="button" name="equal" value="=" onclick="answer()" />
                </td>
                <td>
                    <input id="btnAdd" type="button" name="operator" value="+" onclick="set('+')" />
                </td>
        </table>
        <script src="js/index.js"></script>
    </body>

</html>

<script>

function set(op) {

    document.getElementById("display").value += op;

}

function sqrRoot() {
    var tempStore = document.getElementById("display").value;
    document.getElementById("display").value = eval(Math.sqrt(tempStore));

}

function asine() {
    var tempStore = document.getElementById("display").value;
    document.getElementById("display").value = eval(Math.asin(tempStore));

}

function acosine() {
    var tempStore = document.getElementById("display").value;
    document.getElementById("display").value = eval(Math.acos(tempStore));

}

function fLog() {
    var tempStore = document.getElementById("display").value;
    document.getElementById("display").value = eval(Math.log(tempStore));

}

function atangent() {
    var tempStore = document.getElementById("display").value;
    document.getElementById("display").value = eval(Math.atan(tempStore));

}

function tangent() {
    var tempStore = document.getElementById("display").value;
    document.getElementById("display").value = eval(Math.tan(tempStore));

}

function cosine() {
    var tempStore = document.getElementById("display").value;
    document.getElementById("display").value = eval(Math.cos(tempStore));

}

function sine() {
    var tempStore = document.getElementById("display").value;
    document.getElementById("display").value = eval(Math.sin(tempStore));

}

function setOp() {
    alert("gf");
    //document.getElementById("display").value += op;
}

function answer() {
    var Exp = document.getElementById("display");
    var Exp1 = Exp.value;
    var result = eval(Exp1);
    //alert(result);
    Exp.value = result;
}

function ce() {

    var elem = document.getElementById("display").value;
    var length = elem.length;
    length--;
    var a = elem.substr(0, length);

    // document.getElementById("display").value="";
    //for(var i=0;i<length-1;i++)
    //{
    document.getElementById("display").value = a;
    // }
    //alert(length);
}


</script>

</script>

Leave a Reply