JS Calculator.

I made this simple calculator using HTML, CSS And JS.
Here is source code for you.  if you have any suggestion you can comment on this.



Source Code:
Here Is working Codepen demo
I use 7 segment fonts you can get from here
You should also also include bootstrap 3 version for better aligning.

 

 HTML

     <div class="main">
        <div class="calculator">
            <form name="forms" class="forms">
                <div class="screen">
                    <input type="text" name="answer" class=" form-control" id="answer" placeholder="ON" autocomplete="off"
                        onkeypress="isInputNumber(event)" onchange="forms.answers.value= eval(forms.answer.value)">
                    <input type="text" name="answers" class="form-control" placeholder="ANSWER" readonly="readonly" id="answers">
                </div>
                <br>
                <div class="buttons">
                    <button type="button" id="clear" onclick="cler()">C</button>
                    <button type="button" id="backspace" onclick="backSpace()">&#60</button>
                    <button type="button" id="devide" class="color" onclick="forms.answer.value +='/'">/</button>
                    <button type="button" onclick="forms.answer.value +='7'">7</button>
                    <button type="button" onclick="forms.answer.value +='8'">8</button>
                    <button type="button" onclick="forms.answer.value +='9'">9</button>
                    <button type="button" class="color" id="multiply" onclick="forms.answer.value +='*'">*</button>
                    <button type="button" onclick="forms.answer.value +='4'">4</button>
                    <button type="button" onclick="forms.answer.value +='5'">5</button>
                    <button type="button" onclick="forms.answer.value +='6'">6</button>
                    <button type="button" class="color" id="multiply" onclick="forms.answer.value +='-'">-</button>
                    <button type="button" onclick="forms.answer.value +='1'">1</button>
                    <button type="button" onclick="forms.answer.value +='2'">2</button>
                    <button type="button" onclick="forms.answer.value +='3'">3</button>
                    <button type="button" class="color" onclick="forms.answer.value +='+'">+</button>
                    <button type="button" onclick="forms.answer.value +='0'">0</button>
                    <button type="button" id="desimal" onclick="forms.answer.value +='.'">.</button>
                    <button type="button" class="color" id="equal" onclick="forms.answers.value= eval(forms.answer.value)">=</button>
                </div>
            </form>
        </div>
    </div>    

 

 CSS

            @font-face {font-family:s7; src:url(bootstrap/fonts/7segment.woff)}
        .container{
         background: #64bcdb;   
        }
        .main{
            width: 100%;
            height: 100%;
            background: linear-gradient(#8631a0, 10%,  #570c5a, 90%, #8031a0)
        }
        @media (min-width: 768px){
            .main{
                padding-top: 7%;
                padding-left: 38%;
            }            
        }
        @media(max-width: 767px){
            .main{
                padding-top: 4%;
                padding-left: 3%;
            }
        }
        .calculator{
            
            border-radius: 10px;
            padding: 20px;
            width: 300px;
            background: #fff;
        }
       .form-control{
        text-align: right;
        font-size: 25px;
        font-family: s7;
        letter-spacing: .07em;
        font-style: oblique 10deg;
        border: 0px;
        box-shadow: 0 0 0;
       }
       #answers{ 
           border-top: 0px;
           height: 50px;
           background: transparent;
           font-size: 35px;
           margin-top: -1px;
           color: #b466cc;
       }
       #answers::placeholder{
           color: #a664db;
           opacity: .8;
       }
       .form-control:focus {
            border-color: transparent;
            outline: 0;
            -webkit-box-shadow: none;
            box-shadow: none;
        }
        
        .buttons button{
            border-radius: 50px;
            border: 0px;
            box-shadow: 0px 0px 2px #a664db;
            padding: 7px 15px;
            margin: 10px;
            color: #602b75 ;
            font-weight: 600;
            font-size: 18px;
            transition: .2s box-shadow linear;
            font-style: oblique;
        }
        .buttons button:hover{
            box-shadow: 0px 0px 5px 0px #8d33b7 !important;
        }
        .buttons button:active{
            box-shadow: 0px 0px 10px black
        }
        #equal{
            padding: 7px 47px;
        }
        #clear{
            padding: 7px 45px;
        }
        #desimal{
            padding: 7px 18px;
        }
        #multiply{
            padding: 7px 17px;
        }
        #devide{
            padding: 7px 18px;
        }
        .color{
            background: #b861f2;
            color: #fff !important;
            box-shadow: 0px 0px 5px #b161f2 !important;
        } 

 

 JAVASCRIPT

     var _0x826e=["\x76\x61\x6C\x75\x65","\x61\x6E\x73\x77\x65\x72","\x67\x65\x74\x45\x6C\x65\x6D\x65\x6E\x74\x42\x79\x49\x64","","\x61\x6E\x73\x77\x65\x72\x73","\x6C\x65\x6E\x67\x74\x68","\x73\x75\x62\x73\x74\x72\x69\x6E\x67","\x77\x68\x69\x63\x68","\x66\x72\x6F\x6D\x43\x68\x61\x72\x43\x6F\x64\x65","\x74\x65\x73\x74","\x70\x72\x65\x76\x65\x6E\x74\x44\x65\x66\x61\x75\x6C\x74"];function cler(){document[_0x826e[2]](_0x826e[1])[_0x826e[0]]= _0x826e[3];document[_0x826e[2]](_0x826e[4])[_0x826e[0]]= _0x826e[3]}function backSpace(){var _0x2279x3=document[_0x826e[2]](_0x826e[1]);var _0x2279x4=_0x2279x3[_0x826e[0]];var _0x2279x5=_0x2279x4[_0x826e[5]]- 1;var _0x2279x6=_0x2279x4[_0x826e[6]](0,_0x2279x5);_0x2279x3[_0x826e[0]]= _0x2279x6}function isInputNumber(_0x2279x8){var _0x2279x9=String[_0x826e[8]](_0x2279x8[_0x826e[7]]);if(!(/[0-9]/[_0x826e[9]](_0x2279x9))){_0x2279x8[_0x826e[10]]()}}