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

Bycoding786

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 coding786

Related Post

HTML TUTORIAL

How to integrate the Facebook comments plugin in website

Sep 29, 2023 coding786
Uncategorized

Encrypt/Decrypt String using a Private Secret Key / Salt Key with PHP

Sep 24, 2023 coding786
Uncategorized

Select tag multiple values select jquery

Sep 22, 2023 coding786

Leave a Reply

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

You missed

HTML TUTORIAL

How to integrate the Facebook comments plugin in website

Sep 29, 2023 coding786
Uncategorized

Encrypt/Decrypt String using a Private Secret Key / Salt Key with PHP

Sep 24, 2023 coding786
Uncategorized

Select tag multiple values select jquery

Sep 22, 2023 coding786
Uncategorized

No composer.json present in the current directory (./composer.json), this may be the cause of the following excepti on.

Sep 13, 2023 coding786