bug fix

author: lucashemi <lucasxberger@gmail.com> 2022-11-08 16:34:46 -0300
committer: lucashemi <lucasxberger@gmail.com> 2022-11-08 16:34:46 -0300
commit: c8a8bcb952a31e678b85e31d455ce03d440682fe (patch)
tree: d5664a32851a63cf322fe55296aebb3fc93b66e3
parent: a0abffba4b88f8287af73d63acc73af22dc71c7c (diff)
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 @@
 <!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>
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;
     }
author	lucashemi <lucasxberger@gmail.com>	2022-11-08 16:34:46 -0300
committer	lucashemi <lucasxberger@gmail.com>	2022-11-08 16:34:46 -0300
commit	c8a8bcb952a31e678b85e31d455ce03d440682fe (patch)
tree	d5664a32851a63cf322fe55296aebb3fc93b66e3
parent	a0abffba4b88f8287af73d63acc73af22dc71c7c (diff)