Simple Calculator in HTML, CSS & JavaScript with Source Code

Itcodingbaba

Welcome! In this article, we have bought you a stylish scientific calculator script, which helps you work on your project more easily. Grab the code and do whatever you want with it, it's completely free.

This is a simple calculato for a small handheld calculator. Some of this calculator features are addition, subtraction, division, multiplication and finding out more any percentage, loan calculator and much more.

This calculator can perform any function if you want to calculate anything online and free forever. This simple can be controlled using a keyboard, pad, mouse and also ofcourse by touch screen.

Why this Calculator Script?

Multiplication

Addition

Division

Substraction

Percentage

Loan Calculator

Use your backspace key to delete one character

On a keyboard, backspace with the delete button

On a touchscreen, on a phone or tablet, tap into the display then use your device keyboard delete.

To copy, drag the result and copy to your clipboard.

If you have any questions/Query regarding this script kindly Contact us.

How to use this code in HTML?

You can create a one main folder that will contain the HTML, CSS and JavaScript files, Just name if whatever you want btw it would be better if you name it calculator. According to Naming convention the HTMl, CSS and JavaScript files are named index.html, Styles.css and script.js.

If you want all the code together like CSS and JavaScript in one HTML.

Then Create an html file named anything, e.g Index.html, open it up and Create a <style> Paste All CSS code here </style> and the style should be above </head>.

Create a <script>Paste JavaScript code here</script> and this script should be above </body>.

HTML Code:

The HTMl code for This simple Calculator, You can create an .html and pase the code there.

<!DOCTYPE html>

<html>

<head>

<title>Scientific Calculator - Itcodingbaba.blogspot.com</title>
  
  
  </head>

<body>

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

CSS Code:

The CSS code the calculator, You may create a .CSS file and paste the following code there.

html, body {
	height: 100%;
	}
	
	body {
	margin: 0;
	display: flex;
	justify-content: center;
	align-items: center;

background: linear-gradient(-45deg, #ee7752, #e73c7e, #23a6d5, #23d5ab);
	background-size: 400% 400%;
	animation: gradient 15s ease infinite;
	}
	
	@keyframes gradient {
	0% {
	background-position: 0% 50%;
	}
	50% {
	background-position: 100% 50%;
	}
	100% {
	background-position: 0% 50%;
	}
	}
	
	
	.calculator {
	background-color: transparent;
	border-radius: 10px;
	display: grid;
	grid-template-columns: repeat(4, 1fr);
	grid-gap: 10px;
	padding: 20px;
	box-shadow: 0 0 20px rgba(0, 0, 0, 0.3);
	}
	
	.calculator input[type="text"] {
	background-color: #333;
	border: none;
	border-radius: 5px;
	color: #FFF;
	font-size: 36px;
	grid-column: 1 / span 4;
	height: 80px;
	padding: 20px;
	text-align: right;
	}
	
	button {
	background-color: #555;
	border: none;
	border-radius: 5px;
	color: #FFF;
	cursor: pointer;
	font-size: 36px;
	height: 80px;
	transition: background-color 0.3s;
	}
	
	button:hover {
	background-color: #888;
	}
	
	button:active {
	background-color: #333;
	}
	
	button:focus {
	outline: none;
	}
	
	button.operator {
	background-color: #FFA500;
	}
	
	button.clear {
	background-color: #FF4136;
	}
	
	button.equal {
	background-color: #2ECC40;
	}

Sign up Now

JavaScript Code:

The JavaScript code for simple Calculator, You may want to create a script.js file and paste the following code in it.

Now you have successfully created a Simple Calculator Using HTML, CSS and JavaScript, This script was provided by Itcodingbaba. And if you want more free codes please keep visiting our site for more daily uploads/updates, Thank you! best of luck.

Simple Calculator in HTML, CSS & JavaScript with Source Code

How to use this code in HTML?

🔹About

#buttons=(Accept !) #days=(20)

Contact form

Simple Calculator in HTML, CSS & JavaScript with Source Code

How to use this code in HTML?

You may like these posts

#buttons=(Accept !) #days=(20)

Contact form