Create a calculator using HTML, CSS and JavaScript
Calculator provide a quick and efficient way to perform various mathematical calculations, saving time compared to manual methods.
Calculators are valuable for data analysis, allowing users to process and analyze numerical data easily.
Calculators are very helpful for student in learning and solving mathematical problems across various subjects.
Let's learn step by step that how to create JavaScript calculator
Step 1 - Create an HTML File:
In the first step,Create an HTML file as the foundation for your JavaScript calculator. Use the '<html>', '<head>' and '<body>' tags to structure your document. See the image,
Step 2 - create buttons
In the second step,
We will write in the body tag, first we have to take a div container then we have to take a form tag, and then we have to take input tag with "button type" and then we will give value (like 1,2,3…) in the input tag.
We have to give name to form and first input tag. See the image,
And then we will use 'onclink' to represent the value in the calculator.
We will use 'onclick' different types on all the buttons.
In all the numbers(1,2,3…) & (+, -, *, /), we have to use 'onclick' like this-
onclick="form1.answer.value+=(1,2,3...)"
where,
form1- name of form
answer - name of input tag in which we will represent the value
value - whatever is inside
In AC (All Clear), we have to use 'onclick' like this-
onclick="form1.answer.value=' ' "
where,
' '-means empty
In DEL (Delete), we have to use 'onclick' like this-
onclick="form1.answer.value=form1.answer.value.slice(0,-1)"
where,
slice - delete a letter
0 - for last letter
-1- only one letter
In '=', we have to use 'onclick' like this-
onclick="form1.answer.value=eval(form1.answer.value)"
where,
eval - for evaluate numeric values
Now we have to give 'CLASS' and 'ID' in all the inputs-
I have given 'cover' class in div container. And I have given 'cal' ID in first input in which, we will represent the value.
I have given 'btn' class in all the button except '=', and after that we will use CSS to design the calculator.
Step 3-Design the buttons using CSS
In the third step, we will do work on 'CLASS' and 'ID' to design the buttons and calculator.
See the image,
 |
'*' we use in CSS that's why we can apply design in complete webpage.'cal' id has already given to the first input, here we are working on first input in which we will represent the value of calculator.
'btn' class has already given to the all input except '=', here we are designing the buttons of calculator.
'sol' class has already given to the '=' button, here we are only design to the '=' button because I have created this button something different.
'cover' class has already given to the div container, and here we are working on border and background color of calculator.
'form input' I have used to design the background of calculator. And 'h1' I have used to design the heading.
And now see the output-
Post a Comment