iOS Inspired Web Calculator Built With jQuery

Calculators are handy in our daily lives, for shopping, calculations at work, online finances, or cooking recipes. You can find countless online calculators on the web to use in your web applications.

If you're an Apple fan and use iPhone, you probably have seen the calculator app included with the iOS. It's one of the best calculators that I've ever seen.

In this post, we will use HTML, CSS, and jQuery to build a clean and easy-to-use web-based calculator that is inspired by the iOS calculator app. It has the most basic functions of a calculator, such as addition, subtraction, multiplication, division, reset, and percentage.

How to use it:

1. Create an empty container to hold the calculator.

<div id="calculator"></div>

2. Load the necessary JavaScript files.

<!-- jQuery Is Required -->
<script src="/path/to/cdn/jquery.slim.min.js"></script>

<!-- Core -->
<script src="calculation.js"></script>

<!-- Generate The Calculator -->
<script src="calculator.js"></script>

3. Add the following CSS to your webpage. That's it.

/*============================
  APP DESIGN
============================*/
#calculator {
  min-height: 500px;
  max-height: 550px;
  min-width: 450px;
  max-width: 500px;
  border-radius: 10px 10px 0 0;
  height: auto;
  background-color: #1A1A1D;
  box-shadow: 5px 10px 20px 10px rgb(29, 25, 25);
  display: grid;
  grid-template: "s s s s" 1fr
                 "a a a o" 1fr
                 "n n n o" 1fr
                 "n n n o" 1fr
                 "n n n o" 1fr
                 "n n n o" 1fr
                 / 1fr 1fr 1fr 1fr;
}

/*============================
  CALCULATOR SCREEN
============================*/
.screen {
  width: 100%;
  height: auto;
  grid-area: s;
  background-color: #1A1A1D;
  border-radius: 10px 10px 0 0;
}

.screen p {
  display: inline-block;
  color: white;
  text-align: right;
  width: 100%;
  height: 100%;
  font-size: 2.4rem;
  user-select: none;
}
/*============================
  CALCULATOR BUTTONS
============================*/
button {
  border-radius: 50%;
  width: 75%;
  min-width: 90px;
  height: auto;
  outline: none;
  color: white;
  user-select: none;
  border: 1px transparent solid;
  transition: all 0.3s ease;
}

/*=== BUTTON CONTAINERS===*/
.container {
  justify-items: center;
  grid-gap: 5px;
  padding: 5px 0;
}

.aux {
  grid-area: a;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  padding-bottom: 0;
}

.operators {
  grid-area: o;
  display: grid;
  grid-template-rows: repeat(5, 1fr);
  padding-right: 5px;
}

.numbers {
  grid-area: n;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  grid-template-rows: repeat(4, 1fr);
}
/*=== AUXILLARY BUTTONS===*/

.auxillary {
  background-color: #9f9fa1;
  color: black;
}

.auxillary:active {
  background-color: #d3d3d4;
}
/*=== OPERATOR BUTTONS===*/
.operator {
  background-color: #C3073F;
}

.operator:active {
  background-color:#a03152;
  color: white;
}

.op-clicked {
  background-color: white;
  color: #C3073F;
}

#division {
  font-size: 1.3em;
}
/*=== NUMBER BUTTONS===*/
.numbers button {
  background-color: #4E4E50;
}

.numbers button:active {
  background-color:  #a09e9e;
  color: black;
}

#zero {
  grid-column: span 2;
  border-radius: 40px 40px;
  min-width: 190px;
  text-align: left;
  text-indent: 15%;
}

---

This awesome jQuery plugin is developed by kennyctran. For more Advanced Usages, please check the demo page or visit the official website.