@chrisyoung0101
Posted
Hi Davide, I like how you kept your script.js super simple or at least simple compared to what I used in my solution for this challenge :-). I think there's a lot for me to learn there. The "get" element function is a cool idea I hadn't thought of.
Question : You mentioned "capturing and bubbling" in your comment on my solution. I see that your buttons are in a parent div with id="buttons" and each button has attribute data-tab. How are you using data-tab? I see each data-tab has a value but not seeing where that value is being used. Anyways, just attempting to get a better grasp of the DOM's "capturing & bubbling" phase. Thanks.
@Da-vi-de
Posted
@chrisyoung0101 Right, that's a good question and it's in JS when things get interesting.
- The value is being used in JS precisely the last 2 lines of code:
document.querySelector(`.slider__content--${clicked.dataset.tab}`).classList.add('slider__content--active');
document.querySelector(`.slider__img--${clicked.dataset.tab}`).classList.add('slider__img--active');
with string interpolation the classes .slider__content-- and slider__img-- are selected, in HTML after those 2 hyphen there's the number, in JS the number is controlled by dataset.tab. What's important here is dataset that reads the tab which is the number. Then if you follow the chain as you can see i added the class active. It seems complicated but it's not. In a few words it's like you are telling: "Hey give me the right content based on number selection" and that's it!
- I used the
idfor another purpose: The geology image.
Thanks for asking.
