Created
July 10, 2017 16:41
-
-
Save rpaskin/08cc74c4522788cc058bb85e48bac820 to your computer and use it in GitHub Desktop.
Template de calculadora inicial
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| #calc_main { | |
| display: inline-block; | |
| background-color: #333; | |
| border-radius: 20px; | |
| height: 500px; | |
| width: 500px; | |
| box-shadow: inset 5px 5px 5px rgba(255,255,255,0.6), | |
| inset -5px -5px 5px rgba(0, 0, 0, .6); | |
| } | |
| #calc_main #disp { | |
| display: inline-block; | |
| position: relative; | |
| width: 80%; | |
| height: 30px; | |
| font-size: 20px; | |
| background-color: #DEF0DD; | |
| border-radius: 10px; | |
| margin: 10%; | |
| clear: both; | |
| } | |
| #calc_main .btn { | |
| width: 100px; | |
| height: 100px; | |
| font-size: 60px; | |
| border-radius: 15px; | |
| position: relative; | |
| float: left; | |
| margin: 33px; | |
| } | |
| .red { | |
| background-color: #FF9695; | |
| } | |
| .green { | |
| background-color: #93FF8B; | |
| } |
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| <!DOCTYPE html> | |
| <html> | |
| <head> | |
| <meta http-equiv="Content-Type" content="text/html; charset=utf-8"> | |
| <meta http-equiv="Content-Language" content="pt-br"> | |
| <title> | |
| Calculadora | |
| </title> | |
| <link rel="stylesheet" href="calc.css"> | |
| <script> | |
| function show(argument) { | |
| console.log(argument); | |
| // alert(el.value); | |
| el = document.getElementById("disp"); | |
| el.value += argument; | |
| } | |
| function clear_display(){ | |
| el = document.getElementById("disp"); | |
| el.value = ""; | |
| } | |
| </script> | |
| </head> | |
| <body> | |
| <form id="calc_form" onsubmit="return false;"> | |
| <div id="calc_main"> | |
| <input type="text" id="disp" name="disp"> | |
| <div id="buttons"> | |
| <button class="btn" value="0" onclick="show(0);">0</button> | |
| <button class="btn" value="1" onclick="show(1)">1</button> | |
| <button class="btn green" value="+" onclick="alert(this.value);">+</button> | |
| <button class="btn red" value="C" onclick="clear_display();">C</button> | |
| <button class="btn red" value="=" onmouseover="alert('mouse over =')">=</button> | |
| </div> | |
| </form> | |
| </body> | |
| </html> |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment