Building a calculator app

JavaScript
#1

please im having problem with my assessment , i dont know why m classlist isnt working here in my code , its been 18 hours , i have been stucked in this line , check out code below .

const calculator = document.querySelector(".calculator")
const keys = calculator.querySelector(".calculator__keys");
const display  = document.querySelector(".calculator__display")

keys.addEventListener('click', e =>{
   if(e.target.matches("button")){
      const  key = e.target;
      const action = key.dataset.action;
      const keyContent = key.textContent;
      const displayedNum = display.textContent;



      if(!action){
         console.log("number key");
         if(displayedNum === "0"){
            display.textContent = keyContent
         } 
         else{
            display.textContent = displayedNum + keyContent
         }

      }

      if(action === "add" || action === "subtract"
      || action === "multiply" || action === "divide"){
         key.classList.add('is-depressed')

       
      }

      if(action === "decimal"){
         console.log("decimal key!");
         display.textContent = displayedNum + "."

      }


      if(action === "clear"){
         console.log('clear key!')

      }

     if(action === "calculate"){
      console.log("equal key!")

     }
   }
})
#2

Which classList are you talking about? What are you trying to do vs. what is happening specifically? Also, please post your HTML and CSS.

Thank you.

1 Like
#3

As said, it would help if you told us how it isn’t working. Is the class not getting applied or is the CSS just not doing what you think it should be doing? If you look at the DOM using the dev tools is the class being applied or not?

Please post all the code HTML/CSS/JS.

As an aside, you have a variable called keys which is plural. But querySelector will only return a single element, are you sure you don’t want querySelectorAll and then loop the keys so you can add the event listener to all of the buttons?

#4

i tried this concept you said i should implement but my depressed class list is still bad .
heres the js ccode and also a css for this

const calculator = document.querySelector(".calculator")
const keys = document.querySelectorAll('.calculator__keys');
const display= document.querySelector(".calculator__display")
keys.forEach(key => {
   key.addEventListener('click', e =>{
      if(e.target.matches("button")){
     k = e.target
     const action  = k.dataset.action;
     const displayedNum = display.textContent;
     const keyText = k.textContent;


     if(!action){
      console.log("number key")
      if(displayedNum === "0"){
        display.textContent = keyText 

      }else{
         display.textContent = displayedNum + keyText
      }

     }
     if(action === "add" || action === "subtract"
     || action === "multiply" || action === "divide"){
     console.log("operator key")
     k.classList.add("is-depressed")
     }
     if( action === "decimal"){
      console.log("decimal key")
      display.textContent = displayedNum + "."

     }
     if(action === "clear"){
      console.log("clear key")

     }
     if(action === "calculate"){
      console.log("equal key")

     }
   }
   });
   
});

//css //

.calculator__keys > *:active::before,
     .calculator__keys > .is-depressed::before {
       background-color: rgba(0, 0, 0, 0.2);
       bottom: 0;
       box-shadow: 0 0 6px 0 rgba(0, 0, 0, 0.5) inset;
       content: "";
       left: 0;
       opacity: 0.3;
       position: absolute;
       right: 0;
       top: 0;
       z-index: 1;
     }

note this is the css for the depressed

#5

We really need to see the HTML as well. Please post it to Codepen so we do not have to set it up to test it.

Are you sure your selector is correct. Again is the class getting applied but the styles are not working or is the class not getting applied at all?

#6

okay thanks , here’s the code from code pen .

#7
#8

I am not sure what happens to you, but I suppose you want to add new key/value pair to the event. target.classList attribute.

let kd = k.classList.add(“is-depressed”)
// here kd is undefined but the key/value is added
console.log(k, k.classList);
console.log(k.classList[‘1’])
/*
DOMTokenList [ “key–operator”, “is-depressed” ]
0: “key–operator”
1: “is-depressed”
length: 2
value: “key–operator is-depressed”
*/

So the class ‘is-depressed’ is being added to the operator key.
You can check it by adding a style for ‘.is-depressed’ to your CSS

.is-depressed {
color : #f00;
}

and your key will turn red after you press it for the first time

#9

@satochi As @andreslavila93 mentions, the class is being added to the key. You just did not have any styling on the class to make it noticeable.

On another note, I see the following CSS class:

.calculator__keys:active ::before{
       background-color: rgba(0, 0, 0, 0.2);
       bottom: 0;
       box-shadow: 0 0 6px 0 rgba(0, 0, 0, 0.5) inset;
       content: "";
       left: 0;
       opacity: 0.3;
       position: absolute;
       right: 0;
       top: 0;
       z-index: 1;
     }

I find it visually distracting to having the entire page be affected by this styling for a single button. What are you trying to accomplish with this particular selector?

#10

I changed this already to and the depressed Is working perfectly, but , In this code I want the operator to still hold only the first value and then when a c lick on another key it displayed second value

#11

For example , 1 is displayed in my calculator screen and then I clicked on the an operator key , it then depresses operator key I want when I clicked on second number key I want it to override the first and then I use my equal key to bring back the desired sun