How I Created A Simple Calculator App With Just Simple Line Of Javascript
Tags: javascript, beginners, webdev, tutorial
Published: 2023-04-16 14:06:09


In this article i will share with you on how i designed a simple calculator site using **HTML CSS and Javascript**.
I have seen a lot of people designing calculator site code and when i go through there code, I keep wondering that there must be an easy way to do this. We all know calculator site a among a beginner project which helps to build your javascript knowledge.
this is my method of designing the site:

## Step 1:Create the basic structure of the calculator
First i created a main tag which wrap where the answer will be display and the button also.
```Html
<main>
			<!--where the text and the answer will be displayed-->
			<div class="answer" id="answer"></div>
			<!--where the button will be using grid to display it-->
			<div class="grid"></div>
</main>
```

## Step 2: Styled the aspect where the answer display
to style that aspect i first make sure it takes the whole width, I aligned the text to the right cause it's left by default. I also gave it an height cause i need it to have space.

```Html
<div class="answer" id="answer"></div>
```
```Css
.answer {
	height: 11vh;
	font-weight: bolder;
	font-size: 2rem;
	text-align: right;
	width: 100%;
	padding-top: 2rem;
	margin-bottom: 27px;
}
```

## Step 3:Added all the button
I added the button in a class called grid cause the button will be displayed  4 in a row. so i used display grid to do these.

```Html
<div class="grid">
				<div class="btn btn1">c</div>
				<div class="btn btn1">ce</div>
				<div class="btn btn1">%</div>
				<div class="btn btn1">/</div>
				<div class="btn">7</div>
				<div class="btn">8</div>
				<div class="btn">9</div>
				<div class="btn btn1">*</div>
				<div class="btn">4</div>
				<div class="btn">5</div>
				<div class="btn">6</div>
				<div class="btn btn1">-</div>
				<div class="btn">1</div>
				<div class="btn">2</div>
				<div class="btn">3</div>
				<div class="btn btn1">+</div>
				<div class="btn">0</div>
				<div class="btn btn1">=</div>
</div>
```
```Css
.grid {
	grid-column-gap: 57px;
	grid-row-gap: 60px;
	place-items: center;
	display: grid;
	grid-template-columns: repeat(4, 1fr);
}
```
## Step 4: Styled the button element
when styling the button i gave it same width and height cause i want it to have a `border-radius:50% `. also displayed it grid so i can center the element using `place-items:center`.
```Css
.btn {
	display: grid;
	width: 40px;
	height: 40px;
	border-radius: 50%;
	text-align: center;
	place-items: center;
	cursor: pointer;
}
.btn:hover {
	background-color: #d4d6d8;
}
```
## Step 5: Activating the Calculator button using Javascript
Now i have activated each button using javascript code. First i set constants to the class and id. Here `".btn", "#answer"`
```Javascript
const btns = document.querySelectorAll(".btn");
const answer = document.getElementById("answer");
```
then i cycle through the btn using a foreach so each type a particular button is clicked it should get the textcontent of the value which was stored in a let variable called click.

```Javascript
btn.addEventListener("click", (e) => {
		let click = e.target.textContent;)
}
```
After that we need to check if the textcontent we clicked is `c , ce, =` if it's any of these do something.
```Javascript

btns.forEach((btn) => {
	btn.addEventListener("click", (e) => {
		let click = e.target.textContent;

		switch (click) {
			case "=":
				answer.textContent = eval(answer.textContent);
				break;
			case "c":
				answer.textContent = "";
				break;
			case "ce":
				answer.textContent = answer.textContent.substr(
					0,
					answer.textContent.length - 1
				);
				break;
			default:
				answer.textContent += click;
		}
	});
});
```

Hope you know the basic of Javascript and understand javascript structure above.

Hopefully this article have explained how to design a calculator using Html Css and Javascript.