Simple jquery calculator using HTML, CSS and Jquery

This is an example for make simple calculator with Jquery. jQuery is an open source JavaScript library that simplifies the interactions between an HTML/CSS document, or more precisely the Document Object Model (DOM), and JavaScript.

Step 1:

Create a folder calculator in htdocs/ directory. And create index.html file inside htdocs/calculator/ directory.

index.html


<!DOCTYPE html>
<html>
	<head>
        <meta charset="utf-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <title>Webeecafe Calculator</title>
        <link rel="stylesheet" type="text/css" href="css/main.css">
	</head>
	<body>
        <div class="calculator_container">
            <div class="calculator_card">

                <div class="brand">
                    <h6>Webeecafe Calculator</h6>
                </div>

                <div class="calculator_display">
                    <input type="text" value="" id="display" readonly>
                </div>

                <div class="button_container">
                    <div class="button_row">
                        <button class="c_but" disabled>C</button>
                        <button class="c_but" disabled>CE</button>
                        <button class="c_but" disabled>BACK</button>
                        <button class="green" id="standby">ON</button>
                    </div>
                    <div class="button_row">
                        <button class="c_but" disabled>7</button>
                        <button class="c_but" disabled>8</button>
                        <button class="c_but" disabled>9</button>
                        <button class="c_but" disabled>-</button>
                    </div>
                    <div class="button_row">
                        <button class="c_but" disabled>4</button>
                        <button class="c_but" disabled>5</button>
                        <button class="c_but" disabled>6</button>
                        <button class="c_but" disabled>+</button>
                    </div>
                    <div class="button_row">
                        <button class="c_but" disabled>1</button>
                        <button class="c_but" disabled>2</button>
                        <button class="c_but" disabled>3</button>
                        <button class="c_but" disabled>*</button>
                    </div>
                    <div class="button_row">
                        <button class="c_but" disabled>0</button>
                        <button class="c_but" disabled>/</button>
                        <button class="c_but" disabled>.</button>
                        <button class="c_but" disabled>=</button>
                    </div>
                </div>

            </div>
        </div>

		<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
		<script type="text/javascript" src="js/main.js"></script>
	</body>
</html>

Step 2:

Now create two folder css and js inside calculator/ directory.

Inside CSS folder create a new file main.css and paste this styles.

main.css

	
body{
    background: linear-gradient(45deg, #741fe4, #cc21b7);
}

.calculator_container{
    display: flex;
    height: 100vh;
}

.calculator_card{
    margin: auto;
    background: #a4a9a4;
    min-height: 100px;
    min-width: 100px;
    border-radius: 10px;
    box-shadow: 2px 15px 25px #000000;
}

.brand{
    padding: 15px 15px 0 15px;
}

.brand h6{
    margin: 0;
    font-family: cursive;
    color: #ff0000b5;
    font-size: 16px;
}

.calculator_display{
    padding: 15px;
}

.calculator_display input{
    height: 40px;
    text-align: right;
    width: 100%;
    font-size: 20px;
    border-radius: 10px;
    border:none;
    box-shadow: 0px -1px 12px #00000094;
    font-weight: bold;
    font-family: cursive;
}

.calculator_display input:focus{
    outline: none;
}

.button_row{
    display: flex;
    justify-content: space-between;
    padding: 0 15px 15px 15px;
}

.c_but{
    width: 70px;
    height: 30px;
    margin: 5px;
    font-size: 15px;
    font-weight: bold;
    font-family: cursive;
}

#standby{
    width: 70px;
    height: 30px;
    margin: 5px;
    font-size: 15px;
    font-weight: bold;
    font-family: cursive;
}

#standby:focus{
    outline: none;
}

.green{
    background: lightgreen;
}

.red{
    background: red;
}

Then create main.js file inside js folder and paste this script.

main.js

	
$(document).ready(function(){
    var display_value = '';
    var first_value = 0;
    var operator = '';
    var new_value = 0;

    $('#standby').on('click', function(){

        if ($(this).hasClass('green')) {

            $('.c_but').removeAttr('disabled');
            $(this).removeClass('green');
            $(this).addClass('red');
            $(this).html('OFF');
            $('.c_but').css('box-shadow','1px 1px 1px black');
            display(0);
            operator = '';
            new_value = 0;

        }else{

            $('.c_but').prop('disabled', true);
            $(this).removeClass('red');
            $(this).addClass('green');
            $(this).html('ON');
            $('.c_but').css('box-shadow','none');
            display('');

        }

    });

    //calculation
    $('.c_but').on('click', function(){
        var button_value = $(this).html();

        if (button_value === 'C') {
            display_value = 0;
            new_value = 0;
        } else if(button_value === 'CE'){
			new_value = 0;
        } else if(button_value === 'BACK'){
                          
            if (new_value.length == 1) {
                new_value = 0;
            }else{
                new_value = new_value.substring(0, new_value.length-1);
            }

        } else if(button_value === '.'){
            new_value += '.';
        } else if(isNumber(button_value)){
            if (new_value == 0) new_value = button_value;
            else new_value = new_value + button_value;
        } else if (isOperator(button_value)) {
            first_value = parseFloat(new_value);
            operator = button_value;
            new_value = '';

        } else if (button_value === '=') {
            new_value = operate(first_value,new_value,operator);
            operator= null;
        }
            display(new_value);
    });



    function isNumber(value){
        return !isNaN(value);
    }

    function isOperator(value){
        if (value == '/') {
            return value;
        } else if (value == '*') {
            return value;
        } else if (value == '+') {
            return value;
        } else if (value == '-') {
            return value;
        } else {
            return false;
        }

    }


    function operate(a,b,operator){
        a = parseFloat(a);
        b = parseFloat(b);

        if (operator == '+') {
            return a+b;
        } else if (operator == '-') {
            return a-b;
        } else if (operator == '/') {
            return a/b;
        } else if (operator == '*') {
            return a*b;
        } else {
            return 0;
        }
    }


    function display(display_value){
        var display_value = display_value.toString();
        $('#display').val(display_value.substring(0,10));
    }

});

Now run your page or reload.

View Demo

Simple jquery calculator using HTML, CSS and Jquery

Leave a reply

How to convert numbers to words in php

How to convert datetime from time ago in php

Simple jquery calculator using HTML, CSS and Jquery