Creating a Simple Calculator using HTML and Pure CSS

Table of Contents

1. Project Introduction
2. HTML Code
3. CSS Code
4. Conclusion
5. Preview

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.

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.

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.

Here's an explanation of the CSS code:

1. Body Styling

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

• background-color: #424242: Sets the background color of the body to a dark gray.
• font-family: Tahoma: Sets the font family for the body to Tahoma.

2. Container Styling

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

• display: flex: Uses the flexbox layout.
• align-items: center: Centers items vertically.
• justify-content: center: Centers items horizontally.
• height: 100vh: Sets the height to 100% of the viewport height.
• width: 100vw: Sets the width to 100% of the viewport width.

3. Container Box Styling

#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, 0.6), inset -100px 0px 100px rgba(255, 255, 255, 0.5);
}

• width: 200px: Sets the width of the container.
• padding: 8px 8px 20px 8px: Adds padding inside the container.
• margin: 20px auto: Centers the container horizontally with top and bottom margins.
• background-color: #ABABAB: Sets the background color to a light gray.
• border-radius: 4px: Rounds the corners.
• border-top, border-right, border-bottom, border-left: Adds borders with different colors.
• box-shadow: Adds a shadow effect outside and an inset shadow inside.

4. Display Styling

#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, 0.2);
  font-size: 28px;
  color: #666;
  text-align: right;
  font-weight: 400;
}

• display: block: Sets the display to block.
• margin: 15px auto: Centers the element with top and bottom margins.
• height, width: Sets the dimensions of the display.
• padding: 0 10px: Adds horizontal padding.
• border-radius: 4px: Rounds the corners.
• border-top, border-right, border-bottom, border-left: Adds borders with different colors.
• background-color: #FFF: Sets the background color to white.
• box-shadow: Adds inset shadows.
• font-size: 28px: Sets the font size.
• color: #666: Sets the text color to gray.
• text-align: right: Aligns the text to the right.
• font-weight: 400: Sets the font weight.

5. Button Styling

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

• display: inline-block: Sets the display to inline-block.
• margin: 2px: Adds margin around the button.
• width, height: Sets the dimensions of the button.
• font-size: 16px: Sets the font size.
• font-weight: bold: Sets the font weight to bold.
• border-radius: 4px: Rounds the corners.

6. Math Buttons Styling

.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;
}

• margin: 2px 2px 6px 2px: Adds margins around the math buttons.
• color: #FFF: Sets the text color to white.
• text-shadow: -1px -1px 0px #44006F: Adds a text shadow.
• background-color: #434343: Sets the background color to dark gray.
• border-top, border-right, border-bottom, border-left: Adds borders with different colors.
• box-shadow: Adds shadows.

7. Digits Styling

.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;
}

• color: #181818: Sets the text color to dark gray.
• text-shadow: 1px 1px 0px #FFF: Adds a text shadow.
• background-color: #EBEBEB: Sets the background color to light gray.
• border-top, border-right, border-bottom, border-left: Adds borders with different colors.
• border-radius: 4px: Rounds the corners.
• box-shadow: Adds shadows.

8. Hover Effects for Buttons

.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;
}

• background-color: #FFBA75: Changes the background color on hover.
• box-shadow: Changes the shadows on hover.
• border-top, border-right, border-bottom, border-left: Changes the border colors on hover.

9. Clear Button Styling

#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;
}

• color: #FFF: Sets the text color to white.
• text-shadow: -1px -1px 0px #44006F: Adds a text shadow.
• background-color: #D20000: Sets the background color to a red shade.
• border-top, border-right, border-bottom, border-left: Adds borders with different colors.
• box-shadow: Adds shadows.

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.

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.