Scribd
Upload
12 views11 pages

Presentation Calculator Project

Uploaded by

chsbob123
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as PPTX, PDF, TXT or read online on Scribd
12 views11 pages

Presentation Calculator Project

Uploaded by

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

SHRI RAMSWROOP

MEMORIAL UNIVERSITY
PRESETATION OF CALCULATOR

SUBJECT: MICRO SERVICES & ARCHTECHTURE

SUBMITED BY: SUBMITED TO:


CHHATHU SHARMA MR.RAGHUVEER SAIN
202210101240008 (IBM)
BCA(CC)
Feature of calculator
In this project, you are going to develop a calculator that will have the following features:
• It will perform basic arithmetic operations like addition, subtraction, division, and
multiplication.

• It will perform decimal operations.

• The calculator will display Infinity if you try to divide any number by zero.

• It will not display any result in case of an invalid expression. For example, 5++9 will not
display anything.

• Clear screen feature to clear the display screen anytime you want.
Components of the Calculator

The calculator consists of the following components:

•Mathematical operators: Addition (+), Subtraction (-), Multiplication (*), and


Division (/).

•Digits and decimal button: 0, 1, 2, 3, 4, 5, 6, 7, 8, 9, .

•Display screen: Displays the mathematical expression and the result.

•Clear screen button: Clears all mathematical values.

•Calculate button (=): Evaluates the mathematical expression and returns the result.
HTML PROGRAM
1. <!DOCTYPE html>
2. <html lang="en" dir="ltr"> 26. <tr>
3. 27. <td> <input type="button" value="4" onclick="display('4')" /> </td>
4. <head> 28. <td> <input type="button" value="5" onclick="display('5')" /> </td>
5. <meta charset="utf-8"> 29. <td> <input type="button" value="6" onclick="display('6')" /> </td>
6. <title>Calculator using HTML, CSS and JavaScript</title> 30. <td> <input type="button" value="-" onclick="display('-')" /> </td>
7. <link rel="stylesheet" href="inde.css"> 31. </tr>
8. </head> 32. <tr>
9. 33. <td> <input type="button" value="7" onclick="display('7')" /> </td>
10.<body> 34. <td> <input type="button" value="8" onclick="display('8')" /> </td>
11. 35. <td> <input type="button" value="9" onclick="display('9')" /> </td>
12.<table class="calculator" > 36. <td> <input type="button" value="+" onclick="display('+')" /> </td>
13. <tr> 37. </tr>
14. <td colspan="3"> <input class="display-box" type="text" 38. <tr>
id="result" disabled /> </td> 39. <td> <input type="button" value="." onclick="display('.')" /> </td>
15. 40. <td> <input type="button" value="0" onclick="display('0')" /> </td>
16. <!-- clearScreen() function clears all the values --> 41.
17. <td> <input type="button" value="C" 42. <!-- calculate() function evaluates the mathematical expression -->
onclick="clearScreen()" id="btn" /> </td> 43. <td> <input type="button" value="=" onclick="calculate()"
18. </tr> id="btn" /> </td>
19. <tr> 44. <td> <input type="button" value="*" onclick="display('*')" /> </td>
20. <!-- display() function displays the value of clicked 45. </tr>
button --> 46.</table>
21. <td> <input type="button" value="1" onclick="display('1')" 47.
/> </td> 48.<script type="text/javascript" src="index.js"></script>
22. <td> <input type="button" value="2" onclick="display('2')" 49.
/> </td> 50.</body>
23. <td> <input type="button" value="3" onclick="display('3')" 51.
/> </td> 52.</html>
24. <td> <input type="button" value="/" onclick="display('/')"
/> </td>
25. </tr>
WITHOUT CSS ONLY HTML OUTPUT
CSS CODE
1. @import url('https://fonts.googleapis.com/css2? 20.#btn {
2. family=Orbitron&display=swap'); 21. background-color: #fb0066;
22.}
23.
.calculator {
3. padding: 10px; input[type=button] {
4. border-radius: 1em; 24. font-family: 'Orbitron', sans-serif;
5. height: 380px; 25. background-color: #64278f;
6. width: 400px; 26. color: white;
7. margin: auto; 27. border: solid black 0.5px;
8. background-color: #191b28; 28. width: 100%;
9. box-shadow: rgba(0, 0, 0, 0.19) 0px 10px 20px, rgba(0, 0, 0, 29. border-radius: 5px;
0.23) 0px 6px 6px; 30. height: 70%;
10.}
11. 31. outline: none;
32.}
33.
.display-box {
12. font-family: 'Orbitron', sans-serif; input:active[type=button] {
13. background-color: #dcdbe1; 34. background: #e5e5e5;
14. border: solid black 0.5px; 35. -webkit-box-shadow: inset 0px 0px 5px #c1c1c1;
15. color: black; 36. -moz-box-shadow: inset 0px 0px 5px #c1c1c1;
16. border-radius: 5px; 37. box-shadow: inset 0px 0px 5px #c1c1c1;
17. width: 100%; 38.}
18. height: 65%;
19.}
USE HTML AND CSS OUTPUT
This project uses a <table> tag to create the overall structure of the calculator. The <table> tag contains five rows
which represent five horizontal sections of the calculator. Each row has a corresponding <tr> tag. Each <tr> tag
contains <td> tags that hold the display screen and buttons of the calculator.

1st Row
2nd Row
3rd Row
4th Row
5th Row
JAVA SCRIPT CODE

1. // This function clears all the values


2. function clearScreen() {
3. document.getElementById("result").value = "";
4. }
5.
6. // This function displays the values
7. function display(value) {
8. document.getElementById("result").value +=
value;
9. }
10.
11.// This function evaluates the expression and
returns the result
12.function calculate() {
13. var p =
document.getElementById("result").value;
14. var q = eval(p);
15. document.getElementById("result").value = q;
16.}
FINELY RESULT OUTPUT
Thank you

You might also like