What I’ve Done So Far Pt. 2 (JS)
With my past blogs, I’ve been leading up to my current project, this is what I’ve been using my time to work on, A simple menu for Rooster’s created with HTML, CSS and JavaScript. The JavaScript part is gonna be kinda complicated for me to explain as I have limited experience when translating JavaScript into modern day english. Please bare with me while I attempt to describe what goes on with my Rooster’s Menu adding JavaScript to it.
The menu I’ve created, I wanted it to be as simple as possible but with a bit of elegance to add onto it. So what I sought after to do was to create a simple looking menu but to have it animate a fade in and out whenever its clicked. In order to do this animation i needed to create both CSS and JavaScript to have it work properly. The CSS portion is what causes the fade in and out, While the JavaScript version creates the action or “event” when the button is clicked to trigger the action we want. Provided below is the code I’ve written in order to have the event triggered whenever clicked on the menu.
Let’s start with the first part of the code. I create an event listener that waits for a click and then creates a const that I named dropdownButton that matches an event target of “[data-dropdown-button]” that I will show where I’ve planted within my HTML code. The second line within the JavaScript code is for when the target closest to data-dropdown does not work, we will return nothing. Nothing will happen to the program.
What we have going on here is the to have current dropdown within a dropDown button if statement. So basically, if dropdownButton is activated, we will have the “active” be, well… active, it’ll make more sense when I show more of what i mean by that with an example. Right after we have querySelector have an active state in a forEach loop that if we have a dropdown equal to a currentDropdown we will return… nothing! If it doesn’t match, we will remove the active state. Meaning that we can click within the box where we have our links so nothing will happen and it won’t disappear. But when we click outside the box of options we have the classList.remove(‘active’) in affect.
That’s my best way of trying to explain the JavaScript within my menu project! Sorry if it’s not the best explanation but I would love some feedback on how to word these kinds of things a bit better. Once again thank you so much for stopping by and reading my blog! Have a great day and keep coding on!