Kevin Powell - Community•4mo ago

creating calculator

  let operatorsArray = document.querySelectorAll('.operator')
  function bgColor(a){
  let bgColorValue = window.getComputedStyle(a)
  return bgColorValue.backgroundColor == "white"
}


console.log(operatorsArray.some(bgColor))

  let operatorsArray = document.querySelectorAll('.operator')
  function bgColor(a){
  let bgColorValue = window.getComputedStyle(a)
  return bgColorValue.backgroundColor == "white"
}


console.log(operatorsArray.some(bgColor))

87 Replies

cat•4mo ago

this is the code can someone tell me what did i do wrong

calculator.js:83 Uncaught TypeError: operatorsArray.some is not a function

calculator.js:83 Uncaught TypeError: operatorsArray.some is not a function

this is the error message im getting 😢

Jochem•4mo ago

it looks like you're declaring operatorsArray in a block using let, and it goes out of scope at the closing curly brace

Mannix•4mo ago

querySelectorAll does not return an array

cat•4mo ago

i used const this time and it still didnt work why not?

Mannix•4mo ago

you need to use a spread operator or array.from method

Jochem•4mo ago

That's also a very good reason 😄

cat•4mo ago

spread operator?

Mannix•4mo ago

[...]

Jochem•4mo ago

querySelectorAll returns a NodeList

cat•4mo ago

btw queryselectorall never returns an array? ohh

Mannix•4mo ago

let operatorsArray = [...document.querySelectorAll('.operator')]

Jochem•4mo ago

NodeLists are array-like, but not quite arrays

cat•4mo ago

wow i didnt know these stuff

Jochem•4mo ago

https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/Spread_syntax\

MDN Web Docs

Spread syntax (...) - JavaScript | MDN

The spread (...) syntax allows an iterable, such as an array or string, to be expanded in places where zero or more arguments (for function calls) or elements (for array literals) are expected. In an object literal, the spread syntax enumerates the properties of an object and adds the key-value pairs to the object being created.

Mannix•4mo ago

nodelist thats the word i was missing thank you Jochem 😄

cat•4mo ago

omg it seems its working it just returned false in console log lets see i was reading ur message😭

Jochem•4mo ago

sorry, I misread it again, please ignore 🙂

cat•4mo ago

btw it returns false everytime even if the condition is true

Jochem•4mo ago

getComputedStyle won't output "white", I think it just outputs rgb color values

cat•4mo ago

oh ya😭 some people told me to use getcomputedstyle instead of style how should i get the value of background color in string

Jochem•4mo ago

.style only returns the inline styles of an element why do you need to know the background color in this way? like, what are you trying to accomplish?

13eck•4mo ago

Smells of the x/y problem, yeah?

ἔρως•4mo ago

or someone trying to do something and going to it through the scenic route

Jochem•4mo ago

yeah, definitely smells like that. I've never really had the need to look at the computed style rules in Javascript, there's pretty much always a better, easier option like selecting by class or some data attribute

cat•4mo ago

ohh wait nvm actually i dont know how should i know the background color value do u know any better method except class

Jochem•4mo ago

I'm just confused why you need to know it in the first place

13eck•4mo ago

The question still remains: what are you trying to do? IE, why do you need the background colour?

cat•4mo ago

ohh so wait

13eck•4mo ago

We have been lol

cat•4mo ago

actually im making calculator so whenever i click on an operator button i want its background color turned white

13eck•4mo ago

Can you please use complete sentences and not send tidbits one line at a time?

cat•4mo ago

okk

ἔρως•4mo ago

:active in css should be enough?

cat•4mo ago

and when i click on any numbers button, i wanna know if any operators background color is white

13eck•4mo ago

To what end? That's what we're trying to get at. Why do you need to know that?

cat•4mo ago

i wanted to do it through js but i will have to use css if theres no way

Jochem•4mo ago

so, the easiest way to do that is to just add a class to the button that turns it white, and check if that class is present later

13eck•4mo ago

If you're trying to use that to see what operation to use don't use bg colour. Save the button press in a variable and read that

cat•4mo ago

so that i can calculate the first input and second input incase any operator is clicked oh

Jochem•4mo ago

yeah, do what Beck said

cat•4mo ago

ohk

13eck•4mo ago

You should be saving state in JS, not via HTML/CSS

cat•4mo ago

what does saving state mean?

13eck•4mo ago

something like:

let state = {
  currentOperator: undefined,
  numbersToOperateOn: []
}

const operatorButtonClicked = (ev) => {
  state.currentOperator = ev.target.data.operation
}

const numberButtonClicked = (button) => {
  numbersToOperateOn.push(button.valueAsNumber)
}

let state = {
  currentOperator: undefined,
  numbersToOperateOn: []
}

const operatorButtonClicked = (ev) => {
  state.currentOperator = ev.target.data.operation
}

const numberButtonClicked = (button) => {
  numbersToOperateOn.push(button.valueAsNumber)
}

So you have a global object that stores what's being used. The first function there changes the opeartor to +, -, /, or * as necessary (based on the button pressed) and the array holds the numbers that need be operated on. So if you type 15 + 4 the 15 is pushed into the array, the + is added as the operator and then 4 is pused to the array. You'll want to add more functionality to actually do the operation on each operatorButtonClicked—so the next time you click on, say, - it'll add 15 and 4, clear the array, and add 19 to the array I'd suggest using a switch statement to handle the operation of currentOperator

cat•4mo ago

okay

MarkBoots•4mo ago

Bit late, but just some additional info Instead of the spread operator you can also use Array.from() on the node list.

ἔρως•4mo ago

i would take a different and easier approach a calculator is much more complicated than it seems

Mannix•4mo ago

hey i also mentioned that Marky 😡

ἔρως•4mo ago

start out with 0 if the user types a number, replace it with the typed number, up until how manyh digits you wanna handle the user then presses an operator store the value in a variable

13eck•4mo ago

☝️ @ἔρως

ἔρως•4mo ago

it's an algorithm: a list of steps, but i forgot to put it on a list continuing

MarkBoots•4mo ago

sorry, i missed reading this

Mannix•4mo ago

don't worry i'm just messing with ya 😄

cat•4mo ago

im up until here

13eck•4mo ago

They're typing. Be patient 😉

ἔρως•4mo ago

actually i have an idea

cat•4mo ago

no i mean im at that step at the moment actually till the second variable is stored im in that step cant think of next step

ἔρως•4mo ago

https://jsfiddle.net/b2s7fk01/

Edit fiddle - JSFiddle - Code Playground

Test your JavaScript, CSS, HTML or CoffeeScript online with JSFiddle code editor.

ἔρως•4mo ago

here's my approach

cat•4mo ago

yes i remember i still remember how long it took u to make it 10-15 minutes big brain btw how many years of programming experience u had when u made this?

ἔρως•4mo ago

its just an easy approach

cat•4mo ago

still

ἔρως•4mo ago

same as now

cat•4mo ago

but u said u made it last year

ἔρως•4mo ago

yes, but a year is 12 months and we're 4 months into the new year and that was 9-10 months into last year also, i started to program in may/june

cat•4mo ago

oh whatt sorry my cat was eating my mouse wire whatttt no way u started programming in may of 2023?

ἔρως•4mo ago

no it was on a may/june

cat•4mo ago

😭 but which year 2021 2000 1900

ἔρως•4mo ago

been programming for about 18 years

cat•4mo ago

oh now it makes sense

ἔρως•4mo ago

it's just a matter of simplifying and being able to recognize all requirements

cat•4mo ago

wtf i just realized this 😭

ἔρως•4mo ago

overcomplicating something incredibly simple

cat•4mo ago

yaa lol

ἔρως•4mo ago

why didn't you just attach event listeners to the buttons? that would have been far superior and easier than reading background colors

cat•4mo ago

let lastButtonPressed
let inputOne
let operator
let inputTwo

function addition(a, c) {
  return a + c
}
function subtraction(a, c) {
  return a - c
}
function multiplication(a, c) {
  return a * c
}
function divide(a, c) {
  return a / c
}
function operate(t) {
  switch (t) {
    case "plus":
      addition(inputOne, inputTwo)
      break
    case "divide":
      divide(inputOne, inputTwo)
      break
    case "minus":
      subtraction(inputOne, inputTwo)
      break
    case "multiply":
      multiplication(inputOne, inputTwo)
      break
  }
}

numbersArray.forEach((item) => {
  item.addEventListener("click", () => {

    if (lastButtonPressed == "operator") {
      result.textContent = ""
    }

    operatorsArray.forEach(item => {
      item.style.backgroundColor = "lightcoral"
    })

    if (result.textContent == 0) {
      result.textContent = item.dataset.value
    }

    else if (result.textContent != 0) {
      result.textContent += item.dataset.value
    }

    lastButtonPressed = "number"

  })
})

operatorsArray.forEach(item => {
  item.addEventListener("click", () => {

    lastButtonPressed = "operator"
    console.log(lastButtonPressed)

    inputOne = Number(result.textContent)
    operator = item.dataset.value

    item.style.backgroundColor = "white"
    if (inputOne != "") {
      inputTwo = result.textContent
    }
  })
})

calcPerform.addEventListener("click", () => {
  if (inputOne != "") {
    inputTwo = result.textContent
  }

  if (operator != '') {
    let answer = operate(operator)
    console.log(answer)
  }

})

let lastButtonPressed
let inputOne
let operator
let inputTwo

function addition(a, c) {
  return a + c
}
function subtraction(a, c) {
  return a - c
}
function multiplication(a, c) {
  return a * c
}
function divide(a, c) {
  return a / c
}
function operate(t) {
  switch (t) {
    case "plus":
      addition(inputOne, inputTwo)
      break
    case "divide":
      divide(inputOne, inputTwo)
      break
    case "minus":
      subtraction(inputOne, inputTwo)
      break
    case "multiply":
      multiplication(inputOne, inputTwo)
      break
  }
}

numbersArray.forEach((item) => {
  item.addEventListener("click", () => {

    if (lastButtonPressed == "operator") {
      result.textContent = ""
    }

    operatorsArray.forEach(item => {
      item.style.backgroundColor = "lightcoral"
    })

    if (result.textContent == 0) {
      result.textContent = item.dataset.value
    }

    else if (result.textContent != 0) {
      result.textContent += item.dataset.value
    }

    lastButtonPressed = "number"

  })
})

operatorsArray.forEach(item => {
  item.addEventListener("click", () => {

    lastButtonPressed = "operator"
    console.log(lastButtonPressed)

    inputOne = Number(result.textContent)
    operator = item.dataset.value

    item.style.backgroundColor = "white"
    if (inputOne != "") {
      inputTwo = result.textContent
    }
  })
})

calcPerform.addEventListener("click", () => {
  if (inputOne != "") {
    inputTwo = result.textContent
  }

  if (operator != '') {
    let answer = operate(operator)
    console.log(answer)
  }

})

this is my javascript at the moment omg im getting it

ἔρως•4mo ago

i would use a proper function for the event listeners you can then use the this variable, instead of fetching stuff outside the scope

cat•4mo ago

yeah something weird is happening im getting undefined when performing the operation (result) maybe scope issue like u said where should i make changes?

ἔρως•4mo ago

good question make a codepen, get an answer

cat•4mo ago

yooo the problem was that the functions in the switch case was not returning anything now its fixed and my calculator is functioning

cat•4mo ago

https://tenor.com/view/david-luiz-celebration-brazil-celebrate-david-luiz-celebrating-gif-10693340822646162370

Tenor

cat•4mo ago

https://codepen.io/Alex-Summers-the-scripter/pen/bGJZMqg

Alex Summers

CodePen

bGJZMqg

...

cat•4mo ago

obviously i need to do more editing the reset and del doesnt work at the moment but the operation finally works

ἔρως•4mo ago

looks pretty

cat•4mo ago

thanks

cat•4mo ago

https://codepen.io/Alex-Summers-the-scripter/pen/bGJZMqg

Alex Summers

CodePen

bGJZMqg

...

cat•4mo ago

btw guys can u see something weird is happening when i click " = " repeatedly after doing a minus or divide operation why is that happening? should i be worried about that? also when i do any operations on the default value "0", i get 0 or NaN as the result thats weird

Gaming

Programming

creating calculator