Preview: Building a calculator today

As the project workspace, make a folder called calculator and put all of the project files inside of it.

HTML Code

Paste the following HTML code for the calculator into the index.html file.

view raw index.html hosted with ❤ by GitHub

CSS Code

Paste the following CSS code for the calculator into the style.css file.

	@import url('https://fonts.googleapis.com/css2?family=Quicksand:wght@300;400;500&display=swap');

	* {
	margin: 0;
	padding: 0;
	box-sizing: border-box;
	font-family: 'Quicksand', sans-serif;
	}

	body {
	display: flex;
	justify-content: center;
	align-items: center;
	min-height: 100vh;
	background-image: url(20.jpg);
	background-repeat: no-repeat;
	background-size: cover;
	overflow: hidden;
	}

	section::before {
	content: '';
	position: absolute;
	width: 400px;
	height: 400px;
	background: linear-gradient(90deg,orangered,red);
	box-shadow: 0 0 10px rgb(255, 0, 0),
	0 0 20px rgb(245, 12, 12),
	0 0 40px rgb(255, 0, 0),
	0 0 80px rgb(245, 15, 15),
	0 0 100px rgb(255, 35, 35),
	0 0 200px orangered;
	border-radius: 50%;
	transform: translate(-700px,300px);
	}

	section::after {
	content: '';
	position: absolute;
	width: 60px;
	height: 60px;
	background: linear-gradient(#fff,#fff);
	box-shadow: 0 0 10px #fff,
	0 0 20px #fff,
	0 0 40px #fff,
	0 0 60px #fff,
	0 0 80px #fff,
	0 0 100px #fff;
	border-radius: 50%;
	transform: translate(350px,-320px);
	}

	.container {
	position: relative;
	background: rgba(255, 255, 255, 0.05);
	border-radius: 6px;
	overflow: hidden;
	z-index: 10;
	backdrop-filter: blur(10px);
	border-top: 1px solid rgba(255, 255, 255, 0.2);
	border-left: 1px solid rgba(255, 255, 255, 0.2);
	box-shadow: 5px 5px 30px rgba(0,0,0,0.2);
	}

	.container .calculator {
	position: relative;
	display: grid;
	}

	.container .calculator .value {
	grid-column: span 4;
	height: 140px;
	width: 300px;
	text-align: right;
	border: none;
	outline: none;
	padding: 10px;
	font-size: 30px;
	background: transparent;
	color: #fff;
	border-bottom: 1px solid rgba(255, 255, 255, 0.5);
	border-right: 1px solid rgba(255, 255, 255, 0.5);
	}

	.container .calculator span {
	display: grid;
	place-items: center;
	width: 75px;
	height: 75px;
	font-size: x-large;
	color: #fff;
	cursor: pointer;
	border-bottom: 1px solid rgba(255, 255, 255, 0.5);
	border-right: 1px solid rgba(255, 255, 255, 0.5);
	transition: 0.5s;
	}

	.container .calculator span:hover {
	transition: 0s;
	background: rgba(255, 255, 255, 0.05);
	}

	.container .calculator span:active {
	background: green;
	color: #192f00;
	font-size: 24px;
	font-weight: 500;
	}

	.container .calculator .clear {
	grid-column: span 2;
	width: 150px;
	background: rgba(255, 255, 255, 0.05);
	}

	.container .calculator .plus {
	grid-row: span 2;
	height: 150px;
	}

view raw style.css hosted with ❤ by GitHub

JavaScript Code

Open the script.js file and add the following JavaScript code to the simple calculator:

	VanillaTilt.init(document.querySelector(".container"), {
	max: 25,
	speed: 400
	});

view raw script.js hosted with ❤ by GitHub

Obtain images and vanilla-tilt.js :- https://github.com/official-sharmaji/simple-calculator

Code with Ranjan

Search This Blog

Create a simple calculator using HTML, CSS, and JavaScript.

Preview: Building a calculator today

HTML Code

JavaScript Code

Comments

Post a Comment

	<!DOCTYPE html>
	<html>
	<head>
	<title>Calculator</title>
	<link rel="stylesheet" type="text/css" href="style.css">
	<link rel="icon" type="image/png" href="calculator.png">
	</head>
	<body>
	<section>
	<div class="container">
	<form class="calculator" name="calc">
	<input type="text" readonly class="value" name="txt">
	<span class="num clear" onclick="calc.txt.value =''">C</span>
	<span class="num" onclick="document.calc.txt.value +='/'">/</span>
	<span class="num" onclick="document.calc.txt.value +=''"></span>
	<span class="num" onclick="document.calc.txt.value +='7'">7</span>
	<span class="num" onclick="document.calc.txt.value +='8'">8</span>
	<span class="num" onclick="document.calc.txt.value +='9'">9</span>
	<span class="num" onclick="document.calc.txt.value +='-'">-</span>
	<span class="num" onclick="document.calc.txt.value +='4'">4</span>
	<span class="num" onclick="document.calc.txt.value +='5'">5</span>
	<span class="num" onclick="document.calc.txt.value +='6'">6</span>
	<span class="num plus" onclick="document.calc.txt.value +='+'">+</span>
	<span class="num" onclick="document.calc.txt.value +='1'">1</span>
	<span class="num" onclick="document.calc.txt.value +='2'">2</span>
	<span class="num" onclick="document.calc.txt.value +='3'">3</span>
	<span class="num" onclick="document.calc.txt.value +='0'">0</span>
	<span class="num" onclick="document.calc.txt.value +='00'">00</span>
	<span class="num" onclick="document.calc.txt.value += '.'">.</span>
	<span class="num" onclick="document.calc.txt.value =eval(calc.txt.value)">=</span>
	</form>
	</div>
	</section>
	<script src="vanilla-tilt.js"></script>
	<script src="script.js"></script>
	</body>
	</html>