Before you dig deep into this, Let me explain how things will go down real quick. I will be talking about how everything went for me creating this project, then will get a bit too techy on you and talk about one particular issue that almost made me want to burn my laptop to the ground.
I will not explain everything I did, but if you are interested, I will link the repository at the end also a video of my project, to give you a better idea.
Let me take you back to a few months ago when I decided to code 5, projects out of my comfort zone to get a feel for JavaScript because, as we all know, it’s a hell of a beast to tackle, and boy, was I afraid to experiment with it and let me tell you I was dealing with so much self-doubt.
After looking around for ideas, I remembered I always wanted to try carousels, Although all the articles I read told me it was a bad idea since it is hard to make responsive and so many other reasons but I love a good challenge, so I went for it.
Let's fast-forward, I found a design that I liked and tweaked it a bit and started coding, and it was a smooth sailing well....
Until the JavaScript part started especially, DOM events and all hell broke loose.
I struggled a lot with everything and was feeling like a lost kid in a mall. Until I gave up and reminded myself asking for help is perfectly okay, and some amazing people helped me out get a basic idea of how to deal with DOM event. Therefore, got over my fear to some extent.
Now let a newbie get a bit techy on you.
When you click on a carousel item, it will add a CSS class that would expand to full size, show articles content (a close button and some extra text, etc.…).
By clicking on the close button, The class will be removed, but that did not happen because of the event bubbling up and hitting all its ancestor elements, and that would include the carousel item resulting in re-adding the class immediately.
It was an invisible issue until I caught it using the debugger.
That’s called event bubbling and honestly, I was scratching my head like wtf is that, why was it happening and how to prevent it in the future well just code a modal pop up instead of this little hack, and maybe, things will not get this complicated, but I digress.
What is event bubbling?
When an event is triggered on an element, it first runs the handlers on it then that same event will trigger across the same element's ancestors.
How to fix it ?
You need to add preventDefault and or stopPropagation into the event handlers. this stops the browser from letting the click event progress passed the event handler and hitting its parent element.
what's the difference between preventDefault and stopPropagation?
preventDefault:
A method that prevents the default behavior of an element, for example, if we use a button for navigation, it will prevent it from being clicked or allow the user to leave the page.
stopPropagation :
By default, all event handlers are registered in the bubbling phase. If you click on an element, the click event bubbles from the clicked element to the html element.
We need to use stopPropagation it will make it so that the first handler will run, but the event does not bubble any further up the chain, meaning no more handlers will be run.
We made it this far let's recap what I learned from this journey:
Asking for help does not mean you are less in anyway, in fact, it might give you a fresh perspective.
Don't overcomplicate stuff and always take the easier route.
Always plan how to code something instead of jumping into it.
If you have any feedback or a suggestion about anything in this post or about how I can improve any upcoming articles.
Feel free to comment below or contact me on Twitter!
Thank you, for reading this far. I hope you learned a thing or two.
Twitter Video | GitHub repository
I want to give a shout out to everyone who helped me.
check them out please, They have Amazing content.
Oldest comments (2)
👍
Congrats on ur first article 🙌. U've explained very well. Keep them coming 😆.