Hello everyone! In this post, I’ll guide you through building a functional calculator using HTML, CSS, and JavaScript. This will also help complete Assignment 5 provided by Ranjeet Sir. Follow along, and by the end, you’ll have a fully working calculator that you can customize and make your own.
 |
| 2nd page of Assignment |
DOWNLOAD CODE:
Download this file then complete your calculator.
 |
| 2nd Page of Assignment |
Copy And Paste create Assignments
5A. Code:
<!DOCTYPE html>
<html lang="en">
<head>
<title>Create Addition Program</title>
</head>
<body>
<h1 align="center">Assignment 5</h1> <br>
<h2 align="left">5A.</h2>
<p>Number:<input id="number1A"></p>
<p>Number:<input id="number2A"></p>
<button onclick="addA()">Sum</button>
<p>Addition:<input id="resultA"> </p>
<script>
function addA() {
let num1A, num2A, sumA;
num1A = parseInt(document.getElementById("number1A").value);
num2A = parseInt(document.getElementById("number2A").value);
sumA = num1A + num2A;
document.getElementById("resultA").value = sumA;
}
</script>
</body>
</html>
5B. Code
<!DOCTYPE html>
<html lang="en">
<head>
<title>Create Calculator Program</title>
</head>
<body>
<h2 align="left">5B.</h2>
<p>Number: <input id="text1"></p>
<p>Number: <input id="text2"></p>
<button onclick="add()">SUM</button>
<button onclick="sub()">SUB</button>
<button onclick="mul()">MUL</button>
<button onclick="div()">DIV</button>
<button onclick="mod()">MOD</button>
<p>Result: <input id="answer"></p>
<script>
function add() {
var numOne, numTwo, sum;
numOne = parseInt(document.getElementById("text1").value);
numTwo = parseInt(document.getElementById("text2").value);
sum = numOne + numTwo;
document.getElementById("answer").value = sum;
}
function sub() {
var numOne, numTwo, sub;
numOne = parseInt(document.getElementById("text1").value);
numTwo = parseInt(document.getElementById("text2").value);
sub = numOne - numTwo;
document.getElementById("answer").value = sub;
}
function mul() {
var numOne, numTwo, mul;
numOne = parseInt(document.getElementById("text1").value);
numTwo = parseInt(document.getElementById("text2").value);
mul = numOne * numTwo;
document.getElementById("answer").value = mul;
}
function div() {
var numOne, numTwo, div;
numOne = parseInt(document.getElementById("text1").value);
numTwo = parseInt(document.getElementById("text2").value);
div = numOne / numTwo;
document.getElementById("answer").value = div;
}
function mod() {
var numOne, numTwo, mod;
numOne = parseInt(document.getElementById("text1").value);
numTwo = parseInt(document.getElementById("text2").value);
mod = numOne % numTwo;
document.getElementById("answer").value = mod;
}
</script>
</body>
</html>
5C. Code.
<!DOCTYPE html>
<html lang="en">
<head>
<title>Create Calculator Type Program</title>
</head>
<body>
<h2 align="left">5C.</h2>
<p>Number: <input id="text1C"></p>
<p>Number: <input id="text2C"></p>
<button onclick="Cal()">Calculator</button><br> <br>
<p>Sum:<input id="ansSum"></p>
<p>Sub:<input id="ansSub"></p>
<p>Mul:<input id="ansMul"></p>
<p>Div:<input id="ansDiv"></p>
<p>Mod:<input id="ansMOd"></p>
<script>
function Cal() {
let num1C, num2C;
num1C = parseInt(document.getElementById("text1C").value);
num2C = parseInt(document.getElementById("text2C").value);
let sumC = num1C + num2C;
let subC = num1C - num2C;
let mulC = num1C * num2C;
let divC = num1C / num2C;
let modC = num1C % num2C;
document.getElementById("ansSum").value = sumC;
document.getElementById("ansSub").value = subC;
document.getElementById("ansMul").value = mulC;
document.getElementById("ansDiv").value = divC;
document.getElementById("ansMOd").value = modC;
}
</script>
</body>
</html>
5D. Code.
DOWNLOAD COMPLETE CALCULATOR CODE:
- HTML FILE :- DOWNLOAD
- ONLY HTML CODE NEXT PAGE :- Calculator Code
- CSS FILE :- DOWNLOAD
<!DOCTYPE html>
<html lang="en">
<head>
<title>Create Addition Program</title>
<link rel="stylesheet" href="calc.css"> <!-- Cals.css is an external File -->
</head>
<body>
<h2 align="left">5D.</h2>
<div class="container" align="left">
<fieldset id="container">
<form name="calculator">
<input id="display" type="text" name="display" readonly>
<br>
<input class="button digits" type="button" value="7" onclick="calculator.display.value +='7' ">
<input class="button digits" type="button" value="8" onclick="calculator.display.value +='8' ">
<input class="button digits" type="button" value="9" onclick="calculator.display.value +='9' ">
<input class="button mathButtons" type="button" value="+" onclick="calculator.display.value +='+' ">
<br>
<input class="button digits" type="button" value="4" onclick="calculator.display.value +='4' ">
<input class="button digits" type="button" value="5" onclick="calculator.display.value +='5' ">
<input class="button digits" type="button" value="6" onclick="calculator.display.value +='6' ">
<input class="button mathButtons" type="button" value="-" onclick="calculator.display.value +='-' ">
<br>
<input class="button digits" type="button" value="1" onclick="calculator.display.value +='1' ">
<input class="button digits" type="button" value="2" onclick="calculator.display.value +='2' ">
<input class="button digits" type="button" value="3" onclick="calculator.display.value +='3' ">
<input class="button mathButtons" type="button" value="*" onclick="calculator.display.value +='*' ">
<br>
<input id="clearButton" class="button" type="button" value="C"
onclick="calculator.display.value =' ' ">
<input class="button digits" type="button" value="0" onclick="calculator.display.value +='0' ">
<input class="button mathButtons" type="button" value="="
onclick="calculator.display.value = eval(calculator.display.value) ">
<input class="button mathButtons" type="button" value="/" onclick="calculator.display.value +='/' ">
</form>
</fieldset>
</div>
</body>
</html>
I hope this post is helpful for you , then please support me with follow.
Comments