Scribd
Upload
2 views4 pages

JS

This document is an HTML code for a Math Operations Calculator that allows users to input two numbers and perform basic arithmetic operations: addition, subtraction, multiplication, and division. It includes a table layout for input fields and buttons, and displays the result of the operation. The JavaScript function handles the calculations and updates the result on the webpage.

Uploaded by

Noko Hana
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
2 views4 pages

JS

This document is an HTML code for a Math Operations Calculator that allows users to input two numbers and perform basic arithmetic operations: addition, subtraction, multiplication, and division. It includes a table layout for input fields and buttons, and displays the result of the operation. The JavaScript function handles the calculations and updates the result on the webpage.

Uploaded by

Noko Hana
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/ 4

<!

DOCTYPE html>

<html lang="en">

<head>

<meta charset="UTF-8">

<meta name="viewport" content="width=device-width, initial-


scale=1.0">

<title>Math Operations Form with Table</title>

<style>

body {

font-family: Arial, sans-serif;

table {

width: 100%;

border-collapse: collapse;

margin-top: 20px;

table, th, td {

border: 1px solid black;

th, td {

padding: 10px;

text-align: left;

.result {

margin-top: 10px;

</style>
</head>

<body>

<h2>Math Operations Calculator</h2>

<table>

<tr>

<td>Number 1:</td>

<td><input type="number" id="num1" name="num1"></td>

</tr>

<tr>

<td>Number 2:</td>

<td><input type="number" id="num2" name="num2"></td>

</tr>

<tr>

<td>Operation:</td>

<td>

<button onclick="performOperation('add')">Add</button>

<button onclick="performOperation('subtract')">Subtract</button>

<button onclick="performOperation('multiply')">Multiply</button>

<button onclick="performOperation('divide')">Divide</button>

</td>

</tr>

<tr>

<td>Result:</td>

<td id="result"></td>

</tr>
</table>

<script>

function performOperation(operation) {

var num1 = parseFloat(document.getElementById('num1').value);

var num2 = parseFloat(document.getElementById('num2').value);

var result;

switch(operation) {

case 'add':

result = num1 + num2;

break;

case 'subtract':

result = num1 - num2;

break;

case 'multiply':

result = num1 * num2;

break;

case 'divide':

if(num2 !== 0) {

result = num1 / num2;

} else {

document.getElementById('result').innerText = "Cannot divide


by zero";

return;

break;
default:

result = "Invalid operation";

document.getElementById('result').innerText = result;

</script>

</body>

</html>

You might also like