├── .gitattributes ├── .gitignore ├── README.md ├── estilo.css ├── index-calculadora.html └── script.js /.gitattributes: -------------------------------------------------------------------------------- 1 | # Auto detect text files and perform LF normalization 2 | * text=auto 3 | 4 | # Custom for Visual Studio 5 | *.cs diff=csharp 6 | *.sln merge=union 7 | *.csproj merge=union 8 | *.vbproj merge=union 9 | *.fsproj merge=union 10 | *.dbproj merge=union 11 | 12 | # Standard to msysgit 13 | *.doc diff=astextplain 14 | *.DOC diff=astextplain 15 | *.docx diff=astextplain 16 | *.DOCX diff=astextplain 17 | *.dot diff=astextplain 18 | *.DOT diff=astextplain 19 | *.pdf diff=astextplain 20 | *.PDF diff=astextplain 21 | *.rtf diff=astextplain 22 | *.RTF diff=astextplain 23 | -------------------------------------------------------------------------------- /.gitignore: -------------------------------------------------------------------------------- 1 | # Windows image file caches 2 | Thumbs.db 3 | ehthumbs.db 4 | 5 | # Folder config file 6 | Desktop.ini 7 | 8 | # Recycle Bin used on file shares 9 | $RECYCLE.BIN/ 10 | 11 | # Windows Installer files 12 | *.cab 13 | *.msi 14 | *.msm 15 | *.msp 16 | 17 | # ========================= 18 | # Operating System Files 19 | # ========================= 20 | 21 | # OSX 22 | # ========================= 23 | 24 | .DS_Store 25 | .AppleDouble 26 | .LSOverride 27 | 28 | # Icon must ends with two \r. 29 | Icon 30 | 31 | # Thumbnails 32 | ._* 33 | 34 | # Files that might appear on external disk 35 | .Spotlight-V100 36 | .Trashes 37 | -------------------------------------------------------------------------------- /README.md: -------------------------------------------------------------------------------- 1 | Calculadora-javascript 2 | ====================== 3 | 4 | Calculadora feita em html,css e javascript. 5 | 6 | Essa foi uma calculadora feita para estudo da linguagem javascript, 7 | caso alguém encontre algo que possa ser melhorado no código por favor me diga :D. 8 | 9 | -------------------------------------------------------------------------------- /estilo.css: -------------------------------------------------------------------------------- 1 | * { 2 | margin: 0; 3 | padding: 0; 4 | box-sizing: border-box; 5 | font-family: 'Gloria Hallelujah', cursive; 6 | font-size:22px; 7 | } 8 | li{ 9 | list-style:none; 10 | } 11 | html { 12 | height: 100%; 13 | background: white; 14 | background: radial-gradient(circle, #fff 24%, #CCE); 15 | background-size: cover; 16 | } 17 | #container{ 18 | width:80%; 19 | height:auto; 20 | margin:4px auto; 21 | } 22 | #calculadora{ 23 | width: 234px; 24 | height: 230px; 25 | padding:2px; 26 | background-color: #65D277; 27 | } 28 | .input-valor{ 29 | margin:8px auto; 30 | width:95%; 31 | height:30px; 32 | font-size: 16px; 33 | overflow:hidden; 34 | text-align: right; 35 | color:#48484D; 36 | padding: 4px; 37 | background-color:#fff; 38 | box-shadow: inset -1px -1px 4px 1px #eee; 39 | } 40 | .key li{ 41 | width:50px; 42 | height:30px; 43 | border-radius:3px; 44 | color:#fff; 45 | background-color:#6C73FA; 46 | cursor:pointer; 47 | float:left; 48 | margin: 0px -3px 5px 8px; 49 | line-height: 30px; 50 | text-align: center; 51 | box-shadow: 0px 3px 1px 0px #444651; 52 | } 53 | .key li:hover{ 54 | background-color: #BEF9F0; 55 | color: #6C73FA; 56 | transition:0.2s; 57 | } 58 | .key li:active{ 59 | box-shadow: 0px 1px 1px 0px #444651; 60 | } 61 | .verificar{ 62 | width: 93.4% !important; 63 | } -------------------------------------------------------------------------------- /index-calculadora.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | Calculadora javascript 6 | 7 | 8 | 9 | 10 |
11 |
12 |
13 | 14 |
15 |
16 |
17 | 18 |
19 |
20 |
21 | 40 |
41 |
42 | 43 | 44 | -------------------------------------------------------------------------------- /script.js: -------------------------------------------------------------------------------- 1 | /*-----------------------------------------CALCULADORA----------------------------------------------------------*/ 2 | // pego os elementos li e div input 3 | var btn = document.querySelectorAll(".key li"), 4 | input = document.querySelector(".input-valor"), 5 | operador = document.querySelectorAll(".operador"); 6 | 7 | // Percorro o array para usar todas as informações 8 | for(var i = 0; i < btn.length; i++){ 9 | document.onkeypress = function(){ 10 | var key = event.keyCode; 11 | //console.log(key); 12 | for(var e = 0; e <= 10; e++){ 13 | if(key === (48+e)){ 14 | input.innerHTML += e; 15 | } 16 | } 17 | switch (key){ 18 | case 42: 19 | input.innerHTML += "*"; 20 | break; 21 | case 43: 22 | input.innerHTML += "+"; 23 | break; 24 | case 45: 25 | input.innerHTML += "-"; 26 | break; 27 | case 46: 28 | input.innerHTML += "."; 29 | break; 30 | case 47: 31 | input.innerHTML += "/"; 32 | break; 33 | case 13: 34 | case 61: 35 | var equacao = input.innerHTML; 36 | if(equacao){ 37 | try { 38 | input.innerHTML = eval(equacao); 39 | } catch (e) { 40 | alert('Erro na expressão'); 41 | 42 | } 43 | } 44 | break; 45 | case 67: 46 | case 99: 47 | input.innerHTML = ""; 48 | break; 49 | default: 50 | //console.log("Procurando erros?"); 51 | break; 52 | } 53 | }; 54 | btn[i].addEventListener('click',function(){ 55 | var btnVal = this.innerHTML, 56 | inputVal = input.innerHTML; 57 | //console.log(btnVal); 58 | 59 | // crio um clear caso o c for clicado 60 | switch (btnVal){ 61 | case "c": 62 | input.innerHTML = ""; 63 | break; 64 | case "=": 65 | // Crio a variável de equação aqui eu utilizo a função eval do javascript 66 | var equacao = inputVal; 67 | 68 | if(equacao){ 69 | try { 70 | input.innerHTML = eval(equacao); 71 | } catch (e) { 72 | alert('Erro na expressão'); 73 | 74 | } 75 | } 76 | break; 77 | default: 78 | input.innerHTML += btnVal; 79 | break; 80 | } 81 | 82 | }); 83 | } 84 | --------------------------------------------------------------------------------