Need more exercises doing JavaScript in codepen.io

I went flying through Front End Development Certification right up until I hit the Intermediate Front End Development Projects and fell flat on my face.

My Problem? I couldn’t for the life of me, figure out how to hook up my “next quote” button to do anything. I kept getting “Unrecognized element $”

Because we never did any work in codepen.io using the JS tab, I had no idea how to wire things up, how to save any kind of state (or maybe know that I should not be trying to save state on a web page.)

I probably spent 6 hours today just trying to figure out how to do some kind of hello world, and I’m not expecting it to get any easier.

When I finally did find someone who could help he basically said, “Yeah, after the JSON APIs and Ajax section, they pretty much throw you into the deep end with no help.”

If anyone knows of some kind of tutorial for using the JS side of codepen.io, I would jump on it today and use it as a launching pad.

You don’t actually HAVE to use CodePen. In fact, I find that CodePen messes people up, because it abstracts away all of the details of how the webpage actually works. It’s also much more difficult to debug your code, particularly CSS, because everything is wrapped in an iView.

If you do decide to use CodePen, the only thing that is different to the challenges is that you have to make sure to add links to external resources. ( I’m assuming the “Unrecognized element” error was caused by jQuery not being properly added).

In my personal opinion, the best way to understand what’s going on under the hood with CodePen is to build a simple website yourself on your own machine. To do this, follow the following steps:

  1. Create a folder on your computer
  2. Create three files in that folder. A HTML file, a CSS file and a JS file
  3. Copy the template below into your HTML file
``` Template

So between the opening <body> tag and the first <script> tag is what you can see on CodePen. So really, there's nothing special going on with CodePen. It's just abstracting away the details.

__EDIT :__
I've just realized, I never mentioned how to view the page. You just right click and open in your browser of choice. 

I also forgot to mention text editors. There are loads of free ones for beginners. Such as [Notepad++](https://notepad-plus-plus.org/download/v7.2.2.html), [Sublime Text](https://www.sublimetext.com/3) (Not free, but has an infinite free trial, so you can try it out), [Atom](https://atom.io/) or [Brackets](http://brackets.io/). I would probably recommend Brackets, its great for beginners and has LiveReload out of the box, so you don't need to keep refreshing your page when you make a change. 

Hope this helps!
1 Like

I had a similar experience to you; the FCC JSON APIs and Ajax section really leave something to be desired.

I spent a week on this AJAX Basics Course at Teamtreehouse and I think it filled in the gap left by FCC. I highly recommend it.

Make sure you finish the course during the free trial; otherwise they’ll bill you as a monthly subscriber. It’s totally doable in a week by the way, even with a full-time job.

Codepen is actually easier because it leaves out all the script tags. There is no wiring up. it sounds like you’re having some trouble with jquery based on the error. You may need to add jquery in your javascript settings box…maybe that’s what you’re missing in terms of wiring it up.

Basically you use the settings option to add the things that would otherwise be added by using “script” tags.

I wrote a tutorial that uses codepen, not sure if it will help you with this specific issue, but it sure won’t hurt. Give this a try if it looks interesting:

Click on “settings” and read the instructions/tutorial in the description, then try to replicate on your own.

Part 2 is where I add jquery, there is an explanation in the description area.

1 Like

Thanks
This helps a small ton.

I think your example would make a pretty nice 2 - 5 part lesson, just so people can see how and when things get put together.

I will take a look at that course, right now I’m hooked up with the web developer bootcamp on udemy (found a coupon that takes it from $200 down to $10 but I will keep that one in mind, and will watch out for the subscription time out.

Thanks

If you wan’t a good beginner HTML tutorial, you should check outThe Net Ninja’s Basic HTML tutorial. Its a really good place to start.

What I’m really looking for is a basic java script ajax tutorial
get state from somewhere,
click a button to change state, or refresh an api call
click a different button to do something else

That type of thing.

They also have a JS for beginners tutorial. Tutorials for pretty much any web technology you want!