CSS & jQuery Calculator

Demo:

*to see the calculator on the website click here.

To create the CSS & jQuery calculator follow the steps below:

Add HTML
Add CSS
Add JavaScript/ jQuery

Step1.

Add HTML

Create the calculator container and add the rows with numbers:

<div class="calculator-container">
  <input type="text" id="result" disabled="disabled" value="0">/>
  <label for="result"></label>
<div class="values">
  <div class="calc-row">
    <button class="clear">C</button>
    <button>.</button>
    <button class="orange">÷</button>
  </div>
  <div class="calc-row">
    <button>7</button>
    <button>8</button>
    <button>9</button>
    <button class="orange">x</button>
  </div>
  <div class="calc-row">
    <button>4</button>
    <button>5</button>
    <button>6</button>
    <button class="orange">-</button>
  </div>
  <div class="calc-row">
    <button>1</button>
    <button>2</button>
    <button>3</button>
    <button class="orange">+</button>
  </div>
  <div class="calc-row">
    <button class="zero">0</button>
    <button class="orange">=</button>
  </div>
  </div>
</div>

Step2.

Add CSS

Set the colour and the position of the background and elements:

body {
  display: flex;
  justify-content: center;
  align-items: center;
  height: 100vh;
}

Style the calculator:

.calculator-container {
  position: relative;
  width:300px;
  height: 365px;
  background-color: #0a0908;
  text-align: center;
  box-shadow: 0 0 30px rgba(0,0,0,.7);
}

.calculator-container input[type=text] {
  line-height: 35px;
  width: 66%;
  box-shadow: inset 0 0 15px rgba(0,0,0,0.4);
  border: 1px solid rgba(0,0,0,0.4);
  background-color: #e8e8e8;
  margin-top:30px;
  direction: rtl;
  font-weight: bold;
  font-size: 15px;
  padding: 5px;
  color: black;
}

.calculator-container .calc-row {
  display: flex;
}

.values {
  margin-left: 50px;
  margin-top:20px;
}

.orange {
  background-color: #fb8b24;
  color: #fff;
  height: 50px;
  width: 50px;
  cursor: pointer;
}

.clear {
  background-color: #9a031e;
  color: #fff;
  width: 100px;
  height: 50px;
  cursor: pointer;
}

button {
  background-color: #0a0908;
  color: #fff;
  height: 50px;
  width: 50px;
  cursor: pointer;
  transition: transform .2s;
  border:none;
}

button:active {
  transform: translateY(2px) translateX(2px);
}

.zero {
  width: 150px;
  cursor: pointer;
}

Step3.

Add JavaScript/ jQuery

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>

Tip: Don’t forget to add jQuery library in the <head> section!

To read how to add the jQuery code to HTML click here.

var numbers = [];
var sum = 0;

var calc = '';
$("button").on('click', function() {
 	var value = $(this).text();

  if (!isNaN(value) || value === '.') {
    calc += value;
    $("#result").val(calc.substring(0,10));
    
  } else if (value === 'C') {
    calc = '';
    sum = 0;
    $("#result").val('0')
  
 } else if (value === '÷') {
    numbers.push(calc);
    numbers.push('/');
    calc = '';
    
  } else if (value === 'x') {
    numbers.push(calc);
    numbers.push('*');
    calc = '';

  } else if (value === '=') {
  	numbers.push(calc);

    var count = Number(numbers[0]);
    for (var i = 1; i < numbers.length; i++) {
      var nextNum = Number(numbers[i+1])
      var mark = numbers[i];
      
      if (mark === '+') { count += nextNum; } 
      else if (mark === '/') { count /= nextNum; }
      else if (mark === '-') { count -= nextNum; } 
      else if (mark === '*') { count *= nextNum; }     
      i++;
    }
    
    if (count < 0) {
      count = Math.abs(count) + '-';
    }
    
    $("#result").val(count);
		numbers = [];
    calc = '';
    
  } else {
    numbers.push(calc);
    numbers.push(value);
    calc = '';
  }
});

Enjoy coding!

Share this: