Coding Help - Codinghelp.in

PHP,HTML,CSS,JS,Wordpress,Blogger,Seo Tools,Domain,Hosting And Others Support

HTML TUTORIAL JS TUTORIAL Uncategorized

Simple calculator program in Java source code

ByCoding Help

Jan 23, 2022

Simple calculator program in Java source code

  1. <! DOCTYPE html>  
  2. <html>  
  3.     <head>  
  4.     <meta charset=“utf-8”>  
  5.     <title>  
  6.          Calculator using HTML Example  
  7.     </title>  
  8.     <link href=“https://fonts.googleapis.com/css2?family=Cookie&display=swap” rel=“stylesheet”>  
  9.     <!– CSS property to create interactive  
  10.         calculator interface —>  
  11.     <style>  
  12.     html {  
  13.   height: 100vh;  
  14.   display: flex;  
  15.   align-items: center;  
  16.   justify-content: center;  
  17.   background-color: #2d3436;  
  18.   background-image: linear-gradient(315deg, #2d3436 0%, #000000 74%);  
  19.   font-family: ‘Cookie’, cursive;  
  20. }  
  21. .title {  
  22. margin-bottom: 10px;  
  23. padding: 5px 0;  
  24. font-size: 40px;  
  25. font-weight: bold;  
  26. text-align: center;  
  27. color: red;  
  28. font-family: ‘Cookie’, cursive;  
  29. }  
  30. input[type=button] {  
  31.   width: 60px;  
  32.   height: 60px;  
  33.   float: left;  
  34.   padding: 0;  
  35.   margin: 5px;  
  36.   box-sizing: border-box;  
  37.   background: #ecedef;  
  38.   border: none;  
  39.   font-size: 30px;  
  40.   line-height: 30px;  
  41.   border-radius: 50%;  
  42.   font-weight: 700;  
  43.   color: #5E5858;  
  44.   cursor: pointer;    
  45. }  
  46. input[type=text] {  
  47.   width: 270px;  
  48.   height: 60px;  
  49.   float: left;  
  50.   padding: 0;  
  51.   box-sizing: border-box;  
  52.   border: none;  
  53.   background: none;  
  54.   color: red;  
  55.   text-align: right;  
  56.   font-weight: 700;  
  57.   font-size: 60px;  
  58.   line-height: 60px;  
  59.   margin: 0 25px;  
  60.   }  
  61. .calculator {  
  62.   background-color: #c0c0c0;  
  63.   box-shadow: 0px 0px 0px 10px #666;  
  64.   border: 5px solid black;  
  65.   border-radius: 10px;  
  66. }  
  67. #display {  
  68.   height: 40px;  
  69.   text-align: right;  
  70.   background-color: black;  
  71.   border: 3px solid white;  
  72.   font-size: 18px;  
  73.   left: 2px;  
  74.   top: 2px;  
  75.   color: red;  
  76. }  
  77. .btnTop {  
  78.   color: white;  
  79.   background-color: #6f6f6f;  
  80.   font-size: 14px;  
  81.   margin: auto;  
  82.   width: 50px;  
  83.   height: 25px;  
  84. }     
  85.     </style>  
  86. </head>  
  87. <body>  
  88.     <div class = “title”  align=“center”>  
  89.         Example of Calculator using HTML  
  90.     </div>  
  91.     <form name=“Calculator” class = “calculator” >  
  92. <table border=“2” align=“center” cellpadding=“15” cellspacing=“12” bgcolor=“#c0c0c0”>  
  93. <tr>  
  94. <td>  
  95. <input type=“text” name=“Input” Size=“35” id=“display”>  
  96. <br>  
  97. </td>  
  98. </tr>  
  99. <tr>  
  100. <td>  
  101. <input type=“button” name = “one” style=“font-size:30px” value=” 1 “ OnClick=“Calculator.Input.value += ‘1’”>  
  102. <input type=“button” name = “two” style = “font-size:30px” value=” 2 “ OnCLick=“Calculator.Input.value += ‘2’”>  
  103. <input type=“button” name = “three” style=“font-size:30px” value=” 3 “ OnClick=“Calculator.Input.value += ‘3’”>  
  104. <input type=“button” name=“add” class =“btnTop” style=“font-size:30px” value=” + “ OnClick=“Calculator.Input.value += ‘ + ‘”>  
  105. <br>  
  106. <input type=“button” name = “four” style=“font-size:30px” value=” 4 “ OnClick=“Calculator.Input.value += ‘4’”>  
  107. <input type=“button” name = “five” style=“font-size:30px” value=” 5 “ OnCLick=“Calculator.Input.value += ‘5’”>  
  108. <input type=“button” name = “six” style=“font-size:30px” value=” 6 “ OnClick=“Calculator.Input.value += ‘6’”>  
  109. <input type=“button” name = “minus” style=“font-size:30px” value=” – “ OnClick=“Calculator.Input.value += ‘ – ‘”>  
  110. <br>  
  111. <input type=“button” name = “seven” style=“font-size:30px” value=” 7 “ OnClick=“Calculator.Input.value += ‘7’”>  
  112. <input type=“button” name = “eight” style=“font-size:30px” value=” 8 “ OnCLick=“Calculator.Input.value += ‘8’”>  
  113. <input type=“button” name = “nine” style=“font-size:30px” value=” 9 “ OnClick=“Calculator.Input.value += ‘9’”>  
  114. <input type=“button” name = “mul” style=“font-size:30px” value=” * “   
  115. OnClick=“Calculator.Input.value += ‘ * ‘”>  
  116. <br>  
  117. <input type=“button” name = “clear” style=“font-size:30px” value=” c “ OnClick=“Calculator.Input.value = ””>  
  118. <input type=“button” name=“zero” style=“font-size:30px” value=” 0 “ OnClick=“Calculator.Input.value += ‘0’”>  
  119. <input type=“button” name=“DoIt” style=“font-size:30px” value=” = “ OnClick=“Calculator.Input.value = eval(Calculator.Input.value)”>  
  120. <input type=“button” name=“div” style=“font-size:30px” value=” / “ OnClick=“Calculator.Input.value += ‘ / ‘”>  
  121. <br>  
  122. </td>  
  123.   
  124. </tr>  
  125. </table>  
  126. </form>  
  127. </body>  
  128. </html> 

 

 

Example 2:

  1. <! DOCTYPE html>  
  2. <html>  
  3.     <head>  
  4.     <meta charset=“utf-8”>  
  5.     <title>  
  6.          Calculator using HTML Example  
  7.     </title>  
  8.     <link href=“https://fonts.googleapis.com/css2?family=Cookie&display=swap” rel=“stylesheet”>  
  9.     <!– CSS property to create interactive  
  10.         calculator interface —>  
  11.     <style>  
  12. body    
  13. {    
  14. background-color: tan;    
  15. }    
  16. .box    
  17. {    
  18. background-color: #3d4543;    
  19. height: 300px;    
  20. width: 270px;    
  21. border-radius: 10px;    
  22. position: relative;    
  23. top: 80px;    
  24. left: 40%;    
  25. }   
  26. .display    
  27. {    
  28. background-color: #222;    
  29. width: 220px;    
  30. position: relative;    
  31. left: 15px;    
  32. top: 20px;    
  33. height: 40px;    
  34. }    
  35. .display input    
  36. {    
  37. position: relative;    
  38. left: 2px;    
  39. top: 2px;    
  40. height: 35px;    
  41. color: black;    
  42. background-color: #bccd95;    
  43. font-size: 21px;    
  44. text-align: right;    
  45. }   
  46. .keys    
  47. {    
  48. position: relative;    
  49. top: 15px;    
  50. }    
  51. .button    
  52. {    
  53. width: 40px;    
  54. height: 30px;    
  55. border: none;    
  56. border-radius: 8px;    
  57. margin-left: 17px;    
  58. cursor: pointer;    
  59. border-top: 2px solid transparent;    
  60. }    
  61. .button.gray    
  62. {    
  63. color: black;  
  64. font-color: black;    
  65. background-color: #6f6f6f;    
  66. border-bottom: black 2px solid;    
  67. border-top: 2px #6f6f6f solid;    
  68. }  
  69. .title:hover {  
  70.    color: #fff;  
  71. }  
  72. .title {  
  73. margin-bottom: 10px;  
  74. margin-top: 30px;  
  75. padding: 5px 0;  
  76. font-size: 40px;  
  77. font-weight: bold;  
  78. text-align: center;  
  79. color: black;  
  80. font-family: ‘Cookie’, cursive;  
  81. }  
  82.     
  83. .button.pink    
  84. {    
  85. color: black;    
  86. background-color: #ff4561;    
  87. border-bottom: black 2px solid;    
  88. }    
  89. .button.black    
  90. {    
  91. color: black;    
  92. background-color: 303030;    
  93. border-bottom: black 2px solid;    
  94. border-top: 2px 303030 solid;    
  95. font-weight: bold;  
  96. }    
  97. .button.orange    
  98. {    
  99. color: black;    
  100. background-color: FF9933;    
  101. border-bottom: black 2px solid;    
  102. border-top: 2px FF9933 solid;    
  103. }    
  104. .gray:active    
  105. {    
  106. border-top: black 2px solid;    
  107. border-bottom: 2px #6f6f6f solid;    
  108. }    
  109. .pink:active    
  110. {    
  111. border-top:black 2px solid;    
  112. border-bottom:#ff4561 2px solid;    
  113. }    
  114. .black:active    
  115. {    
  116. border-top: black 2px solid;    
  117. border-bottom: #303030 2px solid;    
  118. }    
  119. .orange:active    
  120. {    
  121. border-top: black 2px solid;    
  122. border-bottom: FF9933 2px solid;    
  123. }    
  124. p    
  125. {    
  126. line-height: 10px;    
  127. }   
  128. </style>  
  129. </head>  
  130. <body>  
  131.     <div class = “title? align=”centre“>  
  132.         Example of Calculator using HTML  
  133.     </div>  
  134.     <div class=“box”>    
  135.         <div class=“display”>  
  136.         <input type=“text” readonly size=“18” id=“d”>  
  137.         </div>    
  138.         <div class=“keys”>    
  139.                <p> <input type=“button” class=“button gray” value=“mrc” onclick=‘c(“Created………………..”)’>  
  140.                <input type=“button” class=“button gray” value=“m-“ onclick=‘c(“……………by…………”)’>  
  141.                <input type=“button” class=“button gray”    
  142. value=“m+” onclick=‘c(“…………………Anoop”)’>  
  143. <input type=“button” class=“button pink” value=“/” onclick=‘v(“/”)’> </p>    
  144.                <p> <input type=“button” class=“button black” value=“7” onclick=‘v(“7”)’>  
  145.                <input type=“button” class=“button black” value=“8” onclick=‘v(“8”)’>  
  146.                <input type=“button” class=“button black” value=“9” onclick=‘v(“9”)’>  
  147.                <input type=“button” class=“button pink” value=“*” onclick=‘v(“*”)’> </p>    
  148.                <p> <input type=“button” class=“button black” value=“4” onclick=‘v(“4”)’>  
  149.                <input type=“button” class=“button black” value=“5” onclick=‘v(“5”)’>  
  150.                <input type=“button” class=“button black” value=“6” onclick=‘v(“6”)’>  
  151. <input type=“button” class=“button pink” value=“-“ onclick=‘v(“-“)’> </p>    
  152.                <p> <input type=“button” class=“button black” value=“1” onclick=‘v(“1”)’>  
  153.                <input type=“button” class=“button black” value=“2” onclick=‘v(“2”)’>  
  154.                <input type=“button” class=“button black” value=“3” onclick=‘v(“3”)’>  
  155.                <input type=“button” class=“button pink” value=“+” onclick=‘v(“+”)’> </p>    
  156.                <p> <input type=“button” class=“button black” value=“0” onclick=‘v(“0”)’>   
  157.                <input type=“button” class=“button black” value=“.” onclick=‘v(“.”)’>  
  158.                <input type=“button” class=“button black” value=“C” onclick=‘c(“”)’>  
  159.                <input type=“button” class=“button orange” value=“=” onclick=‘e()’> </p>    
  160.         </div>    
  161. </div>   
  162. </body>  
  163. <script>  
  164. function c(val)    
  165. {    
  166. document.getElementById(“d”).value=val;    
  167. }    
  168. function v(val)    
  169. {document.getElementById(“d”).value+=val;    
  170. }    
  171. function e()    
  172. {    
  173. try    
  174.     {    
  175.      c(eval(document.getElementById(“d”).value))    
  176.     }    
  177.     catch(e)    
  178.     {    
  179.      c(‘Error’) }    
  180. }  
  181. </script>  
  182. </html> 

 

 

By Coding Help

Related Post

Uncategorized

Clear Form Value if User click back button in Browser Tools

Mar 29, 2024 Coding Help
HTML TUTORIAL PHP TUTORIAL

Integrate Google Popup Sign in into Website || Google sign in pop up for website integration php

Jan 23, 2024 Coding Help
JS TUTORIAL

While loop with jQuery async AJAX calls

Jan 8, 2024 Coding Help

Leave a Reply

Your email address will not be published. Required fields are marked *

You missed

PHP TUTORIAL

Aadhaar Number Validation javascript | How to Validate Aadhaar Card Number in JavaScript Regex

Aug 26, 2024 Coding Help
PHP TUTORIAL

PHP Script for Decryption or Encryption in AES-256-CBC

Aug 21, 2024 Coding Help
WORDPRESS TUTORIAL

WordPress UPI QR Code Payment Plugin | UPI QR Code Payment Gateway for WooCommerce

Jul 28, 2024 Coding Help
PHP TUTORIAL

How to Store Files on Google Cloud Storage Using PHP

Jun 15, 2024 Coding Help