diff options
-rw-r--r-- | index.html | 38 | ||||
-rw-r--r-- | script.js | 122 | ||||
-rw-r--r-- | style.css | 17 |
3 files changed, 42 insertions, 135 deletions
@@ -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> @@ -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 @@ -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 |