Простой вычислитель

• Делаем обычную bootstrap html разметку кнопок, по четыре квадарата в ряд
• Результирующее поле

кусок HTML

<div class='calc'>
	<div class='row'>
		<div class='result'></div>
	</div>
	<div class='row'>
		<button class='reset'>R</button>
		<button class='del'><</button>
		<span class="eblock"></span>
		<button class='resres'>=</button>
	</div>
	<div class='row'>
		<button class='number'>7</button>
		<button class='number'>8</button>
		<button class='number'>9</button>
		<button class='plus'>+</button>
	</div>
	<div class='row'>	
		<button class='number'>4</button>
		<button class='number'>5</button>
		<button class='number'>6</button>
		<button class='inc'>×</button>
	</div>		
	<div class='row'>
		<button class='number'>1</button>
		<button class='number'>2</button>
		<button class='number'>3</button>
		<button class='minus'>-</button>
	</div>
	<div class='row'>
		<button class='number'>0</button>
		<button class='dot'>.</button>
		<span class="eblock"></span>
		<button class='dec'>÷</button>
	</div>
</div>

кусок CSS

.calc .row{
	margin:0;
}
.calc .eblock,
.calc button{
	margin:4px;
	width: 30px;
	height:30px;
}
.calc .eblock{
	display: inline-flex;
	margin-bottom: -10px;
}
.calc button{	
	font-size: 16px;
	font-weight: 600;
}
.calc button.reset{
	background: #fbb9b9;
}
.calc .result{
	background: #efefef;
	font-size: 16px;
	padding: 5px;
	height: 30px;
	width: 160px;
	margin: 2px;
}

кусок JQuery

 1var calc = function(a,b,r){
 2	a = parseFloat(a);
 3	b = parseFloat(b);
 4	if (r == '+')
 5		a += b;
 6	if (r == '-')
 7		a -=b;
 8	if (r == '×')
 9		a *= b;
10	if (r == '÷')
11		a /= b;
12	if(isNaN(a) || isNaN(b))
13		return false;
14	return a.toString();
15};
16window.onload = function() {
17	var a = r = b ='';
18	$('.calc').on('click', 'button.reset', function (){
19		$('.calc .result').text('');
20		a = r = b ='';
21	});
22	$('.calc').on('click', 'button.del', function (){
23		if($('.calc .result').text().slice(-1) == r && r)
24			r = 0;
25		else if(r)
26			b = b.slice(0, -1);
27		else
28			a = a.slice(0, -1);
29		$('.calc .result').text(a+r+b);
30	});
31	$('.calc').on('click', 'button.plus, button.minus, button.inc, button.dec', function (){
32		if(r){
33			let res = calc(a,b,r);
34			if(res !== false){
35				a = res;
36				b ='';
37				r = $(this).text();
38			}
39		}
40		else
41			r = $(this).text();
42		$('.calc .result').text(a+r+b);
43	});
44	$('.calc').on('click', 'button.resres', function (){
45		let res = calc(a,b,r);
46		if(res !== false){
47			a = res;
48			r = b ='';
49		}
50		$('.calc .result').text(a+r+b);
51	});
52	$('.calc').on('click', 'button.dot', function (){
53		if(r){
54			if(b.indexOf('.') > -1)
55				return;
56			b += $(this).text();
57		}
58		else{
59			if(a.indexOf('.') > -1)
60				return;
61			a += $(this).text();
62		}
63		$('.calc .result').text(a+r+b);
64	});
65	$('.calc').on('click', 'button.number', function (){
66		if(r)
67			b += $(this).text();
68		else
69			a += $(this).text();
70		$('.calc .result').text(a+r+b);
71	});
72}