I want to convert my javascript calculator into php

1085 views javascript
9

I have created a js calculator, I don't want everyone to know the js, but there's no way to hide js in browser because js is 'client-side' programming language. I couldn't convert this javascript calculator in to php.
The source is:

<html lang="en">
<head>
    <title>Calculator</title>
    <link rel="shortcut icon" type="image/x-icon" href="/favicon.ico"/>
    <meta 
    name='viewport' 
    content='width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0' 
    />
    <style>
        body {
            background-image: url("/background123.jpg");
        }

        h2 {
            text-align:center;
            text-decoration:underline;
        }

        .box {
            background-color:#3d4543;
            height:300px;
            width:250px;
            border-radius:10px;
            position:relative;
        }

        .display {
            background-color:#222;
            width:220px;
            position:relative;
            top:20px;
            height:40px;
        }

        .display input {
            position:relative;
            top:2px;
            height:35px;
            width: 100%;
            color:black;
            background-color:#bccd95;
            font-size:21px;
            text-align:right;
        }

        .keys {
            position:relative;
            top:15px;
        }

        .button {
            width:40px;
            height:30px;
            border:none;
            border-radius:8px;
            margin-left:17px;
            margin-bottom: 17px;
            float: left;
            cursor:pointer;
            border-top:2px solid transparent;
        }

        .button.grey {
            color:white;
            background-color:#6f6f6f;
            border-bottom:black 2px solid;
            border-top:2px #6f6f6f solid;
        }

        .button.red {
            color:black;
            background-color:red;
            border-bottom:black 2px solid;
            font-size: 20px;
        }

        .button.black {
            color:white;
            background-color:303030;
            border-bottom:black 2px solid;
            border-top:2px 303030 solid;
        }

        .button.orange {
            color:black;
            background-color:FF9933;
            border-bottom:black 2px solid;
            border-top:2px FF9933 solid;
        }

        .gray:active {
            border-top:black 2px solid;
            border-bottom:2px #6f6f6f solid;
        }

        .red:active {
            border-top:black 2px solid;
            border-bottom:#ff4561 2px solid;
        }

        .black:active {
            border-top:black 2px solid;
            border-bottom:#303030 2px solid;
        }

        .orange:active {
            border-top:black 2px solid;
            border-bottom:FF9933 2px solid;
        }

        p {
            line-height:10px;
        }
    </style>
    <script>
        function c(val)
        {
            document.getElementById("d").value=val;
        }
        function v(val)
        {
            document.getElementById("d").value+=val;
        }
        function e() 
        { 
            try 
        { 
            c(eval(document.getElementById("d").value)) 
        } 
            catch(e) 
            {
                c('Error') 
            } 
        }
        function onPressBackspace() {
            d.value = d.value.substring(0, d.value.length - 1);
        }
    </script>
</head>
<body>
    <center>
    <div class="box">
    <div class="display"><input type="text" id="d"></div>
    <div class="keys">
        <p><input type="button" class="button grey" value="C" onclick='c("")'><input type="button" class="button gray" value="m-" onclick='c("M- and M+ functions are not developed yet....")'><input type="button" class="button grey" value="&#9003;" onclick='onPressBackspace()'><input type="button" class="button red" value="&#247;" onclick='v("/")'></p>
        <p><input type="button" class="button black" value="7" onclick='v("7")'><input type="button" class="button black" value="8" onclick='v("8")'><input type="button" class="button black" value="9" onclick='v("9")'><input type="button" class="button red" value="&times;" onclick='v("*")'></p>
        <p><input type="button" class="button black" value="4" onclick='v("4")'><input type="button" class="button black" value="5" onclick='v("5")'><input type="button" class="button black" value="6" onclick='v("6")'><input type="button" class="button red" value="-" onclick='v("-")'></p>
        <p><input type="button" class="button black" value="1" onclick='v("1")'><input type="button" class="button black" value="2" onclick='v("2")'><input type="button" class="button bl

answered question

We are not here to translate your code. Give it a try and come back when/if you get stuck.

This is not a code-converting service. Show us what you have tried so far with PHP. Style is irrelevant to PHP though, that's client side only.

Also I'm not sure why you feel the need to hide a calculator script. I mean I believe anyone with half a brain can understand what is going on in the background.

1 Answer

3

It will be better if you use calculator in client side language (javascript); But still if you want try to do ajax request to the php and do arithmetic operation there.

Example: Javascript:

    $("button").click(function(){
        $.post("calc.php",
        {
            x: "20",
            opt: "+",
            y: "10",


        },
        function(data, status){
            alert(data);
        });
    });

posted this

Have an answer?

JD

Please login first before posting an answer.