Javascript Calculator

Posted on : 6th March 2023 | Author : @ByDev24


							<div class="container">
		<div class="calculator">
			<input type="text" class="value" readonly="" name="txt" id="output">
			<span class="num clear" onclick="btnInput()"><i>C</i></span>
			<span class="num" onclick="btnInput('/')"><i>/</i></span>
			<span class="num" onclick="btnInput('*')"><i>*</i></span>
			<span class="num" onclick="btnInput('7')"><i>7</i></span>
			<span class="num" onclick="btnInput('8')"><i>8</i></span>
			<span class="num" onclick="btnInput('9')"><i>9</i></span>
			<span class="num" onclick="btnInput('-')"><i>-</i></span>
			<span class="num" onclick="btnInput('4')"><i>4</i></span>
			<span class="num" onclick="btnInput('5')"><i>5</i></span>
			<span class="num" onclick="btnInput('6')"><i>6</i></span>
			<span class="num plus" onclick="btnInput('+')"><i>+</i></span>
			<span class="num" onclick="btnInput('1')"><i>1</i></span>
			<span class="num" onclick="btnInput('2')"><i>2</i></span>
			<span class="num" onclick="btnInput('3')"><i>3</i></span>
			<span class="num" onclick="btnInput('0')"><i>0</i></span>
			<span class="num" onclick="btnInput('00')"><i>00</i></span>
			<span class="num" onclick="btnInput('.')"><i>.</i></span>
			<span class="num equal" onclick="calculate()"><i>=</i></span>
		</div>
	</div>


						@import url("https://fonts.googleapis.com/css2?family=Roboto&display=swap");
body{
	font-family: 'Roboto', sans-serif;
}
.container {
    position: relative;
    width: 390px;
    padding: 40px 30px 30px;
    border-radius: 20px;
    box-shadow: 0px -1px 0px rgb(0 0 0 / 25%), inset -5px -5px 15px rgb(0 0 0 / 15%), inset 5px 5px 15px rgb(0 0 0 / 12%);
    background: #ffffff;
}
.calculator{
	position: relative;
	display: grid;
}

.calculator .value{
	position: relative;
	grid-column: span 4;
	height: 100px;
	width: calc(100% - 20px);
	left: 10px;
	border: none;
	outline: none;
	background: #f1f1f1;
	margin-bottom: 10px;
	border-radius: 10px;
	box-shadow: 0 0 3px 3px rgb(0 0 0 / 14%);
	text-align: right;
	padding: 10px;
	font-size: 2em;
}

.calculator span{
	color: #000;
	position: relative;
	display: grid;
	place-items: center;
	width: 60px;
	height: 60px;
	margin: 10px;
	background: linear-gradient(180deg,#ffffff,#e7e7e7);
	box-shadow: inset -8px 0 8px rgb(0 0 0 / 15%), inset 0 -8px 8px rgb(0 0 0 / 25%), 0 0 0 2px rgb(159 159 159 / 73%), 2px 11px 23px rgb(0 0 0 / 40%);
	user-select: none;
	cursor: pointer;
	font-weight: 400;
	border-radius: 8px;
}

.calculator span::before{
	content: '';
	position: absolute;
	background: linear-gradient(90deg,#ffffff,#d5d5d5);
	top: 8px;
	left: 8px;
	bottom: 8px;
	right: 8px;
	border-radius: 10px;
	transition-duration: 0.2s;
}
.calculator span i{
	position: relative;
	font-style: normal;
	font-size: 1.5em;
	text-transform: uppercase;
}

.calculator .clear{
	grid-column: span 2;
	width: 140px;
	background: #f00;
	color: #fff;
}

.calculator .clear::before{
	background: linear-gradient(90deg,#d20000,#ffffff5c);
	border-left: 1px solid #fff4;
	border-bottom: 1px solid #fff4;
	border-top: 1px solid #fff4;
}

.calculator .plus{
	grid-row: span 2;
	height: 140px;
}
.calculator .equal{
	background: #2196f3;
	color: #fff;
}

.calculator .equal::before{
	background: linear-gradient(90deg,#1479c9,#ffffff5c);
	border-left: 1px solid #fff4;
	border-bottom: 1px solid #fff4;
	border-top: 1px solid #fff4;
}
.calculator span:active:before {
    top: 10px;
    left: 10px;
    bottom: 6px;
    right: 6px;
}


							// Insert Value
	const btnInput = (val) => {
		const outputScreen = document.querySelector("#output")
		if(val === undefined){
			outputScreen.value = ''
		}else{
			outputScreen.value += val
		}
	}

	//Calculate
	const calculate = (val) => {
		const outputScreen = document.querySelector("#output")
		outputScreen.value = eval(outputScreen.value)
	}