jQuery toggleClass example

Toggle class name on click in jQuery

by CoderMotive

HTML

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>jquery</title>
	<script src="forScript/jquery-3.5.1.min.js"></script>
	<script src='jquery.js'></script>
	<link rel="stylesheet" href="style.css">
</head>
<body>
	<div class='canculate'>
		<div class='result'>
			<div class='verb'></div>
			<div class='value'></div>
		</div>
		<div class='bottons'>
			<button>C</button>
			<button>⇠</button>
			<button>%</button>
			<button>÷</button>
			<button>7</button>
			<button>8</button>
			<button>9</button>
			<button>*</button>
			<button>4</button>
			<button>5</button>
			<button>6</button>
			<button>-</button>
			<button>1</button>
			<button>2</button>
			<button>3</button>
			<button>+</button>
			<button>()</button>
			<button>0</button>
			<button>.</button>
			<button>=</button>

		</div>
	</div>
</body>
</html>

CSS

body{
	background-color: #0B0F18;
	margin: 0;
	padding: 0;
}
.canculate{
	width: 400px;
	height: 96%;
	background: white;
	padding: 0;
	position: absolute;
    left:50%;
    top:50%;
    transform:translate(-50%,-50%);
}
.result{
	background-color: #0B141B;
	width: 100%;
	height:44%;
	margin: 0;
	overflow: hidden;
}
.bottons{
	width: 100%;
	height:56%;
	background-color: #0B0F18;
	margin: 0;
}
button {
    background-color: #0B0F18;
    border: none;
    color: white;
    outline: none;
    padding: 13px;
    text-align: center;
    text-decoration: none;
    font-size: 30px;
	margin-left:6%;
	margin-right:6%;
	margin-bottom: 1%;
	margin-top: 1%; 
    border-radius: 50%;
}
.bottons button:nth-child(4n+4){
	 background-color: #151922;
}
.bottons button:nth-child(20){
	 background-color: red;
}
.value{
	color:white;
	font-size: 40px;
	float: right;
	margin-right:3%;
}

JavaScript

$(document).ready(function(){
	$("button").click(function(){
		let res = $(this).html();
		if(res == 'C'){
			$('.value').html("");
		}else if(res == '⇠'){
		    $('.value').html(removeStr($('.value').html()));
		}else if(res == '='){
			$('.value').html(addResult($('.value').html()));
		}else if(res == '+'||'-'||'*'||'÷'){
			$('.value').append(addAtr($(".value").html(), res));
		}else{
			$('.value').append(res);
		}
	})
})
function removeStr(html){
	let arr = Array.from(html);
	let length = arr.length - 1;
	delete arr[length];
	return arr.join('');
}
function addResult(html){
	let reg = html.replace(/÷/, "/");
	return eval(reg);
}
function addAtr(html, res){
	let regexp = /[\+\*÷-]$/;
	if(regexp.test(html)){
		removeStr(html);
		return res;
	}else{
		return res;
	}
}