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

Calculator Program Poster

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

You are a (๐Ÿ‘จโ€๐ŸŽ“) student who started learning (๐Ÿ’ป)web technologies in college or you are a self-learner (Great step I appreciate ๐Ÿ‘). Then you must have come across the requirement to design a calculator program ๐Ÿงฎ. So here it is a very simple and functional calculator app that can be programmed within a day.

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 ๐ŸŒ

Iโ€™ll be using VS Code for this tutorial, you can use any Code Editor of your choice.

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 ๐ŸŽจ

In the previous section, we implemented the structure of our calculator app and this is how it looks:

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

To every action there will be some reaction ๐Ÿคž. This is what we are going to do with javascript file, in our case whenever a key is pressed in calculator app, index.js will define what need to done as a result. For example: when you press 1 + 1 is shows result as 2.

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. ๐Ÿ‘จโ€๐Ÿซ

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

Recommended from Medium

Introduction to Scala.js

Stimulus Use Cases

How to fetch all collectibles from phantom wallet connected to Solana network?

A list of maps to build a list of React components

React CSS resize SVG

Launch Your First Website with Domain.com and Google Cloud Platform

Reusable Components In React

Automatically download WebDriver Binaries

Let WebDriverManager manage your browserโ€™s Driver Executable

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
ATUL JAIN

ATUL JAIN

More from Medium

Our Experience Learning Frontend Web development (HTML, CSS, Tailwind and JavaScript) in Sideโ€ฆ

Difference Between HTML and CSS

Step-by-Step Guide to Optimize Your Web Page with Gump

Apply Different CSS Styles Based On Window Size (Responsively) Without Using JavaScript Windowโ€ฆ