Presentation Calculator Project

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>
10.<body> 34. <td> <input type="button" value="8" onclick="display('8')" /> </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>
16.  41.
17. <td> <input type="button" value="C" 42. 
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.  46.</table>
21. <td> <input type="button" value="1" onclick="display('1')" 47.
/> </td> 48.<script type="text/javascript" src="index.js"></script>
/> </td> 50.</body>
/> </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

Presentation Calculator Project

Uploaded by

Document Information

Copyright

Available Formats

Share this document

Share or Embed Document

Sharing Options

Did you find this document useful?

Is this content inappropriate?

Copyright:

Available Formats

Presentation Calculator Project

Uploaded by

Copyright:

Available Formats

SHRI RAMSWROOP

SUBJECT: MICRO SERVICES & ARCHTECHTURE

SUBMITED BY: SUBMITED TO:

• It will perform decimal operations.

The calculator consists of the following components:

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

•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.

1. // This function clears all the values

You might also like