In this tutorial, i will teach you how to build a simple calculator using JavaScript.
This tutorial assume that you’re not a novice in HTML and CSS, so i won’t explain the HTML and CSS codes in details. If you wish you to learn HTML, CSS and Bootstrap, [B]click here to follow my live coding thread here [/B]
Feel free to ask to drop your questions below or contact me if you have any projects you want to execute. PM me or Email: [email protected]
We’ll need two files for this simple project: HTML and CSS file. Our JavaScript will be In-line JavaScript.
[CODE=html]
Simple JavaScript mainCalculatorSimple JavaScript Calculator
[/CODE]
In the HTML code above, the JavaScript onclick event performs the calculator when a button input is called. It performs to operation using the form id, text input name and the value. for 0 to 9 inputs, it adds the value to the form text input area. For the 0 input field, the value in the onclick event isn’t enclosed in a quote ’ '.
For equal to operator, we use the evaluation function eval() to evaluate the form id, text input name and the value and also you don’t include the plus sign (+) because you’re not adding it to the text input area. For clear (c), we keep and empty space between the quotes ’ ’ which tells the device to empty the input field when the button is clicked.
[CODE]#calculatorWrapper {
width: 600px;
height: auto;
background: #000;
border: 3px solid rgb(255, 0, 0);
border-radius: 15px;
margin: 0 auto;
}
input[type=button] {
width: 20%;
margin: 2%;
font-size: 20px;
font-weight: 600px;
line-height: 1.5;
color: #fff;
background: #553945;
border: 1px solid yellow;
}
input[type=button]:hover {
color: #ff0000;
}
input[type=text] {
width: 90%;
font-size: 20px;
margin: 1% 1% 1% 4%;
color: #ff0000;
background:#fff;
font-weight: bold;
border: 2px solid yellow;
}
input[type=text]:hover {
background: rgb(241, 216, 216);
border: 3px double blue;
}
h1 {
text-align: center;
}[/CODE]
[SIZE=5]You should get This[/SIZE]
[ATTACH=full]264674[/ATTACH]