Javascript Update

author: lucashemi <lucasxberger@gmail.com> 2023-01-04 19:24:50 -0300
committer: lucashemi <lucasxberger@gmail.com> 2023-01-04 19:24:50 -0300
commit: 0cdfcee8cb3e63d3b46342e203ce1899221e83f0 (patch)
tree: b775dcbe7f077add5a590223cdf4ce41aad0bb99
parent: c8a8bcb952a31e678b85e31d455ce03d440682fe (diff)
3 files changed, 42 insertions, 135 deletions
diff --git a/index.html b/index.html
index f648386..aa37194 100644
--- a/index.html
+++ b/index.html
@@ -10,29 +10,25 @@
     </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>
-
+            <span class="results buttons"></span>
+            <button class="button-C buttons data-value">C</button>
             <button class="button-X buttons">X</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-div buttons sp" data-value="/">/</button>
+            <button class="button-mult buttons sp" data-value="*">*</button>
+            <button class="button-min buttons sp" data-value="-">-</button>
+            <button class="button-plus buttons sp" data-value="+">+</button>
             <button class="button-eq buttons sp">=</button>
-
-            <button class="button-dot buttons">.</button>
-
-            <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>
+            <button class="button-dot buttons" data-value=".">.</button>
+            <button class="button-one buttons num" data-value="1">1</button>
+            <button class="button-two buttons num" data-value="2">2</button>
+            <button class="button-three buttons num" data-value="3">3</button>
+            <button class="button-four buttons num" data-value="4">4</button>
+            <button class="button-five buttons num" data-value="5">5</button>
+            <button class="button-six buttons num" data-valuem="6">6</button>
+            <button class="button-seven buttons num" data-value="7">7</button>
+            <button class="button-eight buttons num" data-value="8">8</button>
+            <button class="button-nine buttons num" data-value="9">9</button>
+            <button class="button-zero buttons num" data-value="0">0</button>
         </div>
     </body>
     <script src="./script.js" defer></script>
diff --git a/script.js b/script.js
index 90ada2d..bf06a5a 100644
--- a/script.js
+++ b/script.js
@@ -1,118 +1,28 @@
 let results = document.querySelector('.results')
-let answer = '';
-let answered = false;
 
-const c = document.querySelector('.button-c')
+const nod = document.querySelectorAll('[data-value]')
+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')
+const eq = document.querySelector('.button-eq')
 
-// Numbers
-
-num[0].addEventListener('click', () => {
-    answer += '0';
-    results.textContent = answer;
-})
-
-num[1].addEventListener('click', () => {
-    answer += '1';
-    results.textContent = answer;
-})
-
-num[2].addEventListener('click', () => {
-    answer += '2';
-    results.textContent = answer;
-})
-
-num[3].addEventListener('click', () => {
-    answer += '3';
-    results.textContent = answer;
-})
-
-num[4].addEventListener('click', () => {
-    answer += '4';
-    results.textContent = answer;
-})
-
-num[5].addEventListener('click', () => {
-    answer += '5';
-    results.textContent = answer;
-})
-
-num[6].addEventListener('click', () => {
-    answer += '6';
-    results.textContent = answer;
-})
-
-num[7].addEventListener('click', () => {
-    answer += '7';
-    results.textContent = answer;
-})
-
-num[8].addEventListener('click', () => {
-    answer += '8';
-    results.textContent = answer;
-})
-
-num[9].addEventListener('click', () => {
-    answer += '9';
-    results.textContent = answer;
-})
-
-// Operations
-
-op[0].addEventListener('click', () => {
-    answer += '/';
-    results.textContent = answer;
-})
-
-op[1].addEventListener('click', () => {
-    answer += '*';
-    results.textContent = answer;
-})
-
-op[2].addEventListener('click', () => {
-    answer += '-';
-    results.textContent = answer;
-})
-
-op[3].addEventListener('click', () => {
-    answer += '+';
-    results.textContent = answer;
-})
-
-// Equals (=)
-
-op[4].addEventListener('click', () => {
-    answered = true;
-    answer = eval(answer);
-    results.textContent = answer;
-})
-
-// Dot (.)
-
-dot.addEventListener('click', () => {
-    answer += '.';
-    results.textContent = answer;
+// NOD (Numbers, Operations and Dot)
+nod.forEach( (element) => {
+    element.addEventListener('click', (event) => {
+        results.textContent += event.target.dataset.value;
+    })
 })
 
 // Clear (C)
-
-c.addEventListener('click', () => {
-    answer = '';
-    results.textContent = answer;
+C.addEventListener('click', () => {
+    results.textContent = '';
 })
 
 // Remove (X)
-
 X.addEventListener('click', () => {
-	if (answered == true) {
-    	answer = '';
-    	results.textContent = answer;
-    	answered = false;
-    	return;
-    }
-    answer = answer.slice(0, -1);
-    results.textContent = answer;
+    results.textContent = results.textContent.toString().slice(0, -1);
 })
+
+// Equals (=)
+eq.addEventListener('click', () => {
+    results.textContent = eval(results.textContent);
+})
+\ No newline at end of file
diff --git a/style.css b/style.css
index 66177a4..8a48b86 100644
--- a/style.css
+++ b/style.css
@@ -3,6 +3,7 @@ body {
 }
 
 .container {
+    box-shadow: 14px 14px 5px #222;
     width: 30vw;
     font-family: sans-serif;
     color: white;
@@ -14,11 +15,11 @@ body {
     display: grid;
     grid-template-areas:
     "results results results results" 
-    "C C X div"
+    "clear clear X div"
     "seven eight nine mult"
     "four five six min"
     "one two three plus"
-    "z z dot eq"
+    "zero zero dot eq"
 }
 
 
@@ -30,7 +31,7 @@ body {
 }
 
 .buttons:hover {
-    opacity: 0.8;;
+    opacity: 0.8;
 }
 
 .results {
@@ -45,13 +46,13 @@ body {
     opacity: 1;
 }
 
-.button-c {
-    grid-area: C;
+.button-C {
+    grid-area: clear;
     border-left: 6px solid #666;
 }
 
-.button-z {
-    grid-area: z;
+.button-zero {
+    grid-area: zero;
     border-left: 6px solid #666;
     border-bottom: 6px solid #666;
 }
@@ -210,4 +211,4 @@ body {
         padding: 1.5rem;
         font-size: 30px;
     }
-}
+}
+\ No newline at end of file
author	lucashemi <lucasxberger@gmail.com>	2023-01-04 19:24:50 -0300
committer	lucashemi <lucasxberger@gmail.com>	2023-01-04 19:24:50 -0300
commit	0cdfcee8cb3e63d3b46342e203ce1899221e83f0 (patch)
tree	b775dcbe7f077add5a590223cdf4ce41aad0bb99
parent	c8a8bcb952a31e678b85e31d455ce03d440682fe (diff)