Scribd
Upload
22 views7 pages

HTML - WPS Office

The document is an HTML file that creates a simple web-based calculator with functionalities for addition, subtraction, multiplication, and division. It includes input fields for two numbers and displays the results of the calculations in designated div elements. JavaScript functions handle the arithmetic operations and update the output field based on user input.

Uploaded by

Aamina Khatoon
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as DOCX, PDF, TXT or read online on Scribd
22 views7 pages

HTML - WPS Office

The document is an HTML file that creates a simple web-based calculator with functionalities for addition, subtraction, multiplication, and division. It includes input fields for two numbers and displays the results of the calculations in designated div elements. JavaScript functions handle the arithmetic operations and update the output field based on user input.

Uploaded by

Aamina Khatoon
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as DOCX, PDF, TXT or read online on Scribd
You are on page 1/ 7

<html>

<head>

<title> deno</title>

</head>

<body>

<input type="text" name="x" id="x" class="num1" value="" placeholder="Please enter value 1">

<input type="text" name="y" id="y" class="num1" value="" placeholder="Please enter value 2">

<input type="text" name="te" id="gdfg" class="num1" value="" placeholder="Output ">

<input type="button" value="Add" onclick="add()">

<input type="button" value="subtract" onclick="subtract()">

<input type="button" value="multiply" onclick="multiply()">

<input type="button" value="division" onclick="division()">

<div id="add">

</div>

<div id="subtract">

</div>

<div id="multiply">

</div>

<div id="division">

</div>

<script>

function add()

{ var x = document.getElementsByClassName("num1")[0].value;
var y = document.getElementsByClassName("num1")[1].value;

var s = parseInt(x)+parseInt(y);

document.getElementById("add").innerHTML ="add of two numbers: " +s;

document.getElementById("add").style.color="yellowgreen";

document.getElementById("add").style.backgroundColor="";

document.getElementById("add").style.borderRadius="10px";

document.getElementById("add").style.border="solid black";

document.getElementById("add").style.padding="10px";

document.getElementById("add").style.fontWeight="bold";

document.getElementById("add").style.margin="20px"

document.getElementById("gdfg").value = s;

function subtract()

{ var x = document.getElementsByClassName("num1")[0].value;
var y = document.getElementsByClassName("num1")[1].value;

if(x>y){

s= x-y;

else

s=y-x;

document.getElementById("subtract").innerHTML ="subtract of two numbers: " +s;

document.getElementById("subtract").style.color="red";

document.getElementById("subtract").style.backgroundColor="";

document.getElementById("subtract").style.borderRadius="10px";

document.getElementById("subtract").style.border="solid black";

document.getElementById("subtract").style.paddingLeft="10px";

document.getElementById("subtract").style.fontWeight="bold";
document.getElementById("subtract").style.height="20px";

document.getElementById("gdfg").value = s;

document.getElementById("subtract").style.margin="20px"

function multiply()

{ var x = document.getElementsByClassName("num1")[0].value;

var y = document.getElementsByClassName("num1")[1].value;

var s= x*y;

document.getElementById("multiply").innerHTML ="multiply of two numbers: " +s;

document.getElementById("multiply").innerHTML ="subtract of two numbers: " +s;

document.getElementById("multiply").style.color="red";

document.getElementById("multiply").style.backgroundColor="";

document.getElementById("multiply").style.borderRadius="10px";

document.getElementById("multiply").style.border="solid red";
document.getElementById("multiply").style.paddingLeft="10px";

document.getElementById("multiply").style.fontWeight="bold";

document.getElementById("multiply").style.margin="20px"

document.getElementById("gdfg").value = s;

function division()

{ var x = document.getElementsByClassName("num1")[0].value;

var y = document.getElementsByClassName("num1")[1].value;

if(y>0){

s=x/y;

else

s="Please enter second number greater than 0";


}

document.getElementById("division").innerHTML ="division of two numbers: " +s;

document.getElementById("gdfg").value = s;

document.getElementById("division").innerHTML ="add of two numbers: " +s;

document.getElementById("division").style.color="yellowgreen";

document.getElementById("division").style.backgroundColor="";

document.getElementById("division").style.borderRadius="10px";

document.getElementById("division").style.border="solid black";

document.getElementById("division").style.padding="10px";

document.getElementById("division").style.fontWeight="bold";

document.getElementById("division").style.margin="20px"

document.getElementById("gdfg").value = s;

}
</script>

</body>

</html>

You might also like