Make your Own Calculator using HTML, CSS and JavaScript
Hey what’s up everyone!
Today, we’re going to make a JavaScript calculator using Html, CSS and JavaScript.
Our final output like this.
Final Output (Click the Link): https://akilasachintha.github.io/HTML-CSS-JS-Calculator/
First of all, let’s start with our HTML and CSS. Thanks to the CSS grid, we can quickly get a nice calculator shape on the page.
So, let’s get started.
Step 1: We will create a folder anywhere on your computer with three files index.html, style.css and script.js
Step 2: Then open ‘index.html’ in text editor like Visual Studio Code, Notepad++ or Sublime Text. First we will create the structure of the calculator. It will do by using HTML.
Step 3: Html 5 boilerplate code template declared as follows. In a VS Code type html:5 and press enter, you can get boilerplate code.
Step 4: First, We need to include the font link, CSS style sheet link and JavaScript link inside the html header tag.
Step 5: Now put the below HTML tags inside the body tag. It completes the structure of our calculator one by one.
Here we first use two <p> tags to display the history value and the current value output of the display. Next we need to create the keys on the calculator. For that, <button> tags are used. We use unique ID's and classes for each button to identify uniquely.
Then, We will go to beautify our calculator. It is done through CSS.
Step 1: First we need to open the ‘style.css’ file.
Step 2: Next, we use the relevant CSS styles for the whole body using <body> tag.
First we need to zero the margin. Then use the ‘Open Sans’ font as the default font.
Step 3: Now lets style our calculator using CSS. The code will be as follows.
We can get a beautiful calculator using the CSS styles mentioned above.
Now we’re going to add interactivity to our static page. Let’s dive into the JavaScript code file “script.js”
Step 1: First you need to open ‘script.js’ file.
Step 2: Then you can get the relevant functions as you want by applying the following JavaScript code.
I have included all the necessary comments in the above codes, so that you can easily understand the logic of this script.
Summary
If you followed the above steps, you learned how to create a basic calculator. Now, I would suggest that you create your own calculator with the help of this article. You can change the user interface and add more interaction to it.
You can download the source code also: https://github.com/akilasachintha/HTML-CSS-JS-Calculator
