 |
| Simple Calculator |
In this article, we will create a calculator using HTML and CSS. Before we start the tutorial today, we should know first what is calculator. Calculator is something used for making mathematical calculations, in particular a small electronic device with a keyboard and a visual display.
So in this article, we would learn how to create a workable calculator for some easy calculation which can be use at the online website or using it offline ( Only the person who have source code can use it in their devices.)
Tutorial
Let's start the tutorial today! First, we should prepared the directory which have included two file : index.html and style.css
HTML CODE
In the index.html file, we should write some code first to the body of page, this is the basic for the HTML.
After that, here is the source code for the body of calculator. You can just copy and paste the inside the <body> tag
Once have done, the calculator should working now. But it will not look good because we still didn't write some CSS code to the calculator. Before I post the CSS code. I will explaine some principle about why the calculator work.
I have use a <form> element to include the whole calculator. And also, I have put the value in every input. So, when we click the button, it will trigger click event by the "onclick" attribute. After that the value in the input which you have clicked will be submitted to input named "result" in the form and display the number. Here is the onclick event : onclick="forms.answer.value += '8'" which means add a number of 8 to the display number input. You should know some basic mathematics of JavaScript so that you can easily understand what does this code do.