├── README.md
├── Screenshot 2022-11-03 230453.png
├── green-sand-paper_53876-86281.webp
├── script.js
├── style.css
└── index.html


/README.md:
--------------------------------------------------------------------------------
1 | calculator using HTML,CSS,JAVASCRIPT
2 | 


--------------------------------------------------------------------------------
/Screenshot 2022-11-03 230453.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/sudharsanan123/Calculator-using-HTML-CSS-JAVASCRIPT/HEAD/Screenshot 2022-11-03 230453.png


--------------------------------------------------------------------------------
/green-sand-paper_53876-86281.webp:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/sudharsanan123/Calculator-using-HTML-CSS-JAVASCRIPT/HEAD/green-sand-paper_53876-86281.webp


--------------------------------------------------------------------------------
/script.js:
--------------------------------------------------------------------------------
 1 | // alert('Connected')
 2 | function insert(num){
 3 |     document.form.textview.value=document.form.textview.value+num;
 4 |   }
 5 |   
 6 |   function equals(){
 7 |     var txt=document.form.textview.value;
 8 |     if(txt)
 9 |     document.form.textview.value=eval(txt);
10 |     else
11 |       document.form.textview.value='ERROR'
12 |       
13 |   }
14 |   
15 |   function clean(){
16 |     document.form.textview.value="";
17 |   }
18 |   
19 |   function back(){
20 |     var txt=document.form.textview.value;
21 |     document.form.textview.value=txt.substring(0,txt.length-1);
22 |   }


--------------------------------------------------------------------------------
/style.css:
--------------------------------------------------------------------------------
  1 | body {
  2 | 	/* background: url(http://www.inkspilldesign.com/demo/wood-tile-background.jpg); */
  3 | 	/* background-color: #424242; */
  4 | 	/* font-family: Tahoma; */
  5 | 	background-image: url("green-sand-paper_53876-86281.webp");
  6 | 	/* background-image: url("Scooter.jpg"); */
  7 | }
  8 | 
  9 | .textview{
 10 |   display: inline-block;
 11 | 	margin: 2px;
 12 | 	width: 198px;
 13 | 	height: 29px;
 14 | 	font-size: 20px;
 15 |     font-weight: bold;
 16 |     background-color: rgba(245, 242, 237, 0.589);
 17 | 	/* background:none */
 18 | 	/* border-radius: 10px; */
 19 | 	border: none;
 20 | }
 21 | 
 22 | .equalButton {
 23 |     cursor: pointer;
 24 | 	display: inline-block;
 25 | 	margin: 2px;
 26 | 	width: 42px;
 27 | 	height:91px;
 28 |     outline: none;
 29 | 	font-size: 20px;
 30 | 	font-weight: bold;
 31 | 	border-radius: 10px;
 32 |   
 33 | }
 34 | 
 35 | .button {
 36 |     cursor: pointer;
 37 | 	display: inline-block;
 38 | 	margin: 2px;
 39 | 	width: 42px;
 40 | 	height: 42px;
 41 | 	font-size: 20px;
 42 | 	font-weight: bold;
 43 | 	border-radius: 10px;
 44 | 	outline: none;
 45 |   
 46 | }
 47 | 
 48 | .button:active, .allclearButton:active,.equalButton:active{
 49 |     background-color: #69996b;
 50 |     box-shadow: 0 3px #666;
 51 |     transform: translateY(4px);
 52 |   }
 53 | 
 54 | 
 55 | 
 56 | .button:hover,.equalButton:hover {
 57 | 	background-color: #FFBA75;
 58 | 	box-shadow: 0px 0px 2px #FFBA75, inset 0px -20px 1px #FF8000;
 59 | 	border-top: 2px solid #FFF;
 60 | 	border-right: 2px solid #FFF;
 61 | 	border-bottom: 2px solid #AE5700;
 62 | 	border-left: 2px solid #AE5700;
 63 | }
 64 | 
 65 | .allclearButton {
 66 |   border-radius: 10px;
 67 | 	color: #FFF;
 68 |     margin: 2px;
 69 | 	width: 42px;
 70 | 	height: 42px;
 71 | 	text-shadow: -1px -1px 0px #44006F;
 72 | 	background-color: #D20000;
 73 | 	border-top: 2px solid #FF8484;
 74 | 	border-right: 2px solid #FF8484;
 75 | 	border-bottom: 2px solid #800000;
 76 | 	border-left: 2px solid #800000;
 77 | 	box-shadow: 0px 0px 2px #030303, inset 0px -20px 1px #B00000;
 78 | 	outline: none;
 79 | }
 80 | 
 81 | h1{
 82 | 	color:#59647c;
 83 | 	font-size: 52px;
 84 |     text-justify: newspaper;
 85 |     text-align: center;
 86 | 
 87 | }
 88 | .container{
 89 | 		background: rgba(82, 78, 78, 0.589);
 90 | 		/* background-size: 100px 80px; */
 91 | 		background-size: cover;
 92 | 		position:absolute;
 93 |         top:50%;
 94 |         left:50%;
 95 |         transform:translateX(-50%) translateY(-50%)
 96 | }
 97 | 
 98 | 
 99 |       
100 | 


--------------------------------------------------------------------------------
/index.html:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | <html lang="en">
 3 | <head>
 4 |     <meta charset="UTF-8">
 5 |     <meta name="viewport" content="width=device-width, initial-scale=1.0">
 6 |     <meta http-equiv="X-UA-Compatible" content="ie=edge">
 7 |     <title>Calculator</title>
 8 |     <link rel="stylesheet" href="style.css">
 9 |     <!-- <link rel="stylesheet" href="woodCalc.css"> -->
10 |     <script src="script.js"></script>
11 | </head>
12 | <body>
13 |     <h1>Calculator</h1>
14 |     <div class="container">
15 |         <form name="form">
16 |             <input class="textview" name="textview">
17 |         </form>
18 |             <table>
19 |                 <tr>
20 |                         <td><input class="allclearButton" type="button" value="AC" onclick="clean()"></td>
21 |                         <td><input class="button" type="button" value="C" onclick="back()"></td>
22 |                         <td><input class="button" type="button" value="/" onclick="insert('/')"></td>
23 |                         <td><input class="button" type="button" value="x" onclick="insert('*')"></td>
24 |                 </tr>
25 |                 <tr>
26 |                         <td><input class="button" type="button" value="7" onclick="insert(7)"></td>
27 |                         <td><input class="button" type="button" value="8" onclick="insert(8)"></td>
28 |                         <td><input class="button" type="button" value="9" onclick="insert(9)"></td>
29 |                         <td><input class="button" type="button" value="-" onclick="insert('-')"></td>
30 |                  </tr>
31 |                  <tr>
32 |                         <td><input class="button"  type="button" value="4" onclick=insert(4)></td>
33 |                         <td><input class="button" type="button" value="5" onclick=insert(5)></td>
34 |                         <td><input class="button" type="button" value="6" onclick="insert(6)"></td>
35 |                         <td><input class="button" type="button" value="+" onclick="insert('+')"></td>
36 |                 </tr>
37 |                  <tr>
38 |                         <td><input class="button" type="button" value="1" onclick="insert(1)"></td>
39 |                         <td><input class="button" type="button" value="2" onclick="insert(2)"></td>
40 |                         <td><input class="button" type="button" value="3" onclick="insert(3)"></td>
41 |                         <td rowspan="5"><input class="equalButton" type="button" value="=" onclick=equals()></td>
42 |               </tr>
43 |                 <tr>
44 |                         <td><input class="button" type="button" value="%" onclick="insert('%')"></td>
45 |                         <td><input class="button" type="button" value="0" onclick="insert(0)"></td>
46 |                         <td><input class="button" type="button" value="." onclick="insert('.')"></td>
47 |                         
48 |                 </tr>
49 | 
50 |             </table>
51 |     </div>
52 | </body>
53 | </html>
54 | 


--------------------------------------------------------------------------------