Creating a Simple Calculator using HTML and Pure CSS

By Faraz - July 16, 2022

Learn how to create a simple calculator from scratch using HTML, and CSS in this step by step guide. Perfect for beginners in web development!

Join us on Telegram

Read Also how to create a password validation form in javascript.jpg

How to Create a Password Validation Form in JavaScript?

As a beginner in web development, one of the projects that you can undertake is creating a simple calculator. This project will not only help you understand the basics of HTML and CSS, but it will also give you an insight into how you can add functionality to a user interface using JavaScript.

A calculator is a must-have tool for all users, even if you know how to add, subtract, multiply, and divide digits. It saves your time when doing some simple math. HTML calculator is used to performing basic mathematical operations like Addition, subtraction, multiplication, and division. In this guide, we will go through the process of building a calculator from scratch using HTML and CSS.

Let's start making these a simple calculator Using HTML, and CSS step by step.

Join My Telegram Channel to Download the Project: Click Here

Prerequisites:

Before starting this tutorial, you should have a basic understanding of HTML, and CSS. Additionally, you will need a code editor such as Visual Studio Code or Sublime Text to write and save your code.

Source Code

Step 1 (HTML Code):

To get started, we will first need to create a basic HTML file. In this file, we will include the main structure for our calculator.

We will start by creating a div element and giving it the class of container. This div will act as a container for our calculator.Next, we will add buttons and an input field to the calculator. We will use the button element to create the buttons, and the input element to create the input field.

After creating the files just paste the following codes into your file. Make sure to save your HTML document with a .html extension, so that it can be properly viewed in a web browser.

This is the basic structure of our calculator using HTML, and now we can move on to styling it using CSS.

<!DOCTYPE html>
<html lang="en">
  <head>
    <title>Home</title>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width" />
    <link rel="stylesheet" href="styles.css" />
  </head>
  <body>
  <div class="container">
	<fieldset id="container">
		<form name="calculator">

			<input id="display" type="text" name="display" readonly>

			<input class="button digits" type="button" value="7" onclick="calculator.display.value += '7'">
			<input class="button digits" type="button" value="8" onclick="calculator.display.value += '8'">
			<input class="button digits" type="button" value="9" onclick="calculator.display.value += '9'">
			<input class="button mathButtons" type="button" value="+" onclick="calculator.display.value += ' + '">
			<br>
			<input class="button digits" type="button" value="4" onclick="calculator.display.value += '4'">
			<input class="button digits" type="button" value="5" onclick="calculator.display.value += '5'">
			<input class="button digits" type="button" value="6" onclick="calculator.display.value += '6'">
			<input class="button mathButtons" type="button" value="-" onclick="calculator.display.value += ' - '">
			<br>
			<input class="button digits" type="button" value="1" onclick="calculator.display.value += '1'">
			<input class="button digits" type="button" value="2" onclick="calculator.display.value += '2'">
			<input class="button digits" type="button" value="3" onclick="calculator.display.value += '3'">
			<input class="button mathButtons" type="button" value="x" onclick="calculator.display.value += ' * '">
			<br>
			<input id="clearButton" class="button" type="button" value="C" onclick="calculator.display.value = ''">
			<input class="button digits" type="button" value="0" onclick="calculator.display.value += '0'">
			<input class="button mathButtons" type="button" value="=" onclick="calculator.display.value = eval(calculator.display.value)">
			<input class="button mathButtons" type="button" value="/" onclick="calculator.display.value += ' / '">
		</form>
	</fieldset>
</div>
  </body>
</html>

Read Also

CSS Loaders: Creating Squid Game-Inspired Animations Using HTML and CSS

Step 2 (CSS Code):

Once the basic HTML structure of the calculator is in place, the next step is to add styling to the calculator using CSS. CSS allows us to control the visual appearance of the website, including things like layout, color, and typography.

Next, we will create our CSS file. In this section, we will use CSS to style our calculator. We will give it a basic layout, change the font and background color, and add hover effects to the buttons.

This will give our calculator an upgraded presentation. Create a CSS file with the name of styles.css and paste the given codes into your CSS file. Remember that you must create a file with the .css extension.

body {
	background-color: #424242;
	font-family: Tahoma;
}

.container {
	display: flex;
	align-items: center;
	justify-content: center;
	height: 100vh;
	width: 100vw;
}

#container {
	width: 200px;
	padding: 8px 8px 20px 8px;
	margin: 20px auto;
	background-color: #ABABAB;
	border-radius: 4px;
	border-top: 2px solid #FFF;
	border-right: 2px solid #FFF;
	border-bottom: 2px solid #C1C1C1;
	border-left: 2px solid #C1C1C1;
	box-shadow: -3px 3px 7px rgba(0, 0, 0, .6), inset -100px 0px 100px rgba(255, 255, 255, .5);
}

#display {
	display: block;
	margin: 15px auto;
	height: 42px;
	width: 174px;
	padding: 0 10px;
	border-radius: 4px;
	border-top: 2px solid #C1C1C1;
	border-right: 2px solid #C1C1C1;
	border-bottom: 2px solid #FFF;
	border-left: 2px solid #FFF;
	background-color: #FFF;
	box-shadow: inset 0px 0px 10px #030303, inset 0px -20px 1px rgba(150, 150, 150, .2);
	font-size: 28px;
	color: #666;
	text-align: right;
	font-weight: 400;
}

.button {
	display: inline-block;
	margin: 2px;
	width: 42px;
	height: 42px;
	font-size: 16px;
	font-weight: bold;
	border-radius: 4px;
}

.mathButtons {
	margin: 2px 2px 6px 2px;
	color: #FFF;
	text-shadow: -1px -1px 0px #44006F;
	background-color: #434343;
	border-top: 2px solid #C1C1C1;
	border-right: 2px solid #C1C1C1;
	border-bottom: 2px solid #181818;
	border-left: 2px solid #181818;
	box-shadow: 0px 0px 2px #030303, inset 0px -20px 1px #2E2E2E;
}

.digits {
	color: #181818;
	text-shadow: 1px 1px 0px #FFF;
	background-color: #EBEBEB;
	border-top: 2px solid #FFF;
	border-right: 2px solid #FFF;
	border-bottom: 2px solid #C1C1C1;
	border-left: 2px solid #C1C1C1;
	border-radius: 4px;
	box-shadow: 0px 0px 2px #030303, inset 0px -20px 1px #DCDCDC;
}

.digits:hover,
.mathButtons:hover,
#clearButton:hover {
	background-color: #FFBA75;
	box-shadow: 0px 0px 2px #FFBA75, inset 0px -20px 1px #FF8000;
	border-top: 2px solid #FFF;
	border-right: 2px solid #FFF;
	border-bottom: 2px solid #AE5700;
	border-left: 2px solid #AE5700;
}

#clearButton {
	color: #FFF;
	text-shadow: -1px -1px 0px #44006F;
	background-color: #D20000;
	border-top: 2px solid #FF8484;
	border-right: 2px solid #FF8484;
	border-bottom: 2px solid #800000;
	border-left: 2px solid #800000;
	box-shadow: 0px 0px 2px #030303, inset 0px -20px 1px #B00000;
}

Final Output:

Read Also Create Sticky Navbar with Tailwind CSS.jpg

Create Sticky Navbar with Tailwind CSS

Conclusion:

In this guide, we have gone through the process of creating a simple calculator using HTML, CSS, and JavaScript. We started by setting up the HTML structure and adding buttons and an input field. Then, we used CSS to style the calculator, giving it a basic layout, font and background color, and hover effects. Finally, we added functionality with JavaScript, allowing the user to input numbers and perform arithmetic operations.

Creating a calculator is a great way to get started with web development, as it allows you to practice using HTML, CSS, and JavaScript in a simple project. By following the steps outlined in this guide, you can create your own calculator and make changes to it to meet your needs. Whether you're a beginner or an experienced developer, creating a calculator is a fun and rewarding project that can help you improve your web development skills.

In conclusion, building a calculator from scratch can seem like a daunting task, but by breaking it down into smaller, manageable steps, you can make the process much easier. Don't be afraid to experiment and make changes to your calculator until it meets your needs. Happy coding!

That’s a wrap!

I hope you enjoyed this post. Now, with these examples, you can create your own amazing page.

Did you like it? Let me know in the comments below 🔥 and you can support me by buying me a coffee.

And don’t forget to sign up to our email newsletter so you can get useful content like this sent right to your inbox!

Thanks!
Faraz 😊