JavaScript Learning (File Name :- CalPractice)(File Type :- HTMl)(CSS :- CalPractice.css)
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" type="text/css" href="CalPractice.css">
<title>CalPractice</title>
</head>
<body>
<form name="calculator" id="bg">
<table>
<tr>
<td colspan="4"><input type="text" name="display" id="display" disabled></td>
</tr>
<tr>
<td colspan="4"><input type="text" name="output" id="output" disabled></td>
</tr>
</table>
<table id="buttonbg">
<tr>
<td><input type="button" name="seven" value="7" id="button" onclick="calculator.display.value += '7'">
</td>
<td><input type="button" name="eigth" value="8" id="button" onclick="calculator.display.value += '8'">
</td>
<td><input type="button" name="nine" value="9" id="button" onclick="calculator.display.value += '9'">
</td>
<td><input type="button" name="divide" value="/" id="button" onclick="calculator.display.value += '/'">
</td>
<td><input type="button" name="percentage" value="%" id="button" onclick="calculator.display.value += '%'"></td>
</tr>
<tr>
<td><input type="button" name="four" value="4" id="button" onclick="calculator.display.value += '4'">
</td>
<td><input type="button" name="five" value="5" id="button" onclick="calculator.display.value += '5'">
</td>
<td><input type="button" name="six" value="6" id="button" onclick="calculator.display.value += '6'">
</td>
<td><input type="button" name="multi" value="*" id="button" onclick="calculator.display.value += '*'">
</td>
<td><input type="button" name="opnbrc" value="(" id="button" onclick="calculator.display.value += '('">
</td>
</tr>
<tr>
<td><input type="button" name="one" value="1" id="button" onclick="calculator.display.value += '1'">
</td>
<td><input type="button" name="two" value="2" id="button" onclick="calculator.display.value += '2'">
</td>
<td><input type="button" name="three" value="3" id="button" onclick="calculator.display.value += '3'">
</td>
<td><input type="button" name="minus" value="-" id="button" onclick="calculator.display.value += '-'">
</td>
<td><input type="button" name="clobrc" value=")" id="button" onclick="calculator.display.value += ')'">
</td>
</tr>
<tr>
<td><input type="button" name="clr" value="C" id="button" onclick="calculator.display.value=''; calculator.output.value=''">
</td>
<td><input type="button" name="zero" value="0" id="button" onclick="calculator.display.value += '0'">
</td>
<td><input type="button" name="deci" value="." id="button" onclick="calculator.display.value += '.'">
</td>
<td><input type="button" name="add" value="+" id="button" onclick="calculator.display.value +='+'">
</td>
<td><input type="button" name="equalto" value="=" id="button" onclick="calculator.output.value = 'Ans is' + ' ' + eval(calculator.display.value)" rowspan="2">
</td>
</tr>
</table>
</form>
</body>
</html><!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" type="text/css" href="CalPractice.css">
<title>CalPractice</title>
</head>
<body>
<form name="calculator" id="bg">
<table>
<tr>
<td colspan="4"><input type="text" name="display" id="display" disabled></td>
</tr>
<tr>
<td colspan="4"><input type="text" name="output" id="output" disabled></td>
</tr>
</table>
<table id="buttonbg">
<tr>
<td><input type="button" name="seven" value="7" id="button" onclick="calculator.display.value += '7'">
</td>
<td><input type="button" name="eigth" value="8" id="button" onclick="calculator.display.value += '8'">
</td>
<td><input type="button" name="nine" value="9" id="button" onclick="calculator.display.value += '9'">
</td>
<td><input type="button" name="divide" value="/" id="button" onclick="calculator.display.value += '/'">
</td>
<td><input type="button" name="percentage" value="%" id="button" onclick="calculator.display.value += '%'"></td>
</tr>
<tr>
<td><input type="button" name="four" value="4" id="button" onclick="calculator.display.value += '4'">
</td>
<td><input type="button" name="five" value="5" id="button" onclick="calculator.display.value += '5'">
</td>
<td><input type="button" name="six" value="6" id="button" onclick="calculator.display.value += '6'">
</td>
<td><input type="button" name="multi" value="*" id="button" onclick="calculator.display.value += '*'">
</td>
<td><input type="button" name="opnbrc" value="(" id="button" onclick="calculator.display.value += '('">
</td>
</tr>
<tr>
<td><input type="button" name="one" value="1" id="button" onclick="calculator.display.value += '1'">
</td>
<td><input type="button" name="two" value="2" id="button" onclick="calculator.display.value += '2'">
</td>
<td><input type="button" name="three" value="3" id="button" onclick="calculator.display.value += '3'">
</td>
<td><input type="button" name="minus" value="-" id="button" onclick="calculator.display.value += '-'">
</td>
<td><input type="button" name="clobrc" value=")" id="button" onclick="calculator.display.value += ')'">
</td>
</tr>
<tr>
<td><input type="button" name="clr" value="C" id="button" onclick="calculator.display.value=''; calculator.output.value=''">
</td>
<td><input type="button" name="zero" value="0" id="button" onclick="calculator.display.value += '0'">
</td>
<td><input type="button" name="deci" value="." id="button" onclick="calculator.display.value += '.'">
</td>
<td><input type="button" name="add" value="+" id="button" onclick="calculator.display.value +='+'">
</td>
<td><input type="button" name="equalto" value="=" id="button" onclick="calculator.output.value = 'Ans is' + ' ' + eval(calculator.display.value)" rowspan="2">
</td>
</tr>
</table>
</form>
</body>
</html><!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" type="text/css" href="CalPractice.css">
<title>CalPractice</title>
</head>
<body>
<form name="calculator" id="bg">
<table>
<tr>
<td colspan="4"><input type="text" name="display" id="display" disabled></td>
</tr>
<tr>
<td colspan="4"><input type="text" name="output" id="output" disabled></td>
</tr>
</table>
<table id="buttonbg">
<tr>
<td><input type="button" name="seven" value="7" id="button" onclick="calculator.display.value += '7'">
</td>
<td><input type="button" name="eigth" value="8" id="button" onclick="calculator.display.value += '8'">
</td>
<td><input type="button" name="nine" value="9" id="button" onclick="calculator.display.value += '9'">
</td>
<td><input type="button" name="divide" value="/" id="button" onclick="calculator.display.value += '/'">
</td>
<td><input type="button" name="percentage" value="%" id="button" onclick="calculator.display.value += '%'"></td>
</tr>
<tr>
<td><input type="button" name="four" value="4" id="button" onclick="calculator.display.value += '4'">
</td>
<td><input type="button" name="five" value="5" id="button" onclick="calculator.display.value += '5'">
</td>
<td><input type="button" name="six" value="6" id="button" onclick="calculator.display.value += '6'">
</td>
<td><input type="button" name="multi" value="*" id="button" onclick="calculator.display.value += '*'">
</td>
<td><input type="button" name="opnbrc" value="(" id="button" onclick="calculator.display.value += '('">
</td>
</tr>
<tr>
<td><input type="button" name="one" value="1" id="button" onclick="calculator.display.value += '1'">
</td>
<td><input type="button" name="two" value="2" id="button" onclick="calculator.display.value += '2'">
</td>
<td><input type="button" name="three" value="3" id="button" onclick="calculator.display.value += '3'">
</td>
<td><input type="button" name="minus" value="-" id="button" onclick="calculator.display.value += '-'">
</td>
<td><input type="button" name="clobrc" value=")" id="button" onclick="calculator.display.value += ')'">
</td>
</tr>
<tr>
<td><input type="button" name="clr" value="C" id="button" onclick="calculator.display.value=''; calculator.output.value=''">
</td>
<td><input type="button" name="zero" value="0" id="button" onclick="calculator.display.value += '0'">
</td>
<td><input type="button" name="deci" value="." id="button" onclick="calculator.display.value += '.'">
</td>
<td><input type="button" name="add" value="+" id="button" onclick="calculator.display.value +='+'">
</td>
<td><input type="button" name="equalto" value="=" id="button" onclick="calculator.output.value = 'Ans is' + ' ' + eval(calculator.display.value)" rowspan="2">
</td>
</tr>
</table>
</form>
</body>
</html>
