Emmanuel Ndubuisi

Emmanuel Ndubuisi

trying my best

Making a Calculator with Basic HTML, CSS and JavaScript 


Hi earthling,

In this series, we are going to be making a simple calculator with basic HTML, CSS and JavaScript. Our calculator will only able to perform basic math operations: addition, subtraction, multiplication and division. To better understand this tutorial you would need to have a little knowledge of HTML and CSS.

If you don’t already know them, no need to worry. I simplified this tutorial as best as I could, so you would survive 🙂

So what exactly do we need to build this?

As you might have already guessed, we would need to create “buttons” for inputting values and a screen for displaying these values.

Well, basically, that’s it!

But in fancier terms, these are the components we need:

· A display area for displaying operators, operands and solutions.

· Buttons for inputting values to the display screen

Visually, a calculator is a table enclosed in a container. And as you should already know tables are made of rows and columns with cells to contain table data.

 

Now you get the concepts, let’s get started!

This is the basic format for HTML documents.

<html>
<head></head>
<body>
<! -- Content -- >
</body>
</html>

If you don’t already understand how to deploy HTML scripts you should take a look at this short tutorial.

The visible part of a webpage goes into the <body> </body> tag.

Before I go any further, it’s essential you understand certain HTML terminologies (fancy words) such as tags, attributes and elements.

Tags: Tags are basic labels that define and separate parts of your markup into elements. They are comprised of a keyword surrounded by angle brackets <>. Content goes between two tags and the closing one is prefixed with a slash (Note: there are some self-closing HTML tags, like image tags).

<!-- This is an opening and closing paragraph tag -->

<p></p>

Attributes: A property of an HTML element used to provide additional instructions to a given HTML tag. The attribute is specified in the opening HTML tag.

<!-- Here, the class is the attribute -->

<p class=""></p>

Elements: An HTML element usually consists of a opening tag and end tag, with the content inserted in between.

<!-- The element spans from the opening tag to the closing tag -->

<p class="paragraph">This is a paragraph.</p>

Okay! Enough with the basics. Let’s dance.