diff options
-rw-r--r-- | README.md | 2 | ||||
-rw-r--r-- | index.html | 64 | ||||
-rw-r--r-- | script.js | 109 | ||||
-rw-r--r-- | style.css | 102 |
4 files changed, 144 insertions, 133 deletions
@@ -4,6 +4,6 @@ A simple and elegant web calculator that handles all four basic operations. You can click here to test it: ![Js-Calculator](js-calculator-three.vercel.app) -# Image +# Screenshot ![Js-Calculator](https://user-images.githubusercontent.com/52524728/190718828-6103242c-70c7-4573-96f0-7a4098a08302.png) @@ -1,39 +1,39 @@ <!DOCTYPE html> <html lang="en"> -<head> - <meta charset="UTF-8"> - <meta http-equiv="X-UA-Compatible" content="IE=edge"> - <meta name="viewport" content="width=device-width, initial-scale=1.0"> - <link rel="stylesheet" href="./reset.css"> - <link rel="stylesheet" href="./style.css"> - <title>Js-Calculator</title> -</head> -<body> - <div class="container"> - <span class="resultado botao">0</span> - <button class="botao-c botao">C</button> - <button class="botao-ze botao num">0</button> + <head> + <meta charset="UTF-8"> + <meta http-equiv="X-UA-Compatible" content="IE=edge"> + <meta name="viewport" content="width=device-width, initial-scale=1.0"> + <link rel="stylesheet" href="./reset.css"> + <link rel="stylesheet" href="./style.css"> + <title>Js-Calculator</title> + </head> + <body> + <div class="container"> + <span class="results buttons">0</span> + <button class="button-c buttons">C</button> + <button class="button-z buttons num">0</button> - <button class="botao-X botao">X</button> + <button class="button-X buttons">X</button> - <button class="botao-div botao sp">/</button> - <button class="botao-vez botao sp">x</button> - <button class="botao-men botao sp">-</button> - <button class="botao-mai botao sp">+</button> - <button class="botao-eq botao sp">=</button> + <button class="button-div buttons sp">/</button> + <button class="button-mult buttons sp">*</button> + <button class="button-min buttons sp">-</button> + <button class="button-plus buttons sp">+</button> + <button class="button-eq buttons sp">=</button> - <button class="botao-ponto botao">.</button> + <button class="button-dot buttons">.</button> - <button class="botao-um botao num">1</button> - <button class="botao-dois botao num">2</button> - <button class="botao-tres botao num">3</button> - <button class="botao-quatro botao num">4</button> - <button class="botao-cinco botao num">5</button> - <button class="botao-seis botao num">6</button> - <button class="botao-sete botao num">7</button> - <button class="botao-oito botao num">8</button> - <button class="botao-nove botao num">9</button> - </div> -</body> -<script src="./script.js" defer></script> + <button class="button-one buttons num">1</button> + <button class="button-two buttons num">2</button> + <button class="button-three buttons num">3</button> + <button class="button-four buttons num">4</button> + <button class="button-five buttons num">5</button> + <button class="button-six buttons num">6</button> + <button class="button-seven buttons num">7</button> + <button class="button-eight buttons num">8</button> + <button class="button-nine buttons num">9</button> + </div> + </body> + <script src="./script.js" defer></script> </html> @@ -1,107 +1,118 @@ -// Teclas +let results = document.querySelector('.results') +let answer = ''; +let answered = false; -let resultado = document.querySelector('.resultado') -const c = document.querySelector('.botao-c') -const X = document.querySelector('.botao-X') -const ponto = document.querySelector('.botao-ponto') +const c = document.querySelector('.button-c') +const X = document.querySelector('.button-X') +const dot = document.querySelector('.button-dot') const num = document.querySelectorAll('.num') const op = document.querySelectorAll('.sp') -// Resposta - -let resposta = ''; - - -//Numeros para a resposta +// Numbers num[0].addEventListener('click', () => { - resposta += '0'; - resultado.textContent = resposta; + answer += '0'; + results.textContent = answer; }) num[1].addEventListener('click', () => { - resposta += '1'; - resultado.textContent = resposta; + answer += '1'; + results.textContent = answer; }) num[2].addEventListener('click', () => { - resposta += '2'; - resultado.textContent = resposta; + answer += '2'; + results.textContent = answer; }) num[3].addEventListener('click', () => { - resposta += '3'; - resultado.textContent = resposta; + answer += '3'; + results.textContent = answer; }) num[4].addEventListener('click', () => { - resposta += '4'; - resultado.textContent = resposta; + answer += '4'; + results.textContent = answer; }) num[5].addEventListener('click', () => { - resposta += '5'; - resultado.textContent = resposta; + answer += '5'; + results.textContent = answer; }) num[6].addEventListener('click', () => { - resposta += '6'; - resultado.textContent = resposta; + answer += '6'; + results.textContent = answer; }) num[7].addEventListener('click', () => { - resposta += '7'; - resultado.textContent = resposta; + answer += '7'; + results.textContent = answer; }) num[8].addEventListener('click', () => { - resposta += '8'; - resultado.textContent = resposta; + answer += '8'; + results.textContent = answer; }) num[9].addEventListener('click', () => { - resposta += '9'; - resultado.textContent = resposta; + answer += '9'; + results.textContent = answer; }) -// Operacoes +// Operations op[0].addEventListener('click', () => { - resposta += '/'; - resultado.textContent = resposta; + answer += '/'; + results.textContent = answer; }) op[1].addEventListener('click', () => { - resposta += '*'; - resultado.textContent = resposta; + answer += '*'; + results.textContent = answer; }) op[2].addEventListener('click', () => { - resposta += '-'; - resultado.textContent = resposta; + answer += '-'; + results.textContent = answer; }) op[3].addEventListener('click', () => { - resposta += '+'; - resultado.textContent = resposta; + answer += '+'; + results.textContent = answer; }) +// Equals (=) + op[4].addEventListener('click', () => { - resposta = eval(resposta); - resultado.textContent = resposta; + answered = true; + answer = eval(answer); + results.textContent = answer; }) -ponto.addEventListener('click', () => { - resposta += '.'; - resultado.textContent = resposta; +// Dot (.) + +dot.addEventListener('click', () => { + answer += '.'; + results.textContent = answer; }) +// Clear (C) + c.addEventListener('click', () => { - resposta = ''; - resultado.textContent = resposta; + answer = ''; + results.textContent = answer; }) +// Remove (X) + X.addEventListener('click', () => { - resposta = resposta.slice(0, -1); - resultado.textContent = resposta; + if (answered == true) { + answer = ''; + results.textContent = answer; + answered = false; + return; + } + answer = answer.slice(0, -1); + results.textContent = answer; }) @@ -13,50 +13,50 @@ body { font-weight: 700; display: grid; grid-template-areas: - "resultado resultado resultado resultado" + "results results results results" "C C X div" - "sete oito nove vez" - "quatro cinco seis men" - "um dois tres mai" - "ze ze ponto eq" + "seven eight nine mult" + "four five six min" + "one two three plus" + "z z dot eq" } -.botao { +.buttons { padding: 2.5rem; font-size: 26px; background-color: #444; border: 3px solid #666; } -.botao:hover { +.buttons:hover { opacity: 0.8;; } -.resultado { - grid-area: resultado; +.results { + grid-area: results; border-top: 6px solid #666; border-left: 6px solid #666; border-right: 6px solid #666; - overflow: scroll; + overflow: auto; } -.resultado:hover { +.results:hover { opacity: 1; } -.botao-c { +.button-c { grid-area: C; border-left: 6px solid #666; } -.botao-ze { - grid-area: ze; +.button-z { + grid-area: z; border-left: 6px solid #666; border-bottom: 6px solid #666; } -.botao-X { +.button-X { grid-area: X; color: lightcoral; } @@ -66,69 +66,69 @@ body { border-right: 6px solid #666; } -.botao-div { +.button-div { grid-area: div; } -.botao-vez { - grid-area: vez; +.button-mult { + grid-area: mult; } -.botao-men { - grid-area: men; +.button-min { + grid-area: min; } -.botao-mai { - grid-area: mai; +.button-plus { + grid-area: plus; } -.botao-eq { +.button-eq { grid-area: eq; border-bottom: 6px solid #666; } -.botao-ponto { - grid-area: ponto; +.button-dot { + grid-area: dot; border-bottom: 6px solid #666; } -.botao-um { - grid-area: um; +.button-one { + grid-area: one; border-left: 6px solid #666; } -.botao-dois { - grid-area: dois; +.button-two { + grid-area: two; } -.botao-tres { - grid-area: tres; +.button-three { + grid-area: three; } -.botao-quatro { - grid-area: quatro; +.button-four { + grid-area: four; border-left: 6px solid #666; } -.botao-cinco { - grid-area: cinco; +.button-five { + grid-area: five; } -.botao-seis { - grid-area: seis; +.button-six { + grid-area: six; } -.botao-sete { - grid-area: sete; +.button-seven { + grid-area: seven; border-left: 6px solid #666; } -.botao-oito { - grid-area: oito; +.button-eight { + grid-area: eight; } -.botao-nove { - grid-area: nove; +.button-nine { + grid-area: nine; } @media screen and (max-width: 375px){ @@ -137,12 +137,12 @@ body { top: 5%; } - .resultado { + .results { min-width: 230px; min-height: 40px; } - .botao { + .buttons { padding: 0.5rem; font-size: 28px; } @@ -154,12 +154,12 @@ body { top: 5%; } - .resultado { + .results { min-width: 256px; min-height: 40px; } - .botao { + .buttons { padding: 1rem; font-size: 30px; } @@ -170,7 +170,7 @@ body { width: 80vw; } - .botao { + .buttons { padding: 1rem; font-size: 30px; } @@ -182,7 +182,7 @@ body { left: 30%; } - .botao { + .buttons { padding: 1.5rem; font-size: 30px; } @@ -194,7 +194,7 @@ body { left: 30%; } - .botao { + .buttons { padding: 1.5rem; font-size: 30px; } @@ -206,7 +206,7 @@ body { left: 35%; } - .botao { + .buttons { padding: 1.5rem; font-size: 30px; } |