Js-Calculator

From c8a8bcb952a31e678b85e31d455ce03d440682fe Mon Sep 17 00:00:00 2001 From: lucashemi Date: Tue, 8 Nov 2022 16:34:46 -0300 Subject: bug fix --- README.md | 2 +- index.html | 64 ++++++++++++++++++------------------ script.js | 109 ++++++++++++++++++++++++++++++++++--------------------------- style.css | 102 ++++++++++++++++++++++++++++----------------------------- 4 files changed, 144 insertions(+), 133 deletions(-) diff --git a/README.md b/README.md index 5eb0d67..2a99ccb 100644 --- a/README.md +++ b/README.md @@ -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) diff --git a/index.html b/index.html index 97aa094..f648386 100644 --- a/index.html +++ b/index.html @@ -1,39 +1,39 @@ - - - - - - - Js-Calculator - - -

- 0 - - + + + + + + + Js-Calculator + + +

+ 0 + + - + - - - - - + + + + + - + - - - - - - - - - -

- - + + + + + + + + + +

+ + diff --git a/script.js b/script.js index 4a4043e..90ada2d 100644 --- a/script.js +++ b/script.js @@ -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; }) diff --git a/style.css b/style.css index 4de3bd8..66177a4 100644 --- a/style.css +++ b/style.css @@ -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; } -- cgit v1.2.3-18-g5258