CODEWITHSUNDEEP
javascriptjquery
Faisal Qureshi
Faisal Qureshi

Reputation: 5

I want to create a simple calculator in jQuery

Basically, I am trying to create a simple calculator in jQuery as I created first in javascript but have some confusion in jQuery functions. First here is my HTML code.

<body>
    <h1>Calculator in jQuery</h1>
    <div class="calculator">
    <form name="myform">
        <tr>
            <td>
                <input type="screen" id="screen" name="screen"><br>
            </td>
        </tr>
        <tr>
            <td>
                <input type="button" name="7" value="7">
                <input type="button" name="8" value="8">
                <input type="button" name="9" value="9">
                <input type="button" name="/" value="/">
                <br>
                <input type="button" name="4" value="4">
                <input type="button" name="5" value="5">
                <input type="button" name="6" value="6">
                <input type="button" name="*" value="*">
                <br>
                <input type="button" name="1" value="1">
                <input type="button" name="2" value="2">
                <input type="button" name="3" value="3">
                <input type="button" name="-" value="-">
                <br>
                <input type="button" name="C" value="C">
                <input type="button" name="CE" value="CE">
                <input type="button" name="0" value="0">
                <input type="button" name="+" value="+">
                <br>
                <input type="button" name="=" value="=">
    </form> 
</body>

In jquery tags, I have the basic issues like I created 3 functions but how to link them and how to get output from that functions. Here are my jQuery functions:

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>    
<script> 
    $(document).ready(function(){
        function update(value){
        $("#screen").html(.myform .screen .value) +=value;
    }
        function result(value){
        $("#")  
        }
        function form_reset(value){
        $("#")  
        }
    });
</script>

Upvotes: 0

Views: 4719

Answers (2)

Mohsin Sohail
Mohsin Sohail

Reputation: 30

You are trying the same code as javascript you have to know the basic working of jQuery. And here is the code for the calculator in jQuery. Style tags

<style>
    body{
        margin: 0;
        padding: 0;
        box-sizing: border-box;
        text-align: center;
    }
    h1{
        text-align: center;
    }
    
    .main{
        margin-left: 470px;
        background-color: #1f1f21;
        width: 30%;

    
    }
     #display{
        width: 93%;
        padding: 5px;
        font-size: 55px;
        color: black;
        background-color: #fff;
        text-align: right;
        border: 1px solid black;
        outline: none;
    }
    .clear{
        background-color: red;
        color: #fff;
    }
     input{
        background-color: #333;
        color: #fff;
        margin-top: 5px;
        font-size: 25px;
        width: 95px;
        height: 95px;
        border-radius: 40px;
        border-width: 0;
    } 
    .finalresult{
        background-color: #001010;
    }
</style>

Now moving towards the jquery tags

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>   

<script>
    $(document).ready(function(){
      $(".clc").click(function(){
        $("#display").val($("#display").val() +$(this).val());
      });
      $(".clear").click(function(){
        $("#display").val('');
      }); 
      $(".result").click(function(){
        $("#display").val(eval($("#display").val()));
      });
    });
</script>

And here is the basic HTML code for that

<h1>Simple Calculator in jQuery</h1><br><br>
    <div class="main">
<!--form tags-->
    <input id="display" type="text" placeholder=""><br>

    <input class="clc" type="button" value="7">
    <input class="clc" type="button" value="8">
    <input class="clc" type="button" value="9">
    <input class="clc" type="button" value="*">
    <br>
    <input class="clc" type="button" value="4">
    <input class="clc" type="button" value="5">
    <input class="clc" type="button" value="6">
    <input class="clc" type="button" value="/">
    <br>
    <input class="clc" type="button" value="1">
    <input class="clc" type="button" value="2">
    <input class="clc" type="button" value="3">
    <input class="clc" type="button" value="-">
    <br>
    <input class="clear" type="button" value="C">
    <input class="clc" type="button" value="0">
    <input class="clc" type="button" value="+">
    <input class="result" type="button" value="=">
</div>

Upvotes: 1

Liftoff
Liftoff

Reputation: 25392

You can bind to the button's click event with $.on(event, handler) and get the value of the button with $.val().

You can then use isNaN() to check whether or not the clicked button corresponds to a number or a non-number.

*Note that $.val() is primarily used for <input>, <select>, and <textarea> elements. For other elements you would typically use $.html() or $.attr().

$(function(){
  $("input[type=button]").on("click", function(){
    let val = $(this).val();
    if(isNaN(val))
    {
      //Handle operators
      console.log("You entered an operator!", val);
    }
    else
    {
      //Handle numbers
      console.log("You entered a number!", val);
    }
  });
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<body>
    <h1>Calculator in jQuery</h1>
    <div class="calculator">
    <form name="myform">
        <tr>
            <td>
                <input type="screen" id="screen" name="screen"><br>
            </td>
        </tr>
        <tr>
            <td>
                <input type="button" name="7" value="7">
                <input type="button" name="8" value="8">
                <input type="button" name="9" value="9">
                <input type="button" name="/" value="/">
                <br>
                <input type="button" name="4" value="4">
                <input type="button" name="5" value="5">
                <input type="button" name="6" value="6">
                <input type="button" name="*" value="*">
                <br>
                <input type="button" name="1" value="1">
                <input type="button" name="2" value="2">
                <input type="button" name="3" value="3">
                <input type="button" name="-" value="-">
                <br>
                <input type="button" name="C" value="C">
                <input type="button" name="CE" value="CE">
                <input type="button" name="0" value="0">
                <input type="button" name="+" value="+">
                <br>
                <input type="button" name="=" value="=">
    </form> 
</body>

Upvotes: 0

Related Questions