How to develop A simple js calculator using HTML CSS and Javascript

prerequisite:

Technologies used:

Let’s Get Started:

Let’s Break Down Structure

Step 1: Lets Design Calculator Using HTML and CSS

<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="style.css" type="text/css">
<title>Calculator</title>
</head>
<div class="container">
<!-- Heading -->
<!-- Display Screen-->
<!-- Buttons-->
</div>

.Container

Outer container conatins All elements of calculator like calculator headind, display screen and buttons..container{        
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
max-width: 250px;
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%,-50%);
background-color: #4f9b9440;
box-shadow: rgba(214, 238, 236, 0.25) 0px 30px 60px -12px inset, rgba(15, 161, 130, 0.3) 0px 18px 36px -18px inset;
}
Display:flex;
flex-direction: column;
justify-content: center;
align-items: center;
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%,-50%);

#display

<input type="text" name="number" id="display" readonly>#display{
position: relative;
width: 98%;
border: none;
outline: none;
text-align: right;
font-size: 1.5rem;
font-weight: bold;
background-color:white;
}

.grid-container

<div class="grid-container">       
<!-- grid Items -->
</div>
.grid-container {
display: grid;
width: 100%;
grid-template-columns: auto auto auto auto;
justify-content: center;
padding: 3px;
}
.grid-item {
padding: 5px 10px;
width:59px ;
outline: none;
margin: 0.5px;
font-size: 1.5rem;
text-align: center;
border: none;
box-shadow: rgba(182, 182, 211, 0.25) 0px 30px 60px -12px inset, rgba(0, 0, 0, 0.3) 0px 18px 36px -18px inset;
}

Row 1:

<!-- row 1 -->
<button class="grid-item plus">+</button>
<button class="grid-item minus">-</button>
<button class="grid-item multiply">*</button>
<button class="grid-item divide">/</button>
.plus{
background-color:#F79F1F;
}
.minus{
background-color: #A3CB38;
}
.multiply{
background-color: #D980FA;
}
.divide{
background-color: #FFC312;
}

Row 2:

<!-- row 2 -->
<button class="grid-item">7</button>
<button class="grid-item">8</button>
<button class="grid-item">9</button>
<button class="grid-item equal">=</button>
.equal{
background-color: #29696b;
color: white;
grid-row: span 4;
}

Row 3:

<!-- row 3 -->
<button class="grid-item">4</button>
<button class="grid-item">5</button>
<button class="grid-item">6</button>

Row 4:

<!-- row 4 -->
<button class="grid-item">1</button>
<button class="grid-item">2</button>
<button class="grid-item">3</button>

Row 5:

<!-- row 5 -->
<button class="grid-item">0</button>
<button class="grid-item">.</button>
<button class="grid-item">C</button>

active selector:

.grid-item:active{
background-color: #757474;
}

Step 2: Let’s Implement javascript logic:

Methodology:

When you click on a button

const screenValue = document.querySelector("#display")
const buttonValue = document.querySelectorAll("button")
buttonValue.forEach(element => {
element.addEventListener('click', e => {
let buttonText = e.target.innerText;
});
});

NOTE:

function refreshCalculator() {
isOperator = true;
isdot = false;
isNumber = true;
screenValue.value = "0"
}
if (buttonText === "C") {
refreshCalculator();
}
else if (buttonText === '.' && !isdot) {
screenValue.value += buttonText;
isdot = true;
}
else if (buttonText === '+' && isOperator) {
// checking if display screen vaule is not equal to zero operator will b concatenate like 23+
if (screenValue.value != '0') {
screenValue.value += buttonText;
}
//if display value is 0 then + will be add as prefix of the operand
else {
screenValue.value = buttonText;
}
isOperator = false;
isNumber = true;
isdot = false;
}
else if (buttonText === '-' && isOperator) {
if (screenValue.value != '0') {
screenValue.value += buttonText;
}
else {
screenValue.value = buttonText;
}
isOperator = false;
isNumber = true;
isdot = false;
}
else if (buttonText === '*' && isOperator) {
if (screenValue.value != '0') {
screenValue.value += buttonText;
isOperator = false;
isNumber = true;
isdot = false;
}
else if (buttonText === '/' && isOperator) {
if (screenValue.value != '0') {
screenValue.value += buttonText;
isOperator = false;
isNumber = true;
isdot = false;
}
}
else if (buttonText >= '0' && buttonText <= 9 && isNumber) {
if (buttonText === '0' && screenValue.value === '0') {
//do nothing.
}
else if (screenValue.value === '0') {
//conver the 0 to the button value
screenValue.value = buttonText;
}
else {
//append 0 into the value
screenValue.value += buttonText;
}
// allow user to add operator after operand
isOperator = true;
}
else if (buttonText === '=') {
screenValue.value = eval(screenValue.value)
isNumber = false;
}

Recommendation:

--

--

--

Web Developer

Love podcasts or audiobooks? Learn on the go with our new app.

Recommended from Medium

Nec C++ Quiz — 0029

Vidmate on Android & Computer PC Guide

Scala functional programming: Functions as first class citizens

Static Libraries

Cracking The Course Of Digital Logic Design

Expanding Control with Guard Clauses

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store
zeeni zee

zeeni zee

Web Developer

More from Medium

Writing CSS More Efficiently; a Less CSS Tutorial

An image comparing the syntax of CSS with the Less CSS preprocessor.

Responsive index buttons that fill the screen

Example of tutorial end product

What I learned about Flex-box in CSS?

First Blog Post