Month: April 2022

Posted on

Calculator.html

<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: 330px;  
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