Previous click event not removing

Hi guys,could you please take a look at this site I’m building

There’s a click event on all the timeframes,i.e the daily,weekly and monthly timeframes. The event adds a color to each of them as you click them. But when you click a different timeframe the previous event(the color) doesn’t go away. How is that fixed please. It’s my first vanilla js project lol . I’d also appreciate your reviews.

https://sukodes.github.io/Timetracking-Dashboard/

Hi how are you? I give you a solution that works.
But first of all think how to do it yourself, we can cause the same effect without using JS, simply using CSS and the : active pseudo-class. If you can’t figure out how to do it, keep reading.

I removed the following block from the script:

function func(e){
    e.target.classList.add('bg-color-timeframes');
} 

Instead, I went to styles.css and modified the bg-color-timeframes class to be bg-color-p: active, as follows:

.bg-color-p {
   color:   hsl(235, 45%, 61%);
}
.bg-color-p:active {
    color: hsl(236, 100%, 87%);
}

Hope this can help you

Hi! , I’m doing great, thank you.
I tried your solution and it kind of works, thank you. But the problem now is it really doesnt stay until the next click, the :active just kind of blinks on every click and goes away. Do you know of a way this can be done?

Hi, how are you today, my suggestion is that you should use the :focus pseudo-class instead of :active so it would look something like this.

.bg-color-p {
   color:   hsl(235, 45%, 61%);
}
.bg-color-p:focus{
    color: hsl(236, 100%, 87%);
}

Hi Solomon, the: focus pseudo-class doesn’t give me that particular result, I did it with JS. And I leave you the explanation in case it is necessary, if not better.

Use the func (e) function you already have. First we tell the function that all .timeframe elements must have ONLY the timeframe bg-color-p
classes. And after that, inside the same func(e), we tell the function that the element that received the click, must ONLY have the timeframe bg-color-p-timeframe classes.
To get the array of all the .timeframe I used the let timeframe variable you already had. And the function is still at the beginning of the script.

Only if you couldn’t do it look at the code.

function func(e){
  for(let i=0; i<timeframe.length; i++){ 
    timeframe[i].className='timeframe bg-color-p'; 
  }
  e.target.className="timeframe bg-color-p-timeframe"
} 

In this way, every time we click, all elements receive their default class. And after that, the lucky p gets another class

Okay @juangpereira it’s working, thanks

1 Like

thank you very much @juangpereira. It’s working now. But I still do npt seem to understand how the bg-color-p-timeframe class came about. It wasnt defined in the style.css :thinking:

1 Like

Now I can’t find the class in style.css. But when I opened the file the first time, if I remember correctly it was like this:

.bg-color-p {
   color:   hsl(235, 45%, 61%);
}
.bg-color-p-timeframe {
    color: hsl(236, 100%, 87%);
}

But now it does not exist. I don’t know what happened, congratulations, you did magic

yeah, I removed the class and renamed it before I pushed the code. I just didnt know I named a class like that lol

There isn’t such a class. It is a non-existing class name that causes the p element to inherit the color from the body selector.

I would suggest using classList add/remove instead of wiping all the classes like that. It isn’t a very future-proof approach. I’m also not sure why you are using Array.from and map. Modern browsers support forEach on the nodeList that querySelectorAll returns.

Oh wao, didnt know I could use forEach directly. Like I said,it’s my first DOM manipulation project, I guess I’m new to all these.Thanks anyway.This has helped me.

I looked at the code at one point and you had a bg-color-timeframes class, but I don’t see it now. If you did still have the class the code might look something like this. I change the overall code a bit.

const timeframes = document.querySelectorAll('.timeframe');

function addActiveClass({target}){
  timeframes.forEach(timeframe => {
    timeframe.classList.remove('bg-color-timeframes');
  })
  target.classList.add('bg-color-timeframes');
}

timeframes.forEach(timeframe => {
  timeframe.addEventListener('click', addActiveClass)
})
1 Like

Do you mean the bg-color-p-timeframe class? Because it got me confused in the first place lol, I didn’t name such class

Yes, it basically breaks the .bg-color-p class you have on the element so the element instead inherits the color from the body selector.

Edit: It is basically doing this. If you want to keep that logic (i.e. removing the color class and letting the element inherit the color from body).

const timeframes = document.querySelectorAll('.timeframe');

function addActiveClass({target}){
  timeframes.forEach(timeframe => {
    timeframe.classList.add('bg-color-p');
  })
  target.classList.remove('bg-color-p');
}

timeframes.forEach(timeframe => {
  timeframe.addEventListener('click', addActiveClass)
})
1 Like

Oh wow, thanks alot. Will give this shot!

Oh, I get it now,thanks

1 Like

No problem.

I will say the logic of the last code I posted feels a little backward to me and I just posted it to better show what was happening. I would find it slightly confusing looking at the code as an outsider and it also ties the active link style to the body styles which isn’t ideal.

I think what you had before where you were using an active class is better. But it’s up to you.

1 Like

Hi @olasunkanmi, can you please tell me how you made the SHARP POINTING Down borders on each of the cards, (Work, Play,Study… etc) and can it be achieved with CSS? I’ll be glad if anyone helps me out… :wink:

Hi @Solomoni I’m sorry I’m just replying this, I haven’t been on for a while. Do you mean the sharp angle between the cards and the child card( I mean the inner child that shows the activity of the user)?

Thanks @olasunkanmi for replying though. I would like to post image classifying the issue but I’ve failed to :tired_face: