Error in all Certificate Project sample CodePens

1

I have 3rd Party cookies disabled on my Browser, and almost all of Certificate
Project sample CodePens are broken for me.

Eg: https://codepen.io/freeCodeCamp/full/KaNGNR

This is all that I see:

image
image1366Ă—625 43.4 KB

This is caused by trying to access localStorage.setItem at the top of the script.
If I comment out the line: localStorage.setItem('example_project', 'D3: Tree Map');, the pen works fine.

I think that accessing the localStorage is not needed, and that line should be removed.
Alternatively, the line can be moved to the end of the script tag or wrapped in a try/catch block so that even if it fails then the rest of the script can execute properly.

This is an issue that affects all sample freeCodeCamp CodePens, but it is not noticed on projects that do not use JavaScript.

If there is a GitHub repository where I can submit a PR then I will be happy to help.

3

Done!

I went through the repository, but could not find the sample CodePen code anywhere.

image
image1366Ă—625 40 KB

Is there somewhere that I can submit a PR?

5

Edit: localStorage the code is used to set the correct test to use, and it locks it so you can’t switch tests.

Having to edit all the Codepens to fix this seems like a lot of work considering blocking third-party cookies is known to break sites. It warns you right in the option (Chrome: “Some sites may not work properly.”).

The testable projects are in this repo

1 Like
7

Yes, but that doesn’t mean that we stop trying to make the code work, especially when the fix is so simple, and can probably be done with a regex search and replace.

Then what is the const projectName for?

I shall submit a PR with the fix.

9

Both lines of code are used.

https://github.com/freeCodeCamp/testable-projects-fcc/blob/master/src/index.js

Here are the line numbers to look at:

L122
L150
L196
L282

10

Also, just to be clear.

Even if you change all the script files in the projects on Github, all the Codepens has to be manually edited by hand. The pens are not pulled/imported from Github to Codepen.

That is one reason switching to a different platform that lets you import from a Github repo would be nice.

11

Yes, both lines of code are used in the testing suite, but the projects in the repo DO NOT use localStorage.

image
image1366Ă—625 30.2 KB

I think that the CodePens are not up to date with the repository.