How to make calculator in asp.net using javascript?

Question

Howdy! I want to make calculator in asp.net. without involving html and ajax, I want to use java script with asp. Any guide??

ASP.NET is a server side technology, javascript a client-side. Why even mention ASP.NET if you just want to use client side stuff? — Oded
– Oded, Commented May 13, 2011 at 19:20
If your not using HTML how do you expect to display the controls? — John Hartsock
– John Hartsock, Commented May 13, 2011 at 19:21

Robert Greiner · Accepted Answer · 2011-05-13 19:20:38Z

1

You can get started here for JavaScript. You really don't need ASP for a simple calculator although it wouldn't hurt anything to create an ASP project for this I suppose. Just keep in mind, that in this case, shoehorning ASP into this project is definitely not necessary and probably a bit of overkill.

If you are interested in jQuery at all, there is a much better tutorial for a jQuery calculator here.

answered May 13, 2011 at 19:20

Robert Greiner

29.9k9 gold badges67 silver badges86 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

Touseef Khan Over a year ago

but what if I want to use asp.net with this? mean I want to use components of asp i.e. buttons, text field.

Robert Greiner Over a year ago

then you absolutely can, and for your case, it might make sense since you want to learn ASP. Just know that in this case, however, it is not necessary to use ASP.

Dan Diplo · Accepted Answer · 2011-05-13 20:20:18Z

1

You obviously need HTML if you want to do this in a browser, otherwise you won't have any input controls. A really simple calculator can be easily made in a few lines of JavaScript (you don't even need jQuery). Something like:

<script type="text/javascript">
    function calculate()
    {
        var v = document.getElementById("data");
        alert(eval(v.value));
    }
</script>


<input type="text" id="data" />
<input type="button" value="Calculate" onclick="calculate()" />

Just type your equation in the text box (eg. 2 + 4 / 10) and click the button!

answered May 13, 2011 at 20:20

Dan Diplo

25.4k4 gold badges71 silver badges90 bronze badges

Comments

coudy.one · Accepted Answer · 2018-05-10 11:20:27Z

var cnt = 0;

function addcount(x) {
    var y = document.getElementById("text1").value;
    var l = y.length;
    var last = y.charAt(l - 1);
    if (last != x) {
        cnt = 0;
    }
    cnt = parseInt(cnt) + parseInt(1);
    if (cnt <= 1) {
        document.getElementById("text1").value += x;
    }
    else {
        document.getElementById("text1").innerHTML = '';
    }
}

function event1(m) {
    document.getElementById("text1").value += m;
    var z = document.getElementById("text1").value;
    document.getElementById("text3").value = eval(z);
    document.getElementById("text1").value = eval(z);
}

function event2() {

    var x = document.getElementById("text1").value;

    document.getElementById("text1").value = eval(x);
}

function event3() {
    document.getElementById("text1").value = "";
    document.getElementById("text3").value = "";
}

function event4() {
    var x = document.getElementById("text1").value;
    var sillyString = x.slice(0, -1);
    document.getElementById("text1").value = sillyString;
}

.curve{
    border-radius: 13px;
}
.col{
    background-color: #00acc1;
}
.col1{
    background-color: #e8f5e9;
}
.col2{
    background-color: #1C2331;
}

#text1{

}
#text3{

}

<html>
<head>
    <title>Calculator</title>
    <link href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.0/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css">
    <script src="//code.jquery.com/jquery-1.11.1.min.js"></script>
    <script src="//maxcdn.bootstrapcdn.com/bootstrap/3.3.0/js/bootstrap.min.js"></script>

</head>
<body>
<div class="curve" style="text-align: center;">
    <table  class="curve col2">
        <tr>
            <th colspan=6 class="curve col"><h1>Calculator</h1></th>
        </tr>
        <tr >
            <td colspan=6><input type="text" id="text1" class="curve col1" style="text-align:right;width:100%;"/></td>
        </tr>
        <tr >
            <td colspan=6><input type="text" id="text3"  class="curve col1" style="text-align:right;width:100%;"/></td>
        </tr>
        <tr>

            <td><button type="button" value="/" onClick="addcount(this.value)" class="curve btn-primary" style="padding:8px 14px;">/</button></td>
            <td><button type="button" value="." onClick="addcount(this.value)" class="curve btn-primary" style="padding:8px 14px;">.</button></td>
            <td><button type="button" value="*" onClick="addcount(this.value)" class="curve btn-primary"style="padding:8px 14px;">*</button></td>
            <td><button type="button" value="-" onClick="addcount(this.value)" class="curve btn-primary"style="padding:8px 14px;">-</button></td>
            <td><button type="button" value="" onClick="event3(this.value)"  class="curve btn-primary"style="padding:6px 18px;">C</button></td>
        </tr>
        <tr>
            <td><button type="button" value="7" onClick="event1(this.value)" class="curve btn-primary" style="padding:7px 12px;">7</button></td>
            <td><button type="button" value="8" onClick="event1(this.value)"  class="curve btn-primary"style="padding:7px 12px;">8</button></td>
            <td><button type="button" value="9" onClick="event1(9)" class="curve btn-primary" style="padding:7px 12px;">9</button></td>
            <td rowspan=2><button type="button" id="ad"value="+" class="curve btn-primary" style="height:70px;padding:8px 13px;" onClick="addcount(this.value)">+</button></td>
            <td><button type="button" value="" onClick="event4(this.value)" class="curve btn-primary" style="padding:6px 10px;">DEL</button></td>
        </tr>
        <tr>
            <td><button type="button" value="4" onClick="event1(4)" class="curve btn-primary" style="padding:7px 12px;">4</button></td>
            <td><button type="button" value="5" onClick="event1(5)" class="curve btn-primary" style="padding:7px 12px;">5</button></td>
            <td><button type="button" value="6" onClick="event1(6)" class="curve btn-primary" style="padding:7px 12px;">6</button></td>
        </tr>
        <tr>
            <td><button type="button" value="1" onclick="event1(1)" class="curve btn-primary" style="padding:7px 12px;">1</button></td>
            <td><button type="button" value="2" onClick="event1(2)" class="curve btn-primary" style="padding:7px 12px;">2</button></td>
            <td><button type="button" value="3" onClick="event1(3)" class="curve btn-primary" style="padding:7px 12px;">3</button></td>
            <td rowspan=2><button type="button" class="curve btn-primary" style="height:70px;padding:8px 13px;" onClick="event2()">=</button></td>
        </tr>
        <tr class="curve">
            <td><button type="button" class="curve btn-primary" onclick="event1(0)" style="padding:7px 12px;">0</button></td>
        </tr>
    </table>
</div>

</body>
</html>

looks good potentially, but you should probably provide some explanation of this large quantity of code.

Collectives™ on Stack Overflow

How to make calculator in asp.net using javascript?

3 Answers 3

2 Comments

Comments

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

2 Comments

Comments

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related