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.

Adding Calculator App on your website


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

 <!-- Boostrap -->
        <link rel="stylesheet" href="" integrity="sha384-PsH8R72JQ3SOdhVi3uxftmaW6Vc51MKb0q5P2rRUpPvrszuE4W1povHYgTpBfshb" crossorigin="anonymous">
        <!-- JavaScript -->
        <script src=""></script>
        <script src=""></script>
        <script src="" integrity="sha384-vFJXuSJphROIrBnz7yo7oB41mKfc8JzQZiCq4NCceLEaO4IHwicKwpJf9c9IpFgh" crossorigin="anonymous"></script>
        <script src="" integrity="sha384-alpBpkh1PFOepccYVYDB4do5UnbKysX5WZXm3XxPqe5iKTfUKjNkCk9SaVuEZflJ" crossorigin="anonymous"></script>
        <!-- Font Awesome -->
        <link rel="stylesheet" href="">
        <!-- Default Stylesheet -->
        <link rel="stylesheet" href="css/style.css">
        <!-- Google Fonts -->
        <link href=",700" rel="stylesheet">
<!-- Calculator Plugin lib -->
<script src="js/main.js" type="text/javascript"></script>


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>
                <input readonly id="display1" type="text" class="form-control-lg text-right">
                <input readonly id="display2" type="text" class="form-control-lg text-right">
            <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 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 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 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 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 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>

See live demo and download source code.


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.