<html lang="en"><head>
<title> JavaScript Calculator </title>
<style>
h1 {
text-align: center;
padding: 23px;
background-color: skyblue;
color: white;
}
#clear{
width: 270px;
border: 3px solid gray;
border-radius: 3px;
padding: 20px;
background-color: red;
}
.formstyle
{
width: 300px;
height: 530px;
margin: auto;
border: 3px solid skyblue;
border-radius: 5px;
padding: 20px;
}
input
{
width: 20px;
background-color: green;
color: white;
border: 3px solid gray;
border-radius: 5px;
padding: 26px;
margin: 5px;
font-size: 15px;
}
#calc{
width: 250px;
border: 5px solid black;
border-radius: 3px;
padding: 20px;
margin: auto;
}
</style>
</head>
<body>
<h1> Calculator Program in JavaScript </h1>
<div class="formstyle">
<form name="form1">
<!-- This input box shows the button pressed by the user in calculator. -->
<input id="calc" type="text" name="answer"> <br> <br>
<!-- Display the calculator button on the screen. -->
<!-- onclick() function display the number prsses by the user. -->
<input type="button" value="1" onclick="form1.answer.value += '1' ">
<input type="button" value="2" onclick="form1.answer.value += '2' ">
<input type="button" value="3" onclick="form1.answer.value += '3' ">
<input type="button" value="+" onclick="form1.answer.value += '+' ">
<br> <br>
<input type="button" value="4" onclick="form1.answer.value += '4' ">
<input type="button" value="5" onclick="form1.answer.value += '5' ">
<input type="button" value="6" onclick="form1.answer.value += '6' ">
<input type="button" value="-" onclick="form1.answer.value += '-' ">
<br> <br>
<input type="button" value="7" onclick="form1.answer.value += '7' ">
<input type="button" value="8" onclick="form1.answer.value += '8' ">
<input type="button" value="9" onclick="form1.answer.value += '9' ">
<input type="button" value="*" onclick="form1.answer.value += '*' ">
<br> <br>
<input type="button" value="/" onclick="form1.answer.value += '/' ">
<input type="button" value="0" onclick="form1.answer.value += '0' ">
<input type="button" value="." onclick="form1.answer.value += '.' ">
<!-- When we click on the '=' button, the onclick() shows the sum results on the calculator screen. -->
<input type="button" value="=" onclick="form1.answer.value = eval(form1.answer.value) ">
<br>
<!-- Display the Cancel button and erase all data entered by the user. -->
<input type="button" value="Clear All" onclick="form1.answer.value = ' ' " id="clear">
<br>
</form>
</div>
<script>
// program to create a simple calculator using the if...else...if in JavaScript.
// take the operator from the user through prompt box in JavaScript.
const operator = prompt('Enter operator to perform the calculation ( either +, -, * or / ): ');
// accept the number from the user through prompt box
const number1 = parseFloat(prompt ('Enter the first number: '));
const number2 = parseFloat(prompt ('Enter the second number: '));
let result; // declaration of the variable.
// use if, elseif and else keyword to define the calculator condition in JavaScript.
if (operator == '+') { // use + (addition) operator to add two numbers
result = number1 + number2;
}
else if (operator == '-') { // use - (subtraction) operator to subtract two numbers
result = number1 - number2;
}
else if (operator == '*') { // use * (multiplication) operator to multiply two numbers
result = number1 * number2;
}
else {
result = number1 / number2; // use / (division) operator to divide two numbers
}
// display the result of the Calculator
window.alert(" Result is" + result);
</script>
<!-- Write a program to build the Calculator in JavaScript. -->
<title>
Calculator Program in JavaScript
</title>
<!-- Begins the JavaScript Code -->
<script>
// Use insert() function to insert the number in textview.
function insert(num)
{
documentdocument.form1.textview.value = document.form1.textview.value + num;
}
// Use equal() function to return the result based on passed values.
function equal()
{
var exp = document.form1.textview.value;
if(exp)
{
document.form1.textview.value = eval(exp)
}
}
/* Here, we create a backspace() function to remove the number at the end of the numeric series in textview. */
function backspace()
{
var exp = document.form1.textview.value;
document.form1.textview.value = exp.substring(0, exp.length - 1); /* remove the element from total length ? 1 */
}
</script>
<!-- Start the coding for CSS -->
<style>
/* Create the Outer layout of the Calculator. */
.formstyle
{
width: 300px;
height: 545px;
margin: 20px auto;
border: 3px solid skyblue;
border-radius: 5px;
padding: 20px;
text-align: center;
background-color: grey;
}
/* Display top horizontal bar that contain some information. */
h1 {
text-align: center;
padding: 23px;
background-color: skyblue;
color: white;
}
input:hover
{
background-color: green;
}
*{
margin: 0;
padding: 0;
}
/* It is used to create the layout for calculator button. */
.btn{
width: 50px;
height: 50px;
font-size: 25px;
margin: 2px;
cursor: pointer;
background-color: red;
color: white;
}
/* It is used to display the numbers, operations and results. */
.textview{
width: 223px;
margin: 5px;
font-size: 25px;
padding: 5px;
background-color: lightgreen;
}
</style>
</body></html>
-------------------------------------------------
put it into this website: https://www.w3schools.com/js/tryit.asp?filename=tryjs_myfirst
delete everything first
Calculator.html
Comments
3 responses to “Calculator.html”
-
hi
-
lol
-
Please use the website that I used
Leave a Reply