Are there any ways of completing all the free code camp challenges without that stupid Codepen.
What it did to upset me was the “on click” function worked perfectly in one pen but stubbornly refuses to in another. I have tried deleting the pen and making a new one but I still get the same problem. I have investigated hard and still hav’nt found why it works in one pen but not in another.
I’ve tried to see if altering the settings might help but I can’t even begin to understand which adjustments I should make.
I’m not wild about Codepen, either, but why not post a link to your code and let people here see if they can tell why “onclick” works in one pen and not another?
As stated, you don’t have to use codepen. That being said, it is very convenient if you ever have a problem with your code because you can just link to it and people can see it and try out their own fixes. If you never plan to ever ask for help then don’t worry about. You can still ask for help by posting code snippets, but that is more work for the respondents so you tend to get fewer responses.
That being said, why do you assume codepen is the problem? It is an extensively tested platform. I know that many times I’ve been having a problem and concluded that “javascript is broken” only to find later that it was a stupid mistake on my part. Sometimes I’ve beat my head against the keyboard for days before realizing the problem was me all along.
I know it’s all very frustrating, but don’t be so quick to assign blame. As Lisa suggests, why not post a link to your pen and let us see if we can find the problem? That is one of the strengths of codepen.
JS has no “on click” function
a) There is the <div onclick=""> attribute event listener and addEventListener("click", () =>{}) string event.
b) as @jlave mentions, there is also the document.getElementsByTagName("body").onclick = function(){} property prototyped to HTML nodes that you can assign a function to.
jQuery is a library of prewritten functions/methods/classes/objects/etc. You need to include it in your pen. Did you remember to include the jQuery library in your newly created pen?
You can open your browsers console to view any errors that may be firing that can give you a hint as to what is going wrong. You can look for something saying ‘onclick() not defined or missing’ if you forgot to include the library.
I also dislike using Codepen. You can’t upload fonts and images without having to pay and it frequently has bugs. Therefore, code that works on my local computer often has problems on Codepen. I just use git and GitHub. In the long run, you’ll be thankful that you used it anyway because every web developer who wants to work in a professional setting should be really comfortable with using them.
Codepen has one thing over GitHub but there’s an easy way to get around it. Besides letting you upload code (which GitHub does), Codepen also previews the code so you and others can immediately see the completed site. Obviously, whenever you submit a URL into FreeCodeCamp, you want to submit a URL where someone can see what you have created and not just the code for it. GitHub has this functionality too but it’s a little more tricky.
You see GitHub actually hosts a free website for you and you can place your projects into this website. Here is the tutorial for how to set up the site on GitHub: https://pages.github.com/. Once you finish with the tutorial, you should have a site at your-username.github.io (obviously, your-username will be replaced with your actual GitHub username). The site corresponds to a repository of the same name under your GitHub account. In that repository, create a folder called portfolio and upload a copy of your completed projects into it. Whenever you turn in a project to FreeCodeCamp, or just want someone to see what you have created, you use the URL: your-username.github.io/portfolio/project-name/index.html
I know all that seems like a lot but it really isn’t and I’ll use my own work as an example to help clarify things. When I started doing the Weather App project for FreeCodeCamp, I first created a repository for it called weather-app. You can see it under my repositories: https://github.com/Alanh168?tab=repositories. Then, once finished with the project, I uploaded a copy of it into the portfolio folder of my main GitHub website: https://github.com/Alanh168/Alanh168.github.io. So when I finally went to submit the project, instead of using a Codpen URL, I submitted alanh168.github.io/portfolio/weather-app/index.html
I think @Emgo-Dev hit the nail on the head. The fact it works in one pen but not the other, even though the code is the same, makes me think it’s just a matter of clicking on the JavaScript settings and adding any libraries you had on the 1st pen, to the 2nd one!
While I agree that GitHub Pages is awesome, not being able to upload images and fonts on CodePen isn’t THAT big of a deal because you can use stuff like DropBox.
You know what sucks? Opinions presented as facts suck.
Codepen is great for testing out new ideas and creating proofs of concept. It’s also great for quickly forking/remixing other people’s ideas. It’s not great for creating substantial websites or web apps (in fact, it’s pretty terrible at that).
Haha you’re right, I have my dyslexic moments! I fixed it.
@jlave I suppose and thanks for sharing that; though I don’t believe I was far off worth saying I was misleading. Just share the MDN docs if you wanted to contribute to my answer next time.
The OP had an issue with some ‘on click’ function not working in one pen but it did in another. Now if you know what you’re doing, that doesn’t make any sense. The problem is obviously not in your code if you’re using regular JS. So I concluded he didn’t really understand his code. Perhaps he was using jQuery because FCC introduces jQuery instead of JS, and a lot of new coders cannot distinguish the differences or how jQuery works on top of JS. So the problem lies outside of his code and on CodePen was likely a simple library error.
