How do I make this modal hidden

JavaScript
1

From screen size of 650px upward, when the share button is clicked, a modal is displayed/visible using Javascript . How can I make this modal hidden when the same share button is clicked again.

I’m a struggling newbie in Javascript… Y’all help is needed.

https://codepen.io/Que0/pen/yLJOWZV

2

I think that CSS is better used to achieve this outcome, using media queries.

I’ll move this thread to the HTML+CSS forum to find out more.

3

It’s not a CSS/media query issue, I’m only having little problem with the JavaScript part.

4

Okay, back we go. Sorry for being so hasty - I was still dopey from having just woken up.
I’ll take a look and see what I can find.

5

Currently styles are being modified by JS, which. Typically JS and CSS should have a wall of separation between them, using HTML classes to control what occurs instead.

I’ve added a .hidden class to your General styles

.hidden {
  visibility: hidden;
}

and replaced the JS style modifications with class names instead:

// modal.style.visibility = 'hidden';
modal.classList.add('hidden');

function clickShare(e){
    // modal.style.visibility = 'visible';
    modal.classList.remove('hidden');
}

function share(e){
    // modal.style.visibility = 'hidden';
    modal.classList.add('hidden');
}

I also found the event listener names confusing to understand. Why were they confusing? My experience was that I was wanting to look at the function that triggers when you click on the share button, but didn’t know if it was the share function or the clickShare function. I was having to jump my attention back to the addEventListener functions to try and figure out which one was doing what.

The function names can prevent that from happening by being given more appropriate names, so I’ve renamed them using the standard convention of objectEventHandler.

// shareBtn.addEventListener('click', clickShare);
shareBtn.addEventListener('click', shareButtonClickHandler);
// shareModal.addEventListener('click', share);
shareModal.addEventListener('click', shareModalClickHandler);

// function clickShare(e){
function shareButtonClickHandler(e){

// function share(e){
function shareModalClickHandler(e){

The code still works in the same way that it did before, and we now have access to improved abilities.

We want to improve on what happens when the share button is clicked, so it’s the shareButtonClickHandler function that should gain the focus of our attention.

Currently we are just removing the hidden class from the modal. Instead of that, we want to toggle it instead. The classList API has a toggle method that we can use to achieve that.

function shareButtonClickHandler(e){
    // modal.classList.remove('hidden');
    modal.classList.toggle('hidden');
}

And clicking the share button now toggles the modal for sharing.

2 Likes
6

Thanks @Paul_Wilkins, your solution was well understood by me… I will try my best to follow JS best practices next time

7

Even now I find that it’s an ongoing struggle. When I fall short there are pain points that I realize I wouldn’t have had before, and only understand the need for it afterwards. Douglas Crockford and Robert C. Martin have been a big help to me along my own journey.

I wish you well with your learnings.

3 Likes
8

This topic was automatically closed 91 days after the last reply. New replies are no longer allowed.