๐Ÿฑโ€๐Ÿ’ปBuilding a Calculator App in JavaScript + HTML + CSS (Easy Approach)

Calculator Program HTML, CSS, JS
Calculator Program Poster

Letโ€™s build a calculator using HTML, CSS, JS. ๐Ÿ‘ป

This will be a very simple calculator running on any browser. Here is the recap of all the sections you will be looking ahead:

  1. Creating a structure using HTML.
  2. Adding color and alignment with CSS file.
  3. Finally, we will add functionality. Like if you press ADD, then your calculator must understand and show you the results.

Creating a Structure using HTML ๐ŸŒ

HTML 5 base structure
HTML file index.html base structure

First, create a base HTML file as above and from here we will be adding code elements to the body section. Also, we will be including CSS file and JS file, but that we will understand in the latter part of the article.

Below is image to representation to understand the structure of the calculator program ๐Ÿงฉ

Calculator Program Structure

Here you can see our program is divided into 3 parts i.e., Screen, Button, Button Row section.

Understanding the code โš™

  1. At the top, a <div> with class components, acting as a parent to different sections of our calculator.
  2. Next, a <section> tag which acts a screen holding 0 i.e., zero as initial value.
  3. Next, there is another <div> with class button-sections, which holds all the buttons. Inside this, there are 5 more <div>โ€™s acting as a single row of button section.
  4. In addition to point 3, Inside <div> with class button-row, we have <button> tag with class cal-button, but you might be wondering why the button in the first button-section div having class as double and the button in the last button-section div having class as a triple. This is mainly to target these buttons to style as covering space equal to 2 times or 3 times of normal button size.

๐Ÿ–Œ Adding color and alignment with CSS file ๐ŸŽจ

Pretty basic right, now our target look is:

So let's see the code to style our app, make a new file ๐Ÿ‘จโ€๐Ÿ’ป index.css and ๐Ÿ“ฆpaste the following code in it:

๐Ÿ‘‰

* {

box-sizing: border-box;

}

๐Ÿ‘‰

body {

padding: 0;

margin: 0;

}

๐Ÿ‘‰

.component {

background-color: black;

color: white;

width: 500px;

padding: 5px;

}

๐Ÿ‘‰

.screen {

text-align: right;

padding: 30px 20px;

color: white;

font-size: 30px;

}

๐Ÿ‘‰

.cal-button {

padding: 20px 20px;

text-align: right;

background-color: #d8d9db;

height: 100px;

width: 23.75%;

border: none;

border-radius: 0;

font-size: 30px;

text-align: center;

cursor: pointer;

border-radius: 3%;

}

๐Ÿ‘‰

.double {

width: 49.1%;

}

๐Ÿ‘‰

.triple {

width: 74.5%;

}

๐Ÿ‘‰

.button-row {

display: flex;

justify-content: space-between;

align-content: stretch;

margin-bottom: 1.5%;

}

๐Ÿ‘‰

.cal-button:last-child {

background-color: rgb(255, 129, 107);

color: white;

}

๐Ÿ‘‰

.cal-button:last-child:hover {

background-color: tomato;

}

๐Ÿ‘‰

.cal-button:last-child:active {

background-color: red;

}

๐Ÿ‘‰

.cal-button:hover {

background-color: gray;

}

๐Ÿ‘‰

.cal-button:active {

background-color: rgb(73, 73, 73);

}

After that โฌ import CSS file in your HTML file like:

<link rel=โ€stylesheetโ€ href=โ€index.cssโ€>

And now you ๐Ÿ˜‹ save it and ๐Ÿ” refresh the page with a fresh new look.

Pretty awesome ๐Ÿคœ right, you are done with structure and style, now left with functionality only.

๐Ÿšฒ Adding functionality, creating new file Index.js

Create a new javascript file name it index.js and paste the following code:

๐Ÿ‘‰ Declaring variables to

const screen = document.querySelector(โ€œ.screenโ€);

let buffer = โ€œโ€;

let operator = โ€œโ€;

let previousNumber;

๐Ÿ‘‰ function to check input value is number or non-number

function handleInput(value) {

if (isNaN(value)) {

handleSymbol(value); }

else {

handleNumber(value);

} }

๐Ÿ‘‰ Everytime โ€œ=โ€ is pressed result is calculated and showed on the screen

function calculateAnswer() {

if (operator === null) { return; }

else {

switch (operator) {

case โ€œ+โ€:

screen.innerText = parseInt(previousNumber) + parseInt(buffer);

break;

case โ€œ-โ€:

screen.innerText = parseInt(previousNumber) โ€” parseInt(buffer);

break;

case โ€œ*โ€:

screen.innerText = parseInt(previousNumber) * parseInt(buffer);

break;

case โ€œ/โ€:

screen.innerText = parseInt(previousNumber) / parseInt(buffer);

break;

}

buffer = screen.innerText;

operator = null;

} }

๐Ÿ‘‰ If input received any symbol

function handleSymbol(value) {

switch (value) {

case โ€œ/โ€:

case โ€œ*โ€:

case โ€œ-โ€:

case โ€œ+โ€:

operator = value;

previousNumber = buffer;

buffer = โ€œโ€;

screen.innerText = 0;

break;

case โ€œCโ€:

buffer = 0;

rerender();

break;

case โ€œโฌ…โ€:

if (screen.innerText.length < 2) {

buffer = 0;

} else {

buffer = buffer.slice(0, -1);

}

rerender();

break;

case โ€œ=โ€:

calculateAnswer();

}

}

๐Ÿ‘‰ If input received is a number

function handleNumber(value) {

if (buffer === 0) {

buffer = value;

} else {

buffer = buffer + value.toString();

}

rerender();

}

๐Ÿ‘‰ For updating screen value after every process

function rerender() {

screen.innerText = buffer;

}

๐Ÿ‘‰ First function to get executed when we launch the app

function init() {

document

.querySelector(โ€œ.button-sectionsโ€)

.addEventListener(โ€œclickโ€, function (e) {

handleInput(e.target.innerText);

}) ; }

๐Ÿ‘‰ Calling the init function

init();

โœ… Thatโ€™s all you need for your calculator app to up and running.

Thank You. Continue to give my best.

Learn. Make. Teach. Repeat. ๐Ÿ‘จโ€๐Ÿซ

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