Feedster

Can someone tell me why my menu disappears almost instantly when i move my mouse (ie. how do i change my code to ensure that it’s clickable): also here is the project link (https://www.codecademy.com/courses/learn-jquery/projects/feedster?action=resume_content_item)

(document).ready(() => { (’.menu’).on(‘mouseenter’, () => {
('.nav-menu').show() }) (’.menu’).on(‘mouseleave’, () => {
('.nav-menu').hide() }) (’.btn’).on(‘mouseenter’, event => {
(event.currentTarget).addClass('.btn-hover') }).on('mouseenter', event => { (event.currentTarget).removeClass(’.btn-hover’)
})
('.postText').on('keyup', event => { let post = (event.currentTarget).val();
let remaining = 140 - post.length;
$(’.characters’).html(remaining);

if (remaining <= 0) {
  $('.wordcount').addClass('red')
} else {
   $('.wordcount').removeClass('red')
}

})
$(’.postText’).focus();
});

This code doesn’t look right.
Lets start by formatting your code correctly and adding a few $s!

$(document).ready(() =&gt; {
  $(’.menu’).on(‘mouseenter’, () =&gt; {
    $('.nav-menu').show()
  })
  $(’.menu’).on(‘mouseleave’, () =&gt; {
    $('.nav-menu').hide()
  })
  $(’.btn’).on(‘mouseenter’, event =&gt; {
    $(event.currentTarget).addClass('.btn-hover');
  });
  $(’.btn’).on('mouseenter', event =&gt; {
    $(event.currentTarget).removeClass(’.btn-hover’);
  });
  $('.postText').on('keyup', event =&gt; {
    let post = (event.currentTarget).val();
    let remaining = 140 - post.length;
    $(’.characters’).html(remaining);
    if (remaining <= 0) {
      $('.wordcount').addClass('red')
    } else {
       $('.wordcount').removeClass('red')
    }
  })
  $(’.postText’).focus();
});

I’ve added a few $s. You should also always end your statements with ;.

Next, near the beginning of the code, Jquery selects the class ‘menu’ and says on (when this happens) ‘mouseenter’ (the mouse enters the element - the ‘menu’ text). So if you want to show the nav-menu class on click, you will need to change mouseenter to click.
But if you change both mouseenter and mouseleave to click, each time you click on .menu, .nav-menu will show and then immediately hide. So you will need to remove the on mouseleave block ($(’.menu’).on(‘mouseleave’, () =&gt; { $('.nav-menu').hide() })) and change mouseenter to click. Then, in your new click block, you will need to check if it is currently visible or hidden. (Can you figure out how to do this? :wink: ) Then, if it is currently hidden, show it, and if it’s shown, hide it.