Hey what’s up everyone!
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 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.
Step 1: First you need to open ‘script.js’ file.
I have included all the necessary comments in the above codes, so that you can easily understand the logic of this script.
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