How to Make Calculator Using Html, Css and JavaScript with Assignment5th
And Main Aim of this post find Assignment 5 provided from Ranjeet Sir, So these assignment finally completed by me with how to make assignment follow this post and learn step by step.
Well this assignment make provide for you lots of code using HTML,CSS and JAVASCRIPT.
 |
| 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.
No comments
Post a Comment