Add Nice Calculator App on your website written in Bootstap4, jQuery

Add Nice Calculator App on your website written in Bootstap4, jQuery –
If you want to add Calculator app on your website Then in this post I am going to share awesome minimal calculator app written in HTML, CSS, and JavaScript. It is fully functional and lightweight calculator which full-fill all basic need of your website visitor, they can easily calculate their basic calculation and fill the form. You can attach this calculator app where calculation needed.
jquery-caluclator


Adding Calculator App on your website

Libraries

Include required JavaScript and CSS libraries on page where calculator needed.

 <!-- Boostrap -->
        <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta.2/css/bootstrap.min.css" integrity="sha384-PsH8R72JQ3SOdhVi3uxftmaW6Vc51MKb0q5P2rRUpPvrszuE4W1povHYgTpBfshb" crossorigin="anonymous">
 
        <!-- JavaScript -->
        <script src="https://cdnjs.cloudflare.com/ajax/libs/mathjs/3.17.0/math.min.js"></script>
        <script src="https://code.jquery.com/jquery-3.2.1.min.js"></script>
        <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.3/umd/popper.min.js" integrity="sha384-vFJXuSJphROIrBnz7yo7oB41mKfc8JzQZiCq4NCceLEaO4IHwicKwpJf9c9IpFgh" crossorigin="anonymous"></script>
        <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta.2/js/bootstrap.min.js" integrity="sha384-alpBpkh1PFOepccYVYDB4do5UnbKysX5WZXm3XxPqe5iKTfUKjNkCk9SaVuEZflJ" crossorigin="anonymous"></script>
 
        <!-- Font Awesome -->
        <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
 
        <!-- Default Stylesheet -->
        <link rel="stylesheet" href="css/style.css">
 
        <!-- Google Fonts -->
        <link href="https://fonts.googleapis.com/css?family=Roboto:400,700" rel="stylesheet">
<!-- Calculator Plugin lib -->
<script src="js/main.js" type="text/javascript"></script>



HTML

Here is the html to create calculator layout.

       <div class="container">
<h3 style="text-align:center">Calculator</h3>
            <!-- Rounded switch -->
            <label class="switch">
                <input type="checkbox">
                <span class="slider"></span>
            </label>
            <form>
                <input readonly id="display1" type="text" class="form-control-lg text-right">
                <input readonly id="display2" type="text" class="form-control-lg text-right">
            </form>
 
            <div class="d-flex justify-content-between button-row">
                <button id="left-parenthesis" type="button" class="operator-group">&#40;</button>
                <button id="right-parenthesis" type="button" class="operator-group">&#41;</button>
                <button id="square-root" type="button" class="operator-group">&#8730;</button>
                <button id="square" type="button" class="operator-group">&#120;&#178;</button>
            </div>
 
            <div class="d-flex justify-content-between button-row">
                <button id="clear" type="button">&#67;</button>
                <button id="backspace" type="button">&#9003;</button>
                <button id="ans" type="button" class="operand-group">&#65;&#110;&#115;</button>
                <button id="divide" type="button" class="operator-group">&#247;</button>
            </div>
 
 
            <div class="d-flex justify-content-between button-row">
                <button id="seven" type="button" class="operand-group">&#55;</button>
                <button id="eight" type="button" class="operand-group">&#56;</button>
                <button id="nine" type="button" class="operand-group">&#57;</button>
                <button id="multiply" type="button" class="operator-group">&#215;</button>
            </div>
 
 
            <div class="d-flex justify-content-between button-row">
                <button id="four" type="button" class="operand-group">&#52;</button>
                <button id="five" type="button" class="operand-group">&#53;</button> 
                <button id="six" type="button" class="operand-group">&#54;</button> 
                <button id="subtract" type="button" class="operator-group">&#8722;</button>
            </div>
 
 
            <div class="d-flex justify-content-between button-row">
                <button id="one" type="button" class="operand-group">&#49;</button> 
                <button id="two" type="button" class="operand-group">&#50;</button>
                <button id="three" type="button" class="operand-group">&#51;</button>
                <button id="add" type="button" class="operator-group">&#43;</button>
            </div>
 
            <div class="d-flex justify-content-between button-row">
                <button id="percentage" type="button" class="operand-group">&#37;</button>
                <button id="zero" type="button" class="operand-group">&#48;</button>
                <button id="decimal" type="button" class="operand-group">&#46;</button>
                <button id="equal" type="button">&#61;</button>
            </div>
        </div>

See live demo and download source code.

DEMO | DOWNLOAD

Visit official github repository for more information and follow for future updates. Don’t forget to read license for using this plugin in your projects.



2 Replies to “Add Nice Calculator App on your website written in Bootstap4, jQuery”

  1. Hi,
    I am new to designing. I want to create a responsive design. But I am having problem with media queries. Can you please help me that, how to write proper media queries for all standard devices and also for any resolution?

Leave a Reply

Your email address will not be published. Required fields are marked *

This site uses Akismet to reduce spam. Learn how your comment data is processed.