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

• Делаем обычную 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

var calc = function(a,b,r){
	a = parseFloat(a);
	b = parseFloat(b);
	if (r == '+')
		a += b;
	if (r == '-')
		a -=b;
	if (r == '×')
		a *= b;
	if (r == '÷')
		a /= b;
	if(isNaN(a) || isNaN(b))
		return false;
	return a.toString();
};
window.onload = function() {
	var a = r = b ='';
	$('.calc').on('click', 'button.reset', function (){
		$('.calc .result').text('');
		a = r = b ='';
	});
	$('.calc').on('click', 'button.del', function (){
		if($('.calc .result').text().slice(-1) == r && r)
			r = 0;
		else if(r)
			b = b.slice(0, -1);
		else
			a = a.slice(0, -1);
		$('.calc .result').text(a+r+b);
	});
	$('.calc').on('click', 'button.plus, button.minus, button.inc, button.dec', function (){
		if(r){
			let res = calc(a,b,r);
			if(res !== false){
				a = res;
				b ='';
				r = $(this).text();
			}
		}
		else
			r = $(this).text();
		$('.calc .result').text(a+r+b);
	});
	$('.calc').on('click', 'button.resres', function (){
		let res = calc(a,b,r);
		if(res !== false){
			a = res;
			r = b ='';
		}
		$('.calc .result').text(a+r+b);
	});
	$('.calc').on('click', 'button.dot', function (){
		if(r){
			if(b.indexOf('.') > -1)
				return;
			b += $(this).text();
		}
		else{
			if(a.indexOf('.') > -1)
				return;
			a += $(this).text();
		}
		$('.calc .result').text(a+r+b);
	});
	$('.calc').on('click', 'button.number', function (){
		if(r)
			b += $(this).text();
		else
			a += $(this).text();
		$('.calc .result').text(a+r+b);
	});
}