Kevin Powell - Community•8mo 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

catOP•8mo 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•8mo 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•8mo ago

querySelectorAll does not return an array

catOP•8mo ago

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

Mannix•8mo ago

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

Jochem•8mo ago

That's also a very good reason 😄

catOP•8mo ago

spread operator?

Mannix•8mo ago

[...]

Jochem•8mo ago

querySelectorAll returns a NodeList

catOP•8mo ago

btw queryselectorall never returns an array? ohh

Mannix•8mo ago

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

Jochem•8mo ago

NodeLists are array-like, but not quite arrays

catOP•8mo ago

wow i didnt know these stuff

Jochem•8mo 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•8mo ago

nodelist thats the word i was missing thank you Jochem 😄

catOP•8mo ago

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

Jochem•8mo ago

sorry, I misread it again, please ignore 🙂

catOP•8mo ago

btw it returns false everytime even if the condition is true

Jochem•8mo ago

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

catOP•8mo 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•8mo 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•8mo ago

Smells of the x/y problem, yeah?

ἔρως•8mo ago

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

Jochem•8mo 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

catOP•8mo 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•8mo ago

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

13eck•8mo ago

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

catOP•8mo ago

ohh so wait

13eck•8mo ago

We have been lol

catOP•8mo ago

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

13eck•8mo ago

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

catOP•8mo ago

okk

ἔρως•8mo ago

:active in css should be enough?

catOP•8mo ago

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

13eck•8mo ago

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

catOP•8mo ago

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

Jochem•8mo 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•8mo 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

catOP•8mo ago

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

Jochem•8mo ago

yeah, do what Beck said

catOP•8mo ago

ohk

13eck•8mo ago

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

catOP•8mo ago

what does saving state mean?

13eck•8mo 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

catOP•8mo ago

okay

MarkBoots•8mo ago

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

ἔρως•8mo ago

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

Mannix•8mo ago

hey i also mentioned that Marky 😡

ἔρως•8mo 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•8mo ago

☝️ @ἔρως

ἔρως•8mo ago

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

MarkBoots•8mo ago

sorry, i missed reading this

Mannix•8mo ago

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

catOP•8mo ago

im up until here

13eck•8mo ago

They're typing. Be patient 😉

ἔρως•8mo ago

actually i have an idea

catOP•8mo 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

ἔρως•8mo ago

https://jsfiddle.net/b2s7fk01/

Edit fiddle - JSFiddle - Code Playground

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

ἔρως•8mo ago

here's my approach

catOP•8mo 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?

ἔρως•8mo ago

its just an easy approach

catOP•8mo ago

still

ἔρως•8mo ago

same as now

catOP•8mo ago

but u said u made it last year

ἔρως•8mo 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

catOP•8mo ago

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

ἔρως•8mo ago

no it was on a may/june

catOP•8mo ago

😭 but which year 2021 2000 1900

ἔρως•8mo ago

been programming for about 18 years

catOP•8mo ago

oh now it makes sense

ἔρως•8mo ago

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

catOP•8mo ago

wtf i just realized this 😭

ἔρως•8mo ago

overcomplicating something incredibly simple

catOP•8mo ago

yaa lol

ἔρως•8mo ago

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

catOP•8mo 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

ἔρως•8mo 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

catOP•8mo 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?

ἔρως•8mo ago

good question make a codepen, get an answer

catOP•8mo ago

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

catOP•8mo ago

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

Tenor

catOP•8mo ago

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

Alex Summers

CodePen

bGJZMqg

...

catOP•8mo ago

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

ἔρως•8mo ago

looks pretty

catOP•8mo ago

thanks

catOP•8mo ago

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

Alex Summers

CodePen

bGJZMqg

...

catOP•8mo 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