JavaScript Calculator

<!DOCTYPE html>

<html lang="en">


<head>

    <meta charset="UTF-8">

    <meta http-equiv="X-UA-Compatible" content="IE=edge">

    <meta name="viewport" content="width=device-width, initial-scale=1.0">

    <title>Calculator</title>

</head>

<style>

    body {

        background-color: teal;

    }


    form {

        text-align: center;

        font-family: sans-serif;

        color: black;

    }


    h1 {

        text-align: center;

        font-family: sans-serif;

        background-color: black;

        color: floralwhite;

    }


    fieldset {

        margin: 150px 0 0 570px;

        width: 300px;

        background-color: wheat;

        border-radius: 10px;

        border-style: none;

        box-shadow: 10px 10px skyblue;

    }


    textarea {

        height: 39px;

        width: 129px;

    }


    button {

        background-color: skyblue;

    }

</style>


<body>

    <fieldset>

        <h1>Javascript Calculator</h1>

        <form id="reset_data">

            Enter Value: <input type="text" id="num1" placeholder="Enter Value"><br><br>

            Enter Value: <input type="text" id="num2" placeholder="Enter Value"><br><br>

            Enter Value: <input type="text" id="oparetor" placeholder="Enter Oparetor"><br><br>

            <textarea id="answer" cols="30" rows="10" readonly></textarea><br><br>

            <button type="button" onclick="calculator()">CALCULATE</button>

            <button type="button" onclick="reset()">reset</button>

        </form>

    </fieldset>

    <script>

        function calculator() {

            var calc1 = document.getElementById('num1').value;

            var calc2 = document.getElementById('num2').value;

            var calc3 = document.getElementById('oparetor').value;

            if (calc3 == '+') {

                var result = parseInt(calc1) + parseInt(calc2);

            } else if (calc3 == '-') {

                var result = parseInt(calc1) - parseInt(calc2);

            } else if (calc3 == '*') {

                var result = parseInt(calc1) * parseInt(calc2);

            } else if (calc3 == '/') {

                var result = parseInt(calc1) / parseInt(calc2);

            } else {

                alert("enter Value");

            }

            document.getElementById('answer').value = (result);

            console.log(result)

        }

        function reset() {

            document.getElementById('reset_data').reset()

        }

    </script>

</body>


</html>


 

Comments

Post a Comment

Popular posts from this blog

C.R.U.D Oparetion in (PHP Code)

C.R.U.D Oparetion   index.php <?php include "conn.php"; if (isset($_POST["usersubmit"]))  {     $vrname = $_POST["username"];     $vremployee = $_POST["useremployee"];     $vrsalary = $_POST["usersalary"];     $vrgender = $_POST["gender"];     //testing sucessfully complete     // echo $vrname;     // echo $vremployee;     // echo $vrsalary;     // echo $vrgender;     // exit();     $inserting = "INSERT INTO dbemployeelist(dbname, dbemployee, dbsalary, dbgender) VALUES('$vrname', '$vremployee', '$vrsalary', '$vrgender')";     $connecting = mysqli_query($conn,$inserting); } ?> <!DOCTYPE html> <html lang="en"> <head>     <title>Document</title>     <style>         form{             text-align:center;             padding:2...
Read more

Search Dropdown - jQuery

Image
<select name="vehicle_no" id="vehicle_no" class="form-control select" >   <option value="" >Select Vehicle</option>      <?php //echo $vchVehicleNumber;exit;?>           @foreach($vehiclesData as $data)              <option {{(isset($vchVehicleNumber) && $vchVehicleNumber == $data['vehicleno'])?'selected':''}} value="{{ $data['vehicleno'] }}" >{{ $data['vehicleno'] }}</option>              @endforeach </select> // jQuery:- you have to add CDN of select2 jquery $("#vehicle_no").select2({   minimumResultsForSearch: Infinity }); $('#vehicle_no').select2({    minimumInputLength: 0  });
Read more

Ajax Crud Oparetion (Only Insert Code "create") | PHP | Jquery | Ajax | CODE

Image
 index.php(Frontend & ajax) <!DOCTYPE html> <html lang="en"> <head>     <meta charset="UTF-8">     <meta http-equiv="X-UA-Compatible" content="IE=edge">     <meta name="viewport" content="width=device-width, initial-scale=1.0">     <title>Document</title> </head> <body>     <form id="aj">     Name :<input type="text" name="u_name">     Mobile :<input type="text" name="u_mob">     <button type="button" onclick="user_submit();">SEND</button >     <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>     <script>         function user_submit()          {             var send = new FormData(aj);             // console.log(send);   ...
Read more