Notes 1-this is web programming ... HTML 2-I need the calculator look exacly what in the picture with buttons 1 through 9( see the picture ) 3- I have tried to do it but is not complete and my code ( the calculator acting wrong ) 4- for example if I enter ( 9*9 ) I should get 81 and so on..... make sure ( - , + , / , and * ) working like other calculator please 5- here is the picture of the calculator with the requierments and my code also... 6- once you done, please copy and paste the code here. not provide code with picture. thanks in advance... 1-!DOCTYPE html 2-html 3-head 4-style /*table { border-spacing: 0; width: 400px; height: 400px; background-color: #81C7D4; } tr { height: 200px; } td { padding: 0; margin: 0; height: 200px; } */ #monitor { margin: 20px; width: 360px; height: 160px; border: 0px; background-color: white; font-family: monospace; text-align: right; font-size: 160px; } div.button1 { position: relative; margin: 20px; width: 160px; height: 360px; border: 0; background-color: #A5DEE4; font-family: monospace; font-size: 150px; text-align: center; cursor: pointer; -webkit-user-select: none; } div.button2 { position: relative; margin: 20px; width: 360px; height: 160px; border: 0; background-color: #A5DEE4; font-family: monospace; font-size: 150px; text-align: center; cursor: pointer; -webkit-user-select: none; } div.button { position: relative; margin: 20px; width: 160px; height: 160px; border: 0; background-color: #A5DEE4; font-family: monospace; font-size: 150px; text-align: center; cursor: pointer; -webkit-user-select: none; } div.button:hover { position: relative; top: -5px; left: -5px; box-shadow: 10px 10px 10px; } div.button:active { position: relative; top: 5px; left: 5px; box-shadow: 0 0 0; } Demo 0 + - * / 7 8 9 4 5 6 C 1 2 3 0 . = In this assignment, you will develop a simple calculator similar to the following example 7 8 9 C Solution HTML: Del%+ 789- 456x 123/ 0.= CSS: body { background:#777; } #background { width:300px; height:400px; background:gray; margin:50px auto; -webkit-animation:bgChange 2s 2s alternate infinite; transition: all 2s ease; } button { border:0; color:#fff; } #result { display:block; font-family: sans-serif; width:230px; height:40px; margin:10px auto; text-align: right; border:0; background:#3b3535; color:#fff; padding-top:20px; font-size:20px; margin-left: 25px; outline: none; overflow: hidden; letter-spacing: 4px; position: relative; top:10px; } #result:hover { cursor: text; } #first-rows { margin-bottom: 20px; position: relative; top:10px; } .rows { width:300px; margin-top:10px; } #delete { width:110px; height:50px; margin-left:25px; border-radius:4px; } /* Aligning the division and dot button properly */ .fall-back { margin-left:3px !important; } /* Aligning the addition and equals to button properly */ .align { margin-left: 6px !important; } /* Button styling */ .btn-style { width:50px; height:50px; margin-left:5px; border-radius:4px; } .eqn { width:50px; height:50px; margin-left:5px; bord.