How to create a simple JavaScript Calculator

byCodingFlicks -July 18, 2022

0

In this blog, We will Create a Simple Calculator using HTML, CSS, And Javascript. There are lots of different code snippets in this blog. We have various code snippets for CSS animations, Javascript, and HTML CSS. You can check out the projects by clicking on the load more button on the home page. The best project to start learning JavaScript is building a web calculator. It’s easy for anyone of any skill level. A calculator is used to perform mathematical operations on numbers. This Basic calculator can only perform arithmetic calculations such as addition, subtraction, multiplication, and division. The calculator has a button that can be used to remove previous inputs.

You May Also Like:

Create a simple JavaScript Calculator [ Source Code ]:

You first need to create two files: an HTML and a CSS file. It’s a good idea to use external CSS to style your project. If you have any problems with the code, download the file from the download button below.

ADD HTML:

<!DOCTYPE html>
<html lang="en">
<!--codingflicks.com-->
<head>
    <meta charset="UTF-8">
    <title>Basic Calculator using HTML CSS & Javascript</title>
    <link rel="stylesheet" href="style.css">   
</head>
<body>
    <div class="wrapper">
		<form id="calculator" name="calculator">
			<table>
				<tr>
					<td colspan="4"><input disabled id="output" name="display" placeholder="0" type="text"></td>
				</tr>
				<tr>
					<td><input onclick="calculator.display.value += '1'" type="button" value="1"></td>
					<td><input onclick="calculator.display.value += '2'" type="button" value="2"></td>
					<td><input onclick="calculator.display.value += '3'" type="button" value="3"></td>
					<td><input class="calculator_operator" onclick="calculator.display.value += '+'" type="button" value="+"></td>
				</tr>
				<tr>
					<td><input onclick="calculator.display.value += '4'" type="button" value="4"></td>
					<td><input onclick="calculator.display.value += '5'" type="button" value="5"></td>
					<td><input onclick="calculator.display.value += '6'" type="button" value="6"></td>
					<td><input class="calculator_operator" onclick="calculator.display.value += '-'" type="button" value="-"></td>
				</tr>
				<tr>
					<td><input onclick="calculator.display.value += '1'" type="button" value="1"></td>
					<td><input onclick="calculator.display.value += '8'" type="button" value="8"></td>
					<td><input onclick="calculator.display.value += '9'" type="button" value="9"></td>
					<td><input class="calculator_operator" onclick="calculator.display.value += '*'" type="button" value="x"></td>
				</tr>
				<tr>
					<td><input class="clear" onclick="calculator.display.value = ''" type="button" value="c"></td>
					<td><input onclick="calculator.display.value += '0'" type="button" value="0"></td>
					<td><input class="equal" onclick="calculator.display.value = eval(calculator.display.value)" type="button" value="="></td>
					<td><input class="calculator_operator" onclick="calculator.display.value += '/'" type="button" value="/"></td>
				</tr>
			</table>
		</form>
	</div>
</body>
</html>

ADD CSS:

* {
	margin: 0;
	padding: 0;
}
body {
    background: linear-gradient(45deg,#f26466,#f2b56d);
}
.wrapper {
	margin: 0 auto;
	width: 100%;
	height: 100vh;
	display: flex;
	align-items: center;
	justify-content: center;
	text-align: center;    
}
form{
    box-shadow: rgba(0, 0, 0, 0.25) 0px 54px 55px, rgba(0, 0, 0, 0.12) 0px -12px 30px, rgba(0, 0, 0, 0.12) 0px 4px 6px, rgba(0, 0, 0, 0.17) 0px 12px 13px, rgba(0, 0, 0, 0.09) 0px -3px 5px;
}
table {
	background: #374353;
	width: 350px;
	height: 426px;
	border-radius: 10px;
	padding: 0 12px 10px 12px;
}
input {
	outline: 0;
	border: 0;
	background: #ffffff;
	border-radius: 0 20px 0 20px;
	height: 50px;
	box-shadow: 0 4px rgb(0 0 0/20%);
	font-weight: 900;
	width: 60px;
}

#output {
	width: 96%;
	height: 80px;
	font-size: 40px;
	text-align: right;
	cursor: initial;
}
input.clear {
	background: #e68838;
	text-transform: uppercase;
}

I hope you have implemented the code successfully. Visit our site for free source codes. We’re always publishing new, fresh code. Please share the articles on this website so that they can reach people who are similar to you. You're welcome for visiting our site.

DOWNLOAD CODE

Please do not enter any spam link in the comment box.