Portfolio page: Looking cool, but button-links not working and jQuery problems

Code Feedback
1

Hi gang! I’ve mostly finished my portfolio page but am having two problems:

  1. Links aren’t working when they’re included in buttons. They work as links, but not buttons. I am stumped. Note that I’ve got an #anchor button in the nav bar, and social buttons at the bottom of the page. Neither work.
  2. jQuery doesn’t seem to be working in CodePen. I’m trying to get my Contact button to wiggle when the page is loaded, but nothing happens.

Any help that folks can offer–and feedback on my portfolio page in general–will be greatly appreciated!

2

I’ve figured out #1! Still stuck on #2.

Links included in buttons won’t work in Firefox! You need to put buttons inside of links, instead.

Here’s what I mean. Instead of this:

<button role="button" class"..."><a href="...">Go!</a></button>

You need to code this:

`< a href="…">< button role=“button” class"…">Go!< /button>< /a>

3

You’ve given all buttons the same id “contact-btn”. Id:s must be unique.You already use a class for all the buttons. You just need to add unique id:s to specific buttons.

As for the jQuery. First you need to wrap all your JavaScript like so

$(document).ready(function() {

// target your element here 

});

Hope that helps.

4

Thanks, Magwit! Appreciate you catching the button ID error–that’s what I get for copying and pasting, and also for trying to work late at night. :stuck_out_tongue:

I’ve tried what you suggest for the jQuery code, but it’s still not working. Here’s what I’ve currently got in there:

<script>

$(document).ready(function() {
    $(".contact-btn").addClass("animated bounce");
});
  
</script>

I’ve tried in both Chrome and Firefox, and it’s not working. Hmm :thinking:

5

The script tags could maybe have worked in a local development environment. I don’t know. But in codepen it is better to use the tool as intended. Most of the time you’ll be working with your JavaScript in a separate js document.anyway.

Try this. Remove the script tags from your HTML and move all of the jQuery into the JS sheet in codepen.

6

It worked, thank you!

I must have missed in the instructions that CodePen doesn’t accept the tag in the way we’re taught during the jQuery section.

I appreciate your help, Magwit!