From 0cdfcee8cb3e63d3b46342e203ce1899221e83f0 Mon Sep 17 00:00:00 2001 From: lucashemi Date: Wed, 4 Jan 2023 19:24:50 -0300 Subject: Javascript Update --- index.html | 38 +++++++++---------- script.js | 122 ++++++++----------------------------------------------------- style.css | 17 +++++---- 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 @@

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

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 -- cgit v1.2.3-18-g5258